CSS Navigation zentrieren

[Sergej]

Ich wollte mal für meine Fotos eine einfache Seite basteln. Bin nicht allzu beschlagen, was Webdesign angeht, daher arbeite ich auch der Einfachheit halber mir Frames und lade die von Adobe Lightroom erstellten Galerien in den Content-Frame.

Hier der Link: http://www.two-by-four.de/htdocs/gallery/

Nun möchte ich das CSS-Menü gerne zentriert dargestellt haben:

@charset "utf-8";
body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background:#333333;
margin:0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
padding:0;
text-align:center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
color:#FFFFFF;
}

copyright {
font-size:0.8em;
}

ul#navigation_top {
top:0; left:0;
width:100%; height:30px;
margin:0; padding:0;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #868686;
}

ul#navigation_top li {
display:inline;
margin:0;
}

ul#navigation_top li a {
float:left;
width:100px; height:30px;
padding:0 5px 0 5px;
line-height:30px;
color:#FFFFFF;
font-size:0.7em;
font-variant:small-caps;
text-decoration:none;
}

ul#navigation_top li a:hover, ul#navigation_top li a:active {
background:url(img/navi_top_over.jpg) no-repeat #E29C00;
background-position:center;
}
Wenn ich "display:inline-block;" verwende, ist es in Firefox zentriert, im IE aber als Liste untereinander. Wenn ich "float:left;" weglasse, sind die einzelnen Menüpunkte nicht mehr in "Boxen", so dass ich beim Mouseover die orange Farbe nicht auf voller Höhe angezeigt bekomme.

Kann mir hier jemand weiterhelfen?

Und warum ist im Firefox noch Platz zwischen "Logo" und oberem Bildschirmrand, obwohl ich für Body margin und padding 0 eingestellt habe? Der IE macht das nicht ...

[Sephiroth]

Nun möchte ich das CSS-Menü gerne zentriert dargestellt haben:

Nunja, du kannst z.B. für die Liste padding-left auf 30% setzen oder "margin:0 auto" nutzen und sie dann schmaler machen (width nicht auf 100%, sonst klappt es nicht), sowie einen div-Container drumherum bauen, der den gleichen Hintergrund hat.

Und warum ist im Firefox noch Platz zwischen "Logo" und oberem Bildschirmrand, obwohl ich für Body margin und padding 0 eingestellt habe? Der IE macht das nicht ...
Das p-Element hat margin-top und margin-bottom von 1em.

[Sergej]

Nunja, du kannst z.B. für die Liste padding-left auf 30% setzen oder "margin:0 auto" nutzen und sie dann schmaler machen (width nicht auf 100%, sonst klappt es nicht), sowie einen div-Container drumherum bauen, der den gleichen Hintergrund hat.


Das p-Element hat margin-top und margin-bottom von 1em.
Danke für die Hilfe. Werd ich ausprobieren, wenn ich heute Abend zu Hause bin.

Was mir noch auffällt: Warum funktioniert "ul#navigation_top li a:hover, ul#navigation_top li a:active" nicht?

[Gast]

Was mir noch auffällt: Warum funktioniert "ul#navigation_top li a:hover, ul#navigation_top li a:active" nicht?
Du siehst den Unterschied nicht, weil es beim active auch gehovert wird (und du bei beiden das gleiche machst).