Menü breiter machen

[vTasker]

Hallo.
Ich habe in meinem Forum eine schwarze Navigation im Header eingefügt, allerdings möchte ich, dass die schwarze Navigation "vollbreitig" ist. Wie mache ich das?
So sieht das bei mir aktuell aus :
http://img694.imageshack.us/img694/928/menupw.jpg
(Die schwarze Navigation über dem Banner)
Ich möchte, dass diese Navigation bis zum Ende geht, also bis das blaue Border kommt. (siehe Pfeil)
Wie mache ich das?

So sieht der CSS-Code aus :

#topnavbar{margin-left:-1em;margin-right:0.45em;height:31px;background:#000000;width:auto;margin-top:-1.5em;list-style:none;display:block;font-family:droid-sans,serif;border-bottom:1px solid #0F2C4D;}
#topnavbar ul{list-style:none;padding-top:0.3em;margin-left:-2.15em;margin-right:1em;}
#topnavbar_links li{background:#32323a;color:#efefef;display:inline-block;font-family:Helvetica,Arial,sans-serif;line-height:31.2px;padding:0 8.2px;text-decoration:none;margin-top:-0.6em;border-left:1px solid #000000;border-bottom:none;cursor:default;}
#topnavbar_links ul>li:first-child{border-left:none;border-bottom:none;}
#topnavbar_links li a:hover{background:#32323a;text-decoration:none;}
#topnavbar_links ul{margin-left:-3em;list-style:none;float:left;text-align:center;}
#topnavbar_links ul li{display:block;float:left;list-style:none;}
#topnavbar_links>ul{float:left;}#topnavbar_links>ul>li{float:left;}
#topnavbar_links li:hover{background:#141414;background:-moz-linear-gradient(top,#32323a 0%,#141414 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#32323a),color-stop(100%,#141414));background:-webkit-linear-gradient(top,#32323a 0%,#141414 100%);background:-o-linear-gradient(top,#32323a 0%,#141414 100%);background:-ms-linear-gradient(top,#32323a 0%,#141414 100%);background:linear-gradient(to bottom,#32323a 0%,#141414 100%);

Und der HTML-Code :

<div id="topnavbar_links" style="position:relative;top:5px;left:30px;">


<ul>
<li><strong><font color="white">xxxx</font></strong> </li>
<a href="*******"><li> Nachrichten</li></a>
<a href="/user/"><li>Kontrollzentrum</li></a>

<a href="/user/benachrichtigungen/"><li>Benachrichtigungen (<b>0</b>)</li></a>
<a href="ucp.php"><li>persönlicher Bereich</li></a>
<a href="memberlist.php"><li>Mitglieder</li></a>

<a href="{U_LOGIN_LOGOUT}"><li>Abmelden</li></a>
<li><strong><img src="****"> Aktuelle Uhrzeit - </strong> 14:39 Uhr</li>
</ul>



</div>

Ich möchte halt, dass das "vollbreitig" ist. Wie mache ich sowas?

Danke schonmal im Vorraus. <3

 

[vTasker]

keiner? :(

 

[threadi]

Ein Link wäre hilfreicher, und auch der erzeugte HTML-Code - nicht dieses Template mit Platzhaltern was Du hier zeigst.

Ich sehe allerdings auch so 2 Möglichkeiten für dich:
a) Du sorgst dafür, dass der Hintergrund über die komplette Breite geht. Danach könntest Du wenn es zum Design passen sollte auch das Menü innerhalb dieses Bereiches zentrieren. Wie man horizontale Menüs zentriert ist auf einigen Webseiten beschrieben (weil es nicht ganz so simpel ist).
b) Du könntest die Breite der Menüpunkte vergrößern, so dass sie irgendwann die gesamte Breite einnehmen. Das könnte man durch zusätzliches padding erreichen, aber auch durch feste Breitenangaben.

 

[vTasker]

Wie kann ich denn b) machen?

 

[threadi]

Wie gesagt:
- padding
- width

Ich sehe gerade, dass Du für die <li> ein unsinniges padding von

padding:0 8.2px;

definiert hast. Pixelwerte können nur rund sein, nicht .2.

Du solltest mal mit diesem Wert herumspielen, bis die Menüpunkte die volle Breite einnehmen. Also z.B.

padding:0 12px;

Da Du keinen Link zur Seite geliefert hast, kann man das nur abschätzen. Du könntest selbst mit Firebug herausbekommen, welcher Wert passend ist.