Navigation Bar Problem

phil

Hallo,

ich bin gerade dabei mir eine Hompage zu erstellen und verzweifle jetzt an der Navigation Bar.
Ich kann Sie nicht über die ganze Seite strecken mit width:100% und kann die Elemente des div tags auch nicht mittig ausrichten.

Hier mal was ich bisher habe:
HTML:

<div id="Rahmen"><ul id="Navigation">
<li><a href="index.html">Startseite</a></li>
<li><a href="sites/angebote.html">Angebote</a>
<ul>
<li><a href="#">Reparaturen</a></li>
<li><a href="#">EDV Dienstleistungen</a></li>
</ul></li>
<li><a href="sites/kontakt.html">Kontakt</a></li>
<li><a href="sites/impressum.html">Impressum</a></li>
<li><a href="sites/über_uns.html">Über uns</a></li>
</ul></div>

CSS:
#Rahmen {
margin:-14px;
margin-left:5px;
margin-right:5px;
text-align:center;
background-color: #99CCFF;

}

div#Rahmen div {
margin:-14px;
margin-left:0px;
margin-right:0px;
clear:none;
position: fixed;
width:100%;

}
ul#Navigation {

text-align: center;
background-color: #99CCFF;

}

ul#Navigation li {
list-style: none;
float:left;
position: relative;

}

ul#Navigation li ul {
margin:0;
padding:0;
position: fixed;
display: none;
}

ul#Navigation li:hover ul {

display:block;

}
ul#Navigation li ul li {
float: none;
display: block;

}

ul#Navigation a, ul#Navigation span {
display: block;
width: 12em;
padding: 1em 2.3em;
text-decoration: none;
text-align:center;
color: white; background-color: #99CCFF;
}

Schon ein Mal danke im vorraus, denn ich verzweifle seit Stunden .
Mit freundlichen Grüßen

Phil

Bleistift

Was auch immer du mit deinen margin Angaben da versuchst ...

100%-Breite deiner Liste erhälst du nur, wenn auch dein body kein margin und padding mehr hat.
Ebenfalls, wozu ist der "Rahmen"?

HTML

<style type="text/css">
html, body {
margin:0;padding:0;text-align:center;
}


ul#Navigation {
margin:0;width:100%;
padding:0;
position:absolute;
text-align: center;
background-color: #99CCFF;
height: 50px;
}




ul#Navigation li {
list-style: none;
float:left;
position: relative;
}




ul#Navigation li ul {
margin:0;
padding:0;
position: relative;
display: none;
z-index:1001;
}
</style>


<ul id="Navigation">
<li><a href="index.html">Startseite</a></li>
<li><a href="sites/angebote.html">Angebote</a>
<ul>
<li><a href="#">Reparaturen</a></li>
<li><a href="#">EDV Dienstleistungen</a></li>
</ul></li>
<li><a href="sites/kontakt.html">Kontakt</a></li>
<li><a href="sites/impressum.html">Impressum</a></li>
<li><a href="sites/über_uns.html">Über uns</a></li>
</ul>

Alles anzeigen

Außerdem habe ich mal für dein CSS-Dropdown noch einen z-index hinzugefügt.
Wenn du sonst unter das Menü deinen Content packst, dürfte der Content vor dem Dropdown sein.

Wenn du nun aber nicht die ganze Breite belegen willst, musst du deine ul einfach einen anderen margin Wert geben:
margin: 0 auto 0 auto;
Dies zentriert deine Liste mittig, ob es bei mit dem text-align vom body reicht, weiß ich grad nicht.

Tags