schutzgeist
Erfahrenes Mitglied
Hallo,
ich habe eben nach Mikes Tutorial http://www.tutorials.de/forum/css-tutorials/279637-zentriertes-layout-mit-drei-spalten.html eine Seite neu aufgebaut.
Hat soweit auch alles geklappt.. aber
Der <p>...</p> scheint irgendwie umformatiert zu sein.. die Abstände stimmen hinten und vorne nicht.. bzw. ich hab garkeine.
Sieht aus, als hätte ich überall <br>'s drin..
Hab die Stelle wos hakt bisher leider nicht finden können
CSS:
HTML:
ich habe eben nach Mikes Tutorial http://www.tutorials.de/forum/css-tutorials/279637-zentriertes-layout-mit-drei-spalten.html eine Seite neu aufgebaut.
Hat soweit auch alles geklappt.. aber
Der <p>...</p> scheint irgendwie umformatiert zu sein.. die Abstände stimmen hinten und vorne nicht.. bzw. ich hab garkeine.
Sieht aus, als hätte ich überall <br>'s drin..
Hab die Stelle wos hakt bisher leider nicht finden können
CSS:
Code:
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}
body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
background: #FFF;
color: #333333;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-size: 11px;
}
div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
html, body {
height: 100%;
}
/* DIV-Boxen */
div#wrapper {
position: relative;
margin: 0 auto;
width: 1001px;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(../img/bg.jpg) repeat-y center;
}
div#header {
height: 199px;
}
div#leftCol {
width: 233px;
float: left;
}
div#leftCol {
float: left;
width: 233px;
}
div#leftCol ul {
margin: 0;
padding: 0;
width: 233px;
}
div#leftCol li {
position: relative;
list-style: none;
margin: 0;
border-bottom: 1px solid #f1ad00;
padding-top: 3px;
padding-bottom: 3px;
padding-left:2px;
}
div#leftCol li:hover {
font-weight: bold;
}
div#leftCol li a {
display: block;
padding: 3px 0px 3px 5px;
text-decoration: none;
width: 233px;
color: #333;
}
div#leftCol li a:hover {
color: #333;
}
div#leftCol>ul a {
width: auto;
}
div#leftCol ul.level1 li.submenu:hover ul.level2, div#leftCol ul.level2 li.submenu:hover ul.level3 {
display:block;
}
div#rightCol {
width: 83px;
float: right;
}
div#centerCol {
margin-left: 318px;
margin-right: 83px;
}
div#leftCol, div#rightCol, div#centerCol {
padding-bottom: 25px;
}
div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 995px;
height: 160px;
padding-left: 6px;
color: #333333;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-size: 10px;
background: url(../img/bottom.jpg) bottom;
background-repeat: no-repeat;
}
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */HTML:
HTML:
<div id="wrapper" class="clearfix">
<div id="header"> <img src="img/rubrik/1.jpg" width="231" height="199" /><img src="img/head.jpg" width="770" height="199" /> </div>
<div id="leftCol">
<ul class="level1">
<li class="active"><a href="index_test.asp?ID=1">Menuepunkt</a></li>
<li class="submenu"><a href="index_test.asp?ID=2">Menuepunkt</a></li>
<li><a href="index_test.asp?ID=3">Menuepunkt</a></li>
<li><a href="index_test.asp?ID=4">Menuepunkt</a></li>
</ul>
</div>
<div id="rightCol"> </div>
<div id="centerCol">
<!-- Inhalt -->
</div>
<div id="footer">
<p><strong>Anschrift</strong><br />
Strasse<br />
12345 Ort</p>
<p>Tel. 12345 12345<br />
Fax 12345 12345</p>
<p>bla@<br />
blablabla.de</p>
</div>
</div>
