Feinabstimmung meines CSS Menüs

[Daniel S.]

Hallo,
ich habe mir folgendes CSS-Menü gebaut.

Es ist eigentlich perfekt und genauso wie ich es haben will.

Was mich nur nich stört ist das die Menüpunkte 1 & 2 nicht zentriert sind undass der Balken des Menüs links und rechts vor dem Rand des Browsers endet.

Wie kann ich die Fehler beheben ?
Was muss ich tun damit die Menüpunkte zentriert und der Balken über das gesamte Fenster geht ?

Hier der CSS-Code:

<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #0000A0;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01  a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #0000A0;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #0000A0;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #0000A0; width:1px}
.pd_menu_01 ul li:hover a {background-color:#008000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#008000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#0000FF;  color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#0000FF;  color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#CA0000; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Ausserdem würde es mich interessieren pb es möglich ist an der linken Seite des Menüs eine Grafik zu platzieren die über dem Menüliegt (als Eyecatcher gedacht, ohne besondere Funktion)

[Daniel S.]

Ist ja schon so weit unten, ob das noch jemand ließt ?

[ChrisB]

Hi,

Ist ja schon so weit unten, ob das noch jemand ließt ?

Ja, vermutlich schon.

Wenn du allerdings annimmst, jemand koennte dir helfen, wenn du lediglich dein (unuebersichtliches) CSS hier ablaedst, taeuschst du dich vermutlich.
Lies bitte die Tipps fuer Fragende - und liefere dann noch mal eine ausfuehrlichere und nachvollziehbare Problembeschreibung, die ohne Raten seitens des Lesers auskommt. (Hier im Thread natuerlich, und nicht als Doppelposting.)

MfG ChrisB