Sergej
2009-02-01, 23:37:53
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 ...
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 ...