nicht angemeldet
Probleme mit absoluter Positionierung
Moin zusammen,
ich versuche gerade, mit CSS mehrere div's horizontal nebeneinander auszurichten, und zwar innerhalb eines weiteren div. Das sollte doch eigentlich kein Problem sein. Nach dem Durchlesen des entsprechenden Abschnitts in SelfHTML habe ich also folgendes geschrieben:
<div style="text-align:center; width:750px; height:76px; border:1px solid #CCCCCC;">
<div style="width:534px; height:68px; margin:4px auto 0px auto;">
<!-- Inhalt des mittleren div's -->
</div>
<div style="width:70px; height:60px; position:absolute; top:8px; left:5px;">
<!-- Inhalt des linken div's -->
</div>
<div style="width:70px; height:60px; position:absolute; top:8px; right:5px;">
<!-- Inhalt des rechten div's -->
</div>
</div>
Der mittlere div (der nicht "position:absolute" verwendet) kommt auch genau da an, wo er hinsoll. Die beiden anderen jedoch richten sich nicht an den Grenzen des äußeren div's aus, sondern am body, d.h. sie landen janz weit draußen in den Ecken des Browserfensters! Und ich habe keine Ahnung, woran das liegen könnte, denn in SelfHTML ist ja doch ein Beispiel von genau dieser Sache drin - und das funktioniert...
Ich bin schon richtig gefrustet und hoffe, daß mir hier jemand weiterhelfen kann.
Mit Dank im voraus,
Ulrich
-
Hallo Ulrich,
ich versuche gerade, mit CSS mehrere div's horizontal nebeneinander auszurichten, und zwar innerhalb eines weiteren div.
wieso verwendest du, wenn du die DIVs nebeneinander positionieren willst, absolute Positionierung? Viel einfacher wäre die Verwendung von float (schau dir mal das entsprechende Kapitel in SELFHTML an: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Die beiden anderen jedoch richten sich nicht an den Grenzen des äußeren div's aus, sondern am body, d.h. sie landen janz weit draußen in den Ecken des Browserfensters!
Das ist die Eigenschaft der absoluten Positionierung, sie ist eben nicht relativ zu einem Elternelement.
HTH und
Grüße aus Darmstadt,
Benjamin-
wieso verwendest du, wenn du die DIVs nebeneinander positionieren willst, absolute Positionierung? Viel einfacher wäre die Verwendung von float (schau dir mal das entsprechende Kapitel in SELFHTML an: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Weil ich die genaue Positionierung brauche. Die äußeren DIVs sollen nicht irgendwie neben dem mittleren plaziert werden, sondern präzise am Rand des Rahmens (es sind Bilder drin).
Das ist die Eigenschaft der absoluten Positionierung, sie ist eben nicht relativ zu einem Elternelement.
Doch, zumindest laut SelfHTML:
"Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements." (http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position)
Da ist sogar ein Beispiel bei, wo genau das vorgeführt wird. Und mir will einfach nicht in den Kopf, was ich anders/falsch gemacht habe...-
Hallo Ulrich,
Das ist die Eigenschaft der absoluten Positionierung, sie ist eben nicht relativ zu einem Elternelement.
Doch, zumindest laut SelfHTML:
(http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#position)
Ja, stimmt, du hast recht. Ich bin irgendwie nicht von ineinander verschachtelten DIVs ausgegangen... Aber ich verstehe immer noch nicht, was gegen float spricht. Ich habe folgendes Beispiel schonmal aufgrund eines Postings erarbeitet (jetzt leicht abgewandelt):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>New HTML document</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#links {
border: 5px solid rgb(255,0,0);
float: left;
height: 200px;
width: 100px; }#mitte {
border: 5px solid rgb(0,255,0);
float: left;
height: 200px;
width: 500px; }#rechts {
border: 5px solid rgb(0,0,255);
float: left;
height: 200px;
width: 100px; }
</style>
</head><body>
<div style="width: 750px;">
<div id="links">LINKS</div>
<div id="mitte">MITTE</div>
<div id="rechts">RECHTS</div>
</div></body>
</html>
Erfüllt das nicht genau deinen Zweck (mal abgesehen davon, dass das jetzt optisch nicht so aussieht wie deines, aber das lässt sich problemlos so machen)? Abstände zwischen den DIVs zueinander sind kein Problem, da hilft dir margin.
Grüße aus Darmstadt,
Benjamin-
Stimmt, mit margin bzw. padding sollte sich das machen lassen.
Nun habe ich aber noch ein zweites Problem: Ich will einen Text, z.B. "(C) by ...", am unteren Rand eines DIVs ausgeben. Der restliche Inhalt des DIVs wird dynamisch erzeugt, ist also nicht immer gleich groß. Ohne absolute Positionierung sehe ich da keine Möglichkeit...
MfG, Ulrich
-
Hallo Ulrich,
Nun habe ich aber noch ein zweites Problem: Ich will einen Text, z.B. "(C) by ...", am unteren Rand eines DIVs ausgeben. Der restliche Inhalt des DIVs wird dynamisch erzeugt, ist also nicht immer gleich groß. Ohne absolute Positionierung sehe ich da keine Möglichkeit...
Wohin soll der Text, und in welches der DIVs? Am besten, du machst mal eine kleine Skizze, wie das später aussehen soll (eine kleine ASCII-Grafik reicht ja vollkommen aus)
Grüße aus Darmstadt,
Benjamin-
Also, das Ganze soll nachher so aussehen:
----------------------------------------
| Titelzeile |
------------------------------------------------ ---------------------- --------
| | | | | |
| Menü | | | |Extras|
| | | | | |
| | | Body | | |
| | | | | |
| | | | | |
| (C) | | | |(Mail)|
-------- ---------------------- --------(Dieses Layout nimmt *nicht* die gesamte Breite des Bildschirmfensters in Anspruch, sondern ist auf 750 Pixel festgelegt und soll zentriert dargestellt werden.)
Die Titelzeile hab ich mittlerweile fertig, dank Deines Tips mit float - danke dafür. Nun sollen die drei DIVs darunter (Menü, Body und Extras) nach dem gleichen Schema positioniert werden. Das werde ich wohl auch mit float noch hinbekommen. Nur: Da, wo (C) bzw. (Mail) steht, soll noch was stehen. Und zwar unabhängig vom restlichen Inhalt des DIVs. Das wäre eigentlich ein Fall für "position:absolute; bottom:10px". Bloß funktioniert das bei mir halt nicht, aus welchen Gründen auch immer...
Gruß, Ulrich
-
Hallo, Ulrich,
| | | | | |
| Menü | | | |Extras|
| | | | | |
| | | Body | | |
| | | | | |
| | | | | |
| (C) | | | |(Mail)|
Das wäre eigentlich ein Fall für "position:absolute; bottom:10px". Bloß funktioniert das bei mir halt nicht, aus welchen Gründen auch immer...
Zeig bitte dein Versuch, »funktioniert nicht« ist keine ausreichende Fehlerbeschreibung.
Meine Versuche:
http://home.t-online.de/home/dj5nu/fanhost/css-spalten-fuss.html
http://home.t-online.de/home/dj5nu/fanhost/css-spalten-fuss2.htmlGrüße,
Mathias--
»Menschen sind faule Bruten« - glowhead-
Hallo molily,
http://home.t-online.de/home/dj5nu/fanhost/css-spalten-fuss.html
http://home.t-online.de/home/dj5nu/fanhost/css-spalten-fuss2.htmlGute Umsetzung *lob* und den Blindtext finde ich wirklich super, ich hoffe Du hast nix dagegen, daß ich ihn mir kopiert habe.
Grüße aus Nürnberg,
HarryS-
Hallo Harry,
den Blindtext finde ich wirklich super, ich hoffe Du hast nix dagegen, daß ich ihn mir kopiert habe.
Den habe ich selbst nur plagiiert (eben weil er mir auch gefällt). ;) Der Text ist anscheinend Allgemeineigentum (Oxymoron?) beziehungsweise sollte m.E. gemäß den netzeigenen Regeln der Fairness behandelt werden (*). Ich habe ihn konkret dem Blindtext-Archiv http://www.newmediadesigner.de/ entnommen (habe die Quelle aber zu meiner Schande nicht angegeben, weil der/die AutorIn jemand anderes zu sein scheint).
Grüße,
Mathias
(*) <abschweif class="ideologisch">Ein fabelhaftes Beispiel/Lehrstück, wie Netzgemeinschaft selbstregulierend durch verantwortungsvolle Menschen ohne RL-Gesetze auskommen kann. ;)</abschweif>-
Hallo molily,
den Blindtext finde ich wirklich super, ich hoffe Du hast nix dagegen, daß ich ihn mir kopiert habe.
Den habe ich selbst nur plagiiert (eben weil er mir auch gefällt). ;) Der Text ist anscheinend Allgemeineigentum (Oxymoron?) beziehungsweise sollte m.E. gemäß den netzeigenen Regeln der Fairness behandelt werden (*). Ich habe ihn konkret dem Blindtext-Archiv http://www.newmediadesigner.de/ entnommen (habe die Quelle aber zu meiner Schande nicht angegeben, weil der/die AutorIn jemand anderes zu sein scheint).Wieder was gelernt, die haben da wirklich schöne Sachen. Es muß also nicht immer dieses blöde "Lorem ipsum" sein.
(*) <abschweif class="ideologisch">Ein fabelhaftes Beispiel/Lehrstück, wie Netzgemeinschaft selbstregulierend durch verantwortungsvolle Menschen ohne RL-Gesetze auskommen kann. ;)</abschweif>
Oooooh das hast DU aber jetzt schön gesagt ;)
Grüße aus Nürnberg,
HarryS
-
-
-
Hat sich erledigt, ich mußte einfach nur allen DIVs "position:absolute" geben.
Gruß, Ulrich
-
-
-
-
-
-
-
-
Hallo Ulrich,
hier ist noch ein Link als Ergänzung zu Benjamins Posting:
http://thenoodleincident.com/tutorials/box_lesson/boxes.htmlGrüße
Andreas -
Hallo Ulrich,
ich versuche gerade, mit CSS mehrere div's horizontal nebeneinander auszurichten, und zwar innerhalb eines weiteren div. Das sollte doch eigentlich kein Problem sein. Nach dem Durchlesen des entsprechenden Abschnitts in SelfHTML habe ich also folgendes geschrieben:
<div style="text-align:center; width:750px; height:76px; border:1px solid #CCCCCC;">
<div style="width:534px; height:68px; margin:4px auto 0px auto;">
<!-- Inhalt des mittleren div's -->
</div><div style="width:70px; height:60px; position:absolute; top:8px; left:5px;">
<!-- Inhalt des linken div's -->
</div><div style="width:70px; height:60px; position:absolute; top:8px; right:5px;">
<!-- Inhalt des rechten div's -->
</div></div>
Der mittlere div (der nicht "position:absolute" verwendet) kommt auch genau da an, wo er hinsoll. Die beiden anderen jedoch richten sich nicht an den Grenzen des äußeren div's aus, sondern am body, d.h. sie landen janz weit draußen in den Ecken des Browserfensters! Und ich habe keine Ahnung, woran das liegen könnte, denn in SelfHTML ist ja doch ein Beispiel von genau dieser Sache drin - und das funktioniert...
Ich bin schon richtig gefrustet und hoffe, daß mir hier jemand weiterhelfen kann.
Wenn Du dem äßersten div auch ein position:absolute spendierst, dann sieht es genauso aus wie Du möchtest.
Grüße aus Nürnberg,
HarryS-
Wenn Du dem äußersten div auch ein position:absolute spendierst, dann sieht es genauso aus wie Du möchtest.
Das war's...
Danke!
Ulrich
-