Supportnet / Forum / Webseiten/HTML
CSS - Elemente untereinander darstellen
Frage
Ich wollte zwei farbige Blöcke untereinander darstellen lassen. Leider hat sich das als schwieriger erwiesen, als es sich anhört.
Mein CSS-Code sieht so aus:
[code]#bar1 {
position: absolute;
left: 0px;
height: 10px;
width: 200px;
background-color: #6F9BBF;
}
#bar2 {
position: absolute;
left: 0px;
height: 10px;
width: 200px;
background-color: #C0C0C0;
}[/code]
Innerhalb der HTML-Seite wird das ganze dann so aufgerufen:
[code]<div id="bar1"></div>
<div id="bar2"></div>[/code]
Das ganze hat dann zur Folge, dass beide Blöcke in gleicher Höhe übereinander dargestellt werden. Ich war auf dem Trip, dass Blockelemente immer untereinander dargestellt werden, soweit man nicht etwas anderes angibt, z.B. mit float. Offensichtlich liege ich da aber verkehrt.
Antwort 1 von ditsch
Du hast schon recht, leider hast du mit position: absolute und den
Positionsangeben beiden div´s die gleiche Position zugewiesen, also
stehen sie untereinander.
Positionsangeben beiden div´s die gleiche Position zugewiesen, also
stehen sie untereinander.
Antwort 2 von ditsch
Ich meine natürlich übereinander...;-)
Antwort 3 von rfb
Zitat:
position:absolute
Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
position:absolute
Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
(www.CSS4You.de)
mit zusätzlichen Angaben zu top kannst du sie natürlich so positionieren wie gewünscht
top:xpx beim ersten
top:x+10+???px beim zweiten
Antwort 4 von sutadur
Gibt es nicht auch eine Möglichkeit, das zweite Element "automatisch" unterhalb des ersten anzeigen zu lassen, ohne spezifische Angaben zu Position zu machen?
Antwort 5 von rfb
indem du sie in ein umgebendes div packst und dieses absolut positionierst, die inneren divs aber nicht.
Antwort 6 von sutadur
Probier ich aus, danke! :)