nicht angemeldet
Morgn Leute.
Ich hab ein mittelschweres Problem mit einer CSS Sache.
Ich habe mir ein Menü erstellt, in dem Links mit der Entsprechenden ID als block (display:block) dargestellt werden. Dazu noch einige Hover Effekte, u.a. einer der eine Infobox zu jedem Link anzeigen soll. Tut er auch, klappt eigentlich alles. Nur: Schrift etc. sollen in der Infobox anders sein als die Links. Hab natürlich speziell für die Infobox ( Daten stehen in einem span ) eine CSS Definition gemacht. Klappt aber nicht - hedenfall text-decoration und Schriftgröße nicht.
Wie kann ich den Text der Infoboxen gestalten wie ich will, aber ohne bei meinem Menü JS etc. zu benutzen?
Hier der Quelltext vom Menü inkl. CSS Definitionen:
------------------------------------------------------
<html>
<head>
<title>Test</title>
<style type="text/css">
div#menulink a
{
border-right:#000000 3px solid;
border-left:#000000 3px solid;
padding-right:10px;
display:block;
padding-left:10px;
border-left-width:3px;
background:#8080C0;
border-bottom-width:3px;
padding-bottom:5px;
margin: 2px 2px2px;
color:#FFFFFF;
padding-top:3px;
text-align:center;
text-decoration:none;
top:100px;
width:150px;
font-weight:bold;
}
div#menulink a:hover
{
border-right:#000000 3px dotted;
padding-right:10px;
display:block;
padding-left:10px;
border-left-width:3px;
background:#CCCCFF;
border-bottom-width:3px;
padding-bottom:5px;
margin:2px 2px 2px;
color:#FF0000;
padding-top:3px;
text-align:center;
text-decoration:underline overline;
top:100px;
width:150px;
font-weight:bold;
}
div#menulink a .infotext
{
display:none;
}
div#menulink a:hover .infotext
{
position:absolute;
top:140px;
left:130px;
display:block;
width:150px;
font-size:small;
font-weight:normal;
fontsize:6pt;
background:#EEEEEE;
border:1px dashed #FF0000;
color:#FF00FF;
padding:5px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="menulink">
<a href="#">Home<span class="infotext">Startseite dieser Seite</span></a>
<a href="#">Barriefreiheit<span class="infotext" font-size="8">Informationenüber Barrierefreiheit dieser Seite</span></a>
<a href="#">Links<span class="infotext">Links zum Thema Barrierefreiheit</span></a>
<a href="#">Impressum<span class="infotext">Impressum dieser Seite</span></a>
</div>
</body>
</html>
--------------------------------------------