Einspaltiges CSS mit Divs
Wolfgang
- css
Hallo liebe Forumsschreiber,
ich bastele seit einiger Zeit mit CSS herum (mit mehr oder weniger Erfolg), aber jetzt stehe ich vor einem völlig banalen Problem, das ich nicht zu lösen vermag. Vielleicht ist das reichlich peinlich - oder aber es geht gar nicht. Ich bitte Euch um Hilfe.
Ein Beispiel habe ich auf www.medicompex.at/cssTest hochgeladen.
Es besteht nur aus ein paar Zeilen Code, den ich ganz unten gleich einfügen werde.
Es besteht ein body tag mit einem background image (siehe: www.medicompex.at/cssTest/images/backgroundBanner.gif), welches nur über einen Teil der Seite reicht. (dieses Image ist aber im Beispiel leider verdeckt).
Einem p tag mit Text innerhalb eines divs
Einem weiteren div Tag, der unten am Boden einen farbigen Balken über den Rest der Seite erzeugen soll und daher eine farbe als Background definiert hat.
Das war´s auch schon.
Was ich möchte:
je nach Textlänge soll das div "bottom" unmittelbar unter dem Text beginnen, das ist alles. Ich habe etwa 3 Stunden!!! daran herumprobiert und es nicht hinbekommen.
Danke an alle, die sich meiner annehmen!
Hier noch der Code:
body {
margin:0;
padding:0;
background: #f3f3f3 url(images/backgroundBanner.gif) repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#text {
position:absolute;
margin-left:350px;
margin-top:170px;
width:300px;
}
#gruen {
color:#CADB5C;
}
#bottom {
background:#600000;
width:100%;
height:500px;
}
</style>
</head>
<body>
<div id="text">
<p id="text">
<strong>Lorem Ipsum</strong><br />
<span id="gruen">Dummytext</span><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="bottom">
</div>
</body>
Hi Wolfgang!
Du hebst #text aus dem Dokumentenfluss. Damit #bottom erst unter #text anfängt musst du einen entsprechenden oberen Außenabstand definieren, z.B. margin-top:470px.
Ich hoffe, ich habe dich richtig verstanden.
MfG H☼psel
Hallo H☼psel,
vielen vielen Dank! Nur wenige Minuten nach der Frage gleich die Antwort und das am Sonntag!!!
Irgendwie habe ich das wohl mit dem position:abolute falsch verstanden.
Das margin war mir klar, hatte ich auch schon probiert, nur war es natürlich dann vom oberen Rand.
Danke nochmal und einen schönen Sonntag,
Wolfgang
Hi Wolfgang!
Du hebst #text aus dem Dokumentenfluss. Damit #bottom erst unter #text anfängt musst du einen entsprechenden oberen Außenabstand definieren, z.B. margin-top:470px.
Ich hoffe, ich habe dich richtig verstanden.
MfG H☼psel
Hallo,
vielen vielen Dank! Nur wenige Minuten nach der Frage gleich die Antwort und das am Sonntag!!!
Die Rechnung kommt dann mit der Post :-)
Gruß,
Severin
Hi,
<div id="text">
<p id="text">
Die Werte von id-Attributen müssen dokumentweit eindeutig sein.
</p>
</div>
Wozu soll das div überhaupt gut sein - sein einziger Inhalt ist der Absatz, also dürfte es ziemlich überflüssig sein.
cu,
Andreas