Navigationsleiste mit <div> containern geht nicht über ganze breite.

SteffiS

Grünschnabel
Hallo,

ich bin gerade noch in der Anfangsphase mit html und css lernen und habe direkt schon relativ am Anfang ein Problem. Und zwar soll meine Navigationsleiste über die ganze Bildschirmbreite gehen. Allerdings, obwohl ich die breite des div containers auf 100% gestellt habe ist an der rechten und linken Seite ein kleine Lücke. Außerdem kommt unten kein scrollbalken wenn man das Fenster verkleinert, wahrscheinlich weil die breite 100% ist und er die navileiste dann einfach verkleinert. Ich habe auch schon probiert der Leiste eine feste Größe von 1024px zu geben, aber ich denke mir mal das klappt nur so lange, wie die Auflösung auf dieser Stufe ist, wenn ein anderer jetzt mit einer höheren Auflösung auf die Seite geht wird beim ihm die Leiste wohl nicht über die komplette Breite gehen. Komisch ist auch das die Leiste nicht ganz links anfängt obwohl ich auch float:left eingestellt habe. Am besten ich poste einfach mal den Code und ihr fragt dann, wenn ihr etwas nicht versteht.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<link rel="SHORTCUT ICON" href="http://www.....org/bilder/logo.ico"/>
<title>....org | ......</title>
</head>

<body>
<div>
<ul>
<li><a class="standard" href="....htm">Test</a></li>
<li><a class="standard" href="....htm">Test</a></li>
<li><a class="standard" href="....htm">Test</a></li>
<li><a class="standard" href="....htm">Test</a></li>
</ul>
</div>

<div class="header">
                <div class="logo"><a href="/" onfocus="if(this.blur)this.blur()"><img src="bilder/Logo.jpg" alt="....org - ..." title="....org – ..."/></a></div>


                <div class="navi">
                        <ul>

                                <li class=""><a class="groß" href="http://www....org/index.htm" title=" ......">Test</a></li><li class=""><a class="groß" href="http://www......htm" title="...." >Test</a></li>
                        </ul>
                 </div>
</div>


</body>

</html>


Code:
div.navi {
margin-top:65px;
}

div.logo {
float: left;
margin-right: 10px;
}

div.header {
 background-image:url("bilder/Header.jpg");
 margin-left: 0px;
 margin-top: 2px;
 margin-bottom: 10px;
 width: 100% !important;
 height: 100px;
 float:left;
 }

 li{
display: inline;
margin-left:0px;
}

ul {
margin-left:0px;
display: inline;
font-size:10px;
}


und das div.header soll über die ganze breite gehen!
 
Ergänze in deiner CSS-Datei ganz oben

Code:
* { margin: 0;padding: 0; }

Dadurch werden alle Innen- und Außenabstände zurückgesetzt. Dann sollten auch diese Abstände weg sein.
 
Dann markier dien Thema das nächste Mal bitte als Erledigt.

Noch ein Tipp um Forum: Es gibt auch [code=css]...[/code]
 
Zurück