nicht angemeldet
CSS Spaltenlayout zwei Spalten gleiche Länge mit float
Hallo!
Ich brauche jetzt mal eure Hilfe, weil ich einfach nicht weiterkomme.
Ich versuche gerade, eine Seitenlayout aus css-Boxen zu bauen, da ich gehört habe, dass Tabellen eher nicht mehr benutzt werden sollen. (habe früher immer mit Tabellen gearbeitet, aber wollte mich mal an Boxen probieren)
Es geht jetzt darum, dass die Inhaltsbox aus zwei Boxen besteht. Wenn die eine länger ist als die andere, soll die zweite trotzdem mitwachsen.
Ich halte mich an dieses Beispiel:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wechsel-zu-float
Beispiel 4:
http://aktuell.de.selfhtml.org/weblog/files/2006-01-spaltenlayout-beispiel4.html
Nun ist es in meiner Umsetzung so, dass wenn ich an der Stelle:
#container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }[code lang=css]
den border komplett entferne, das mitwachsen nicht mehr funktioniert.
Das verstehe ich nicht. Das heißt ja wohl, dass irgendwo in meinem code ein Fehler sein muss.
Außerdem wachsen beide Spalten nicht mit, wenn die linke länger wird, sondern nur, wenn die rechte länger wird. Das ist in dem Beispiel aus selfhtml nicht so.
Ich weiß, dass ich, wenn ich zwei Hintergrundfarben habe, der Haupt-Container-Box (#container) ein Hintergrundbild geben muss, ich habe jetzt aber erstmal nur eine Farbe drin, weil ich erstmal noch an dem Code selbst rumprobiere, das Bild kommt dann später.
Ich glaube ich habe das mit float und den positons noch nicht so richtig verstanden, das ist mir aber erstmal egal, solange ihr mir helft meinen code zum laufen zu bringen ;-)
Was mache ich bloß falsch? Bitte helft mir!!!
Viele Grüße
Josefine
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<!--
body { color:black; background-color:white; }
#links { float:left; width:20em; border:1px solid green; padding:1em; background-color:#f0f0f0; }
#rechts { border:1px solid blue; padding:1em; overflow:hidden; }
p { margin:0; }
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
body {
font-family: verdana, arial; color:#000000; font-size: 10pt; color:black; background-color: #bfd1e8; }
#container {margin: auto; margin-top: 20px; width: 878px; border:1px solid #bfd1e8; background-color:#daeaff; }
.grossblau {
color:#003059; font-size: 20pt;
}
#seiten {
top: 25px;
left: 0px;
height: 240px;
width: 100%;
background: #7798bc;
position: absolute;
border: 2px;
border-style: solid;
border-color: #bfd1e8;
}
#oben {
top: 20px;
height: 240px;
width: 876px;
background-image: url(bilder/startseite.jpg);
position: absolute;
border: 5px;
border-style: solid;
border-color: #bfd1e8;
text-align: top;
color: #003059;
}
#kopfunten
{
margin-top: 160px;
height: 10px;
width: 866px;
padding: 5px;
font-size:11pt;
text-align: center;
word-spacing: 1.4em;
}
#links {margin-top:250px; width: 200px; padding: 5px; float:left; }
#rechts {margin-top:250px; width: 667px; padding: 5px; margin-left:205px; background-color:white;}
p { margin:0; }
</style>
</head>
<body>
<div id="seiten"></div>
<div id="container">
<div id="oben">
<div class="grossblau">www.test.de<br></div>
Test Test Test Test
<div id="kopfunten">
<a href="index.html">Test</a> <a href="seiten/wohnunga.html">Test</a> <a href="seiten/wohnungb.html">Test</a> <a href="seiten/reihenhaus.html">Test</a> <a href="seiten/umgebung.html">Test</a> <a href="seiten/mietwagen.html">Test</a> <a href="seiten/kontakt.html">Test</a> <a href="seiten/impressum.html">Test</a>
</div>
</div>
<div id="links">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
<div id="rechts">
<div class="rechts">
<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test testtest test test test test test test test test test test test
</p>
</div>
</div>
</body>
</html>[code lang=html]
-
Fehler nicht gefunden,
aber mit Hilfe dieses Artikels komplett neu angefangen und hinbekommen:http://ohne-css.gehts-gar.net/0005.php