nicht angemeldet
Hallo an alle,
ich habe mir probeweise mal einen sehr einfachen HTML-Bereich gebaut und ihn mit Testsätzen gefüllt damit ich was zum scrollen habe. Der body-Bereich sieht wie folgt aus:
<body>
<img id="logo" src="images/therminator2.png" />
<nav class="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">bla bla</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Videos</a></li>
</ul>
</nav>
<section id="main">
<?php
for($i=1; $i<=100; $i++){
echo "Dies ist ein cooler Test! Nummer: ".$i."<br>";
}
?>
</section>
</body>
Das ganze habe ich hiermit in einen sehr simplen Style gepackt:
body{
background:#777;
font-size:100%;
margin:0;
padding:0;
}
.nav{
background:red;
margin:0 15% 0 15%;
}
.nav ul{
display:block;
padding:0;
margin:2em 0 0 0;
height:3em;
}
.nav ul li{
display:inline-block;
background:green;
margin-right:0.3em;
padding:1em;
}
.nav ul li a{
font-size:1em;
text-decoration:none;
color:black;
}
#Main{
background:white;
margin:0 15% 2em 15%;
}
Und da taucht dann auch schon mein Problem auf. Wenn ich dem nav-Bereich eine Höhe von 3em gönne, die Textgröße auf 1em setze und das padding auch, wieso hab ich dann überstehende Ränder?
Ich wäre echt dankbar für eine Lösung denn ich habe keine und ich vermute mal auch nicht dass die Lösung so aussieht, dass man die Seite auf maximale Größe zoomt und dann rumprobiert, oder?
marctrix
Gunnar Bittersmann
Matthias Apsel
Rolf b
Auge
Tabellenkalk
MudGuard