Hallo!
Ich laboriere schon einige Zeit mit einer Navigation (nur html+css), bei der (bei mouseover) unter dem Link ein kleines Bildchen auftauchen soll.
Es funktioniert auch, nur mit Opera habe ich Probleme, da gibt es ganz seltsame Ergebnisse. Und ich weiß nicht, wie ich generell dieses Bildchen unter dem Link zentrieren kann.
Hier der Code
html:
<!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>
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}
angesehen werden kann die Seite unter:
http://www.archaja2.cjb.cc
danke
Ich laboriere schon einige Zeit mit einer Navigation (nur html+css), bei der (bei mouseover) unter dem Link ein kleines Bildchen auftauchen soll.
Es funktioniert auch, nur mit Opera habe ich Probleme, da gibt es ganz seltsame Ergebnisse. Und ich weiß nicht, wie ich generell dieses Bildchen unter dem Link zentrieren kann.
Hier der Code
html:
<!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>
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}
angesehen werden kann die Seite unter:
http://www.archaja2.cjb.cc
danke
