nicht angemeldet
Hallo zusammen,
ich habe eigentlich gleich zwei Fragen.
Zunächst die hoffentlich einfachere:
Ich möchte mit Pseudoklassen a:hover bzw. a:focus die Schrift- und Hintergrundfarbe meines Links ändern. Die Schrift wird schwarz der Hintergrund weiß. Soweit so gut, klappt auch alles nur das netscape und Firefox einen häßlichen schwarz gepunkteten Rahmen um meinen weißne hintergrund machen, der mein ganzes Layout kaputt macht. Ich habe schon versucht, einfach eine weiße border drum zu machen, was den Effekt hat, das dann um den gepunkteten schwarzen Rand noch ein weißer Rahmen ist. Weiß jemand Rat?
Außerdem habe ich eine horizontale Navigation gebaut, indem ich eine Liste mit display:inline umfunktioniert habe. Diese Liste befindet sich in einer Box mit schwarzem Rand. Optisch sollen aber auch die einzelnen Links in einer Box sein. Daher habe ich den einzelnen links einen rechten und linbken Rahmen gegeben. Dabei stellte sich heraus, dass die einzelnen links nicht aneinanderreichen, sprich zwischen den optischen Boxen ist ein bißchen Platz. Habe ich optisch umgangen indem ich nur eine linke border anzeige. Allerdings habe ich dann bei oben genanntem Hover Effekt zusätzlich das Problem, dass der Hintergrund nicht komplett die Farbe wechselt, sondern der Teil, der eigentlich zwischen den Beiden boxen liegt, seine Farbe behält. Im IE habe ich das Problem nicht und mich schon gefreut, dafür aber in Firefox und Netscape... Wer weiß Rat?
Hier kommt der Quelltext:
HTML
<div id="mainNavi">
<ul>
<li><a class="menu" href="#">link1</a></li><li>
<a class="menu" href="#">link2</a></li><li>
<a class="menu" href="#">link3</a></li><li>
</ul>
</div>
und CSS:
#mainNavi{
height: 20px;
width: 818px;
margin: 0px;
padding:0;
background-color:#9C3647;
border:1px solid black;
}
#mainNavi ul{
margin:0;
padding:0;
list-style:none;
white-space: nowrap;
}
#mainNavi li{
display:inline;}
a.menu{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
font-size: 11px;
text-align:center;
border-left:1px solid black;
padding:4px 5px 2px 5px;
text-decoration:none;
}
a.menu:link{
color:#FFFFFF;
background-color:#9C3647;
text-decoration:none;
}
a.menu:visited{
color:#FFFFFF;
background-color:#9C3647;
text-decoration:none;
}
a.menu:focus{
color:#000000;
background-color:#FFFFFF;
text-decoration:none;
}
a.menu:hover
{
text-decoration:underline;
}
a.menu:active
{
color:#000000;
background-color:#FFFFFF;
text-decoration:none;
}
Da die Linkboxen unterschiedlich groß entsprechend der enthaltenen Textlänge sein sollen, bietet sich ein float layout mit echten Boxen meiner meiner Meinung nach nicht an.
HILFE....
Viele Grüße
Mascha