nicht angemeldet
Hallo zusammen,
ich versuche gerade eine Website mit CSS für den Verein meines Vaters zu erstellen und bin neu hier. Wie man am unten eingefügten Quelltext sehen kann, bin ich noch Anfänger.
Derzeit habe ich folgendes Problem im Internet Explorer (6) (und nur dort):
Die Seite besteht aus einem Banner, einem Hauptteil (links Text, rechts eine Navigationsleiste (Liste)) und einer Fußzeile. Ich hätte gerne, daß die Links in der Navigationsleiste beim "Überfahren" die Hintergrundfarbe ändern (hover-Effekt). Das funktioniert beim ersten Link auch fehlerfrei. Wenn ich den zweiten, dritten,.. Link "überfahre" wird allerdings die Fußzeile nach oben geschoben, und zwar bis an das Ende der Navigationsleiste. Wenn ich auf das Wechseln der Hintergrundfarbe verzichte, funktioniert alles einwandfrei. Kennt jemand das Problem? Was kann ich dagegen tun?
Viele Grüße und schon mal vielen Dank,
Michael
Quellcode:
html:
[code lang=html
<body>
<div id=banner>
<h1>test</h1></div>
<div id=container>
<div id=inhalt> <-- hier langen Text einfügen -->
</div>
<div id=navigation><li><a href="home.html">link1</a></li><li><a href="verein.html">link2</a></li><li><a href="aktuelles.html">link3</a></li>
</div>
</div>
<div id=fusszeile> <a href="impressum.html">Impressum</a>       <a href="informationen.html">Informationen</a>       <a href="home.html">Startseite</a> </div>
</body>
]
CSS:
[code lang=css
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Verdana,Arial,sans-serif;
margin: 0; padding: 0;
min-width: 41em;
}
#banner {
...
}
#banner h1 {
...
}
#container {
margin-left: 45px;
width: 647px;
background-color: rgb(4,132,4);
}
html>body #container {
float:left;
margin-left: 45px;
width: 647px;
background-color: rgb(4,132,4);
}
#inhalt {
font-family: Verdana,Arial,sans-serif;
font-size: 0.8em;
float:left;
margin-left: 0px;
border: 1px solid rgb(4,132,4);
background-image: url(main.jpg);
background-repeat:no-repeat;
background-position: bottom left;
background-color: white;
width: 429px;
padding-bottom: 140px;
padding-left: 1.25em;
padding-top: 1.25em;
padding-right: 1.25em;
}
html>body #inhalt {
font-family: Verdana,Arial,sans-serif;
font-size: 0.8em;
float:left;
margin-left: 0px;
border: 1px solid rgb(4,132,4);
background-image: url(main.jpg);
background-repeat:no-repeat;
background-position: bottom left;
background-color: white;
width: 395px;
padding-bottom: 140px;
padding-left: 1.25em;
padding-top: 1.25em;
padding-right: 1.25em;
}
#inhalt a:link {
...
}
#inhalt a:visited {
...
}
#inhalt a:hover {
...
}
#navigation {
margin-left: 431px;
padding-left: 0.5em;
padding-top: 1em;
line-height: 5ex;
font-weight: 600;
font-size: 0.8em;
font-family: Verdana,Arial,sans-serif;
color: rgb(136,216,136);
list-style-type: none;
}
#navigation a:link {
color: rgb(136,216,136);
text-decoration:none;
}
#navigation a:visited {
color: rgb(136,216,136);
text-decoration:none;
}
#navigation a:hover {
background-color: rgb(136,216,136);
color:rgb(4,132,4);
}
#fusszeile {
clear:both;
margin-left: 45px;
width: 647px;
height: 123px;
padding: 0.5em;
padding-left: 15em;
background-image: url(footer_v3.gif);
background-repeat: no-repeat;
color: rgb(136,216,136);
font-family: Verdana,Arial,sans-serif;
font-size: 0.8em;
font-weight: 300;
padding-top: 1em;
}
#fusszeile a:link {
...
}
#fusszeile a:visited {
...
}
#fusszeile a:hover {
...
}
]