nicht angemeldet
Hallo!
Ich versuche gerade einer Navigation beizubringen, jeweils unter dem Link, das gerade "gehoovert" wird, ein kleines Bild zu zeigen, das aber bei nicht Benutzung der Navigation verschwunden ist.
Leider funktioniert meine Lösung bislang nicht in Opera (IE und Firefox sind getestet). Was noch in keinem der drei Browser geht, ist das Bildchen immer genau zentriert zu haben.
Hier meine Codes:
css:
/* DATEI: navtest.css */
body {
text-align: center;
margin: 0;
padding: 0;
font-weight:bold;
font-family:Helvetica,plain; sans-serif;
font-size:medium;
font-weight:bold;
color:#000000;
background:#FFFFFF;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 0px;
align: center; /* Seiteninhalt wieder links ausrichten */
margin:0 auto; /* standardkonforme horizontale Zentrierung */
padding:5px;
font-size:90%;
font-weight:bold;
color:#800000;
}
a.info{
position:relative; /*this is the key*/
z-index:1;
background-color:#FFFFFF;
color:#800000;
text-decoration:none}
a.info:hover{z-index:2; background-color:#fff }
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:25px; left:3px; width:23px;height:24px;
background-image:url(laby.jpg); color:#000;
text-align: center
}
a:link { text-decoration:none; font-weight:bold; color:#800000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; color:#800000}
a:active { text-decoration:none; font-weight:bold; color:#800000}
a:focus { text-decoration:none; font-weight:bold; color:#800000}
hier die Navigation
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel=stylesheet type="text/css" href="navtest.css">
<style type="text/css">
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="info" a href="start.html" target="haupt" alt="Startseite" title="Einführungsseite" >Startseite<span></a></li></span>
<li><a class="info" a href="homöopathie.html" target="haupt" alt="Homöopathie" title="Über die homöopathische Behandlung" >Homöopathie<span></a></li></span>
<li><a class="info" a href="polarity.html" target="haupt" alt="" title="" >Polarity<span></a></li></span>
<li><a class="info" a href="ayurveda.html" target="haupt" alt="" title="" >Ayurveda<span></a></li></span>
<li><a class="info" a href="telefon.html" target="haupt" alt="" title="" >Beratung<span></a></li></span>
<li><a class="info" a href="links.html" target="haupt" alt="" title="" >Links<span></a></li></span>
<li><a class="info" a href="kontakt.html" target="haupt" alt="" title="" >Kontakt<span></a></li></span>
<li><a class="info" a href="impressum.html" target="haupt" alt="" title="" >Impressum<span></a></li></span>
</ul>
</div>
</body>
Die Fragen also: warum interpretiert Opera das so komisch und was kann ich dagegen tun und wie bekomme ich das Bild immer unter dem Link zentriert?
Danke