nicht angemeldet
Hallo an alle,
ich hoffe, dass ihr mir helfen könnt, denn selbst nach stundenlangem Suchen im Internet komme ich hier nicht weiter.
Ich möchte eine horizintale Navigationsleiste im Browserfenster zentrieren.
Ich habe mich aus verschiedenen Gründen gegen "display: inline" entschieden und wählte "float: left".
Über den Außenabstand des linken Navigationsbuttons habe ich die Buttons zentriert.
Sowohl im Firefox als auch bei Opera wird alles perfekt angezeigt, so wie es mir Dreamweaver in der Vorschau auch zeigt.
Der Internet Explorer amcht mir aber Probleme: und zwar verrückt er die Navigationsleiste noch weiter nach rechts, sodass sie nicht mehr zentriert aussieht!
Wieso amcht er das? Ok, weil er falsch interpretiert, aber womit genau hat er ein Problem und wie löse ich das?
Anbei der vereinfacht Code...
Ich danke euch vielmals für eure Hilfe!!!!
Viele Grüße
Rene
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
@import 'stil.css';
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation">
<ul>
<li id="home"><a href="#" class="home"></a></li>
<li id="aboutme"><a href="#" class="aboutme"></a></li>
<li id="gallery"><a href="#" class="gallery"></a></li>
<li id="guestbook"><a href="#" class="guestbook"></a></li>
<li id="links"><a href="#" class="links"></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
* {
margin: 0 auto;
padding: 0;
background-repeat: no-repeat;
background-position: center center;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100,01%;
text-align: center;
}
#container {
width: 750px;
height: 750px;
margin-top: 25px;
text-align: left;
background-color: #FFF7F3;
}
#header {
background-color: #ff2244;
height: 120px;
width: 700px;
margin-top: 25px;
}
/*Navigation:*/
#navigation {
width: 700px;
height: 38px;
text-align: center;
margin-top: 25px;
}
#navigation ul {
width: auto;
height: 38px;
display: block;
list-style: none;
white-space: nowrap;
background-color: #FFFF11;
}
#navigation ul li {
float: left;
display: block;
width: 100px;
height: 38px;
}
#navigation ul li a{
width: 100px;
height: 38px;
}
#home {
margin-left: 80px; /* dieser Wert zentriert*/
margin-right: 5px;
}
#aboutme {
margin-left: 5px;
margin-right: 5px;
}
#gallery {
margin-left: 5px;
margin-right: 5px;
}
#guestbook {
margin-left: 5px;
margin-right: 5px;
}
#links {
margin-left: 5px;
}
/*Navigation: Anzeige der Hintergrundbilder in a*/
#navigation ul li a.home:link, #navigation ul li a.home:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.home:hover, #navigation ul li a.home:focus, #navigation ul li a.home:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.aboutme:link, #navigation ul li a.aboutme:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.aboutme:hover, #navigation ul li a.aboutme:focus, #navigation ul li a.aboutme:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.gallery:link, #navigation ul li a.gallery:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.gallery:hover, #navigation ul li a.gallery:focus, #navigation ul li a.gallery:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.guestbook:link, #navigation ul li a.guestbook:visited {
display: block;
background-color: #444444;;
}
#navigation ul li a.guestbook:hover, #navigation ul li a.guestbook:focus, #navigation ul li a.guestbook:active {
display: block;
background-color: #FF6666;
}
#navigation ul li a.links:link, #navigation ul li a.links:visited {
display: block;
background-color: #444444;
}
#navigation ul li a.links:hover, #navigation ul li a.links:focus, #navigation ul li a.links:active {
display: block;
background-color: #FF6666;
}
[/CODE]
suit
Der Martin