Frage stellen
ich habe ein CSS Template erstellt. Ich habe schon immer Probleme gehabt die Theorie von CSS umzusetzen. Ich checks einfach nicht. ^^
Ich habe nun mit Müh und Not etwas erstellt, hätte da nun aber gerne noch eine dritte Spalte und ich habe schon Stundenlang rumprobiert.
Also mein Design sollte in der Mitte der Seite zentriert und dynamisch sein und bestehen aus:
2xHeader(direkt untereinander), Spalte 1 die unterteilt ist in zwei Container direkt untereinander. Die breite beider Spalten ist fest auf 230px, Spalte 2 ist der Content Bereich und sollte dynamisch sein und Spalte 3 am besten mit fester breite.
Also bis auf die dritte Spalte habe ich alles hinbekommen.
Spalte 1 und Spalte 3 werden die selbe Farbe besitzen.
CSS
- Code: Alles auswählen
<style type="text/css">
body {
background-color:#FFE235;
font-size: 10pt;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
}
/* --------------------Linie */
hr
{
width:80%;
text-align:center;
}
p, pre {
margin:0;
}
div {
border-style:dotted;
border-width:thin;
border-bottom-color:#000;
}
/* ----------container zentriert das layout-------------- */
#container {
width: 90%;
margin: 0 auto;
padding: 0;
background-color:#FFF;
border:none;
color:#000;
}
/* ----------banner for logo-------------- */
#banner {
margin: 0;
padding: 0;
background-color:#FFBE42;
border-style:solid;
border-width:medium;
border-top-width:0;
border-color:#FFF;
}
#banner p{
margin-left: 20em;
padding: 25px;
}
/* --------------------Hauptnavigation */
#mainnavi {
margin: 0;
padding: 0;
background-color:#E89430;
}
#mainnavi p{
margin-left: 20em;
padding: 0 25px;
}
/* -----------------Inhalt--------------------- */
#content {
min-height:600px;
background-color:#0C9;
padding: 0;
margin-left:230px;
margin-bottom:0;
margin-top:0;
}
/* --------------left navigavtion------------- */
#left {
float: left;
width: 230px;
margin: 0;
color:#03F;
border:none;
}
/* -----------Image Left Navigation */
#left1 {
margin:0;
padding:0 px 0 0 0;
background-color:#FFF;
text-align:center;
border:none;
}
/* ---------------Menü */
#left2 {
margin:0;
padding: 15px 20px 15px 25px;
border:none;
color:#000;
}
/* -----------footer--------------------------- */
#footer {
clear: left;
padding: 0;
margin: 0;
background-color:#FFBE42;
height:20px;
}
</style>
HTML Code
- Code: Alles auswählen
<div id="container">
<div id="banner" ><p> </p>
</div>
<div id="mainnavi" >
<p><code>Plaltzhalter Hauptnavigation</code></p>
</div>
<div id="left">
<div id="left1"><img src="P1010467.jpg" width="226" height="148" style="border:2px #FFBE42 solid;"/></div>
<div id="left2">
Menü
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p>Bla</p>
<p> </p>
</div>
</div>
<div id="content">
</div>
<div id="footer"></div>
</div>
