nicht angemeldet
CSS 3Spalten werden nicht nacheinander dargestellt.
Versuch gerade in CSS ne Vorlage für Typo3 zu zaubern.
Poste mal den Quellcode, damit man es leicher nachvollziehen kann.
Habe mehrere Container definiert.
In Container 3 habe ich dann div. Bereiche angelegt.
Jeweils mit verschiedenen Farben. Damit man es besser erkennen kann, was wo ist.
Das Blöde ist das iim div Inhalt nicht die 3 Spalten nacheinander dargestellt werden (div links, mitte, rechts). Eine gliedert sich kurzerhalb außerhalb des Containers ein..
<html>
<head>
<title>Kothes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="language" content="de" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="container2">
<div id="container3">
<div id="logo">
</div>
<div id="menueSuche">
</div>
<div id="banner">
</div>
<div id="inhalt">
<div id="links">
</div>
<div id="mitte">
</div>
<div id="rechts">
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</div>
</body>
</html>
body{
text-align:center;
}
div#container{
background-color: #eeeeee;
}
div#container2{
width: 1000px;
height: 850px;
background-color: white;
margin:0px auto;
}
div#container3{
width:950px;
height: 100%;
background-color: yellow;
margin: 0px auto;
border: 1px solid black;
}
div#logo{
width: 950px;
height: 50px;
background-color: black;
}
div#menueSuche{
float: left;
width: 950px;
height: 40px;
background-color: gray;
}
div#banner{
float: left;
width: 950px;
height: 80px;
background-color: red;
}
div#inhalt{
float: left;
width: 950px;
height: 650px;
background-color: green;
}
div#links{
float:left;
width: 200px;
height: 650px;
background-color: gray;
}
div#rechts{
width: 20px;
height: 650px;
margin-left:850px;
background-color: gray;
}
div#mitte{
margin: 0 12em 0 16em;
padding: 0 1em;
}
div#footer{
float: left;
width: 950px;
height: 30px;
background-color: blue;
}
-
Problem fat gelöst: Habe jetzt mit margin-left die Abstände gesetzt und dann klappte es. Jetzt kolidiert aus einem mir unerfindlichem Grund die rechte Spalte mit der Fußzeile. Dürfte aber nur noch eine Kleinigkeit sein...
<html> <head> <title>Kothes</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="language" content="de" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <!-- ###DOKUMENT### begin --> <div id="container"> <div id="container2"> <div id="container3"> <div id="logo"> ###LOGO### :: ###Sprache### </div> <div id="menueSuche"> ###MENU### :: ###SUCHE### </div> <div id="banner"> ###BANNER### </div> <div id="inhalt"> <div id="links"> ###LINKS### </div> <div id="mitte"> ###MITTE### </div> <div id="rechts"> ###RECHTS### </div> </div> <div id="footer"> ###FOOTER### :: ###DATUM### ::: ###Druckversion### </div> </div> </div> </div> <!-- ###DOKUMENT### end --> </body> </html>body{ text-align:center; } div#container{ background-color: #eeeeee; } div#container2{ width: 1000px; height: 850px; margin:0px auto; } div#container3{ width:950px; height: 100%; margin: 0px auto; border: 1px solid black; } div#logo{ width: 950px; height: 50px; border-bottom-style: solid; border-width: 1px; } div#menueSuche{ float: left; width: 950px; height: 40px; border-bottom-style: solid; border-width: 1px; } div#banner{ float: left; width: 950px; height: 80px; border-bottom-style: solid; border-width: 1px; } div#inhalt{ float: left; width: 950px; height: 650px; border-bottom-style: solid; border-width: 1px; } div#links{ float:left; width: 200px; height: 650px; border-right-style: solid; border-width: 1px; } div#mitte{ width: 600px; margin-left: 200px; border-right-style: solid; border-width: 1px; } div#rechts{ margin-left: 800px; width: 150px; height: 650px; border-left-style: solid; border-width: 1px; } div#footer{ float: left; width: 950px; height: 30px; }-
Jetzt kolidiert aus einem mir unerfindlichem Grund die rechte Spalte mit der Fußzeile. Dürfte aber nur noch eine Kleinigkeit sein...
clear: left (oder both). Für Dich interessant sollte noch molilys CSS-Spaltenlayout-Artikel sein.
-