Hallo!
Seit nun fast 2 Stunden versuche ich folgendes Problem zu lösen. Ich wäre sehr dankbar wenn mir jemand helfen könnte:
Ich will ein neues Menü für meine Seite erstellen. Zuerst wollte ich es mit dem Rollover-Effekt ( 2 Bilder, wenn man mit der Maus drüberfährt ändert sich das Bild ) mit GoLive machen, habe aber dann gemerkt, dass man es auch mit css, genauer gesagt mir verschiedenen Hintergrundbildern verwirklichen kann. Ich habe bereits ein Menü mit dem RolloverEffekt gemacht. Die Bilder habe ich mit Photoshop erstellt; den Text mit Verdana, fett, 12pt, schärfer. Ergebnis: http://www.englisch-lernen-im-internet.de/Beispiel.gif
Da ich das Menü nun mit css verwirklichen will, habe ich mir eine Beispieldatei http://css.maxdesign.com.au/listamatic/vertical11.htm angeschaut und versucht Sie so abzuändern, dass sie genauso aussieht wie das Menü mit den Bildern. Der Text http://www.englisch-lernen-im-internet.de/test.html ist obwohl ich ihm die gleichen Eigenschaften zugeordnet habe aber nicht annähern so wie das Ergebnis mit den Rollover-Bildern.
Hier der Quelltext meiner Datei:
<html>
<head>
<title></title>
<meta name="author" content="Bene">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<link href="test.css" rel="stylesheet" media="screen">
</head>
<body >
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
</body>
</html>
Hier der Text der externen CSS-Datei:
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Arial;
font-size: 12pt;
font-weight: bold;
font-color: black;
}
#navcontainer li { margin: 0 0 1px 0; }
#navcontainer a
{
display: block;
padding: 0px 0px 0px 20px;
width: 140px;
background-color: #B4B4b4;
background-image: url(bgbase.jpg);
}
#navcontainer a:link, #navlist a:visited
{
color: #000000;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #F60;
background-image: url(bgover.jpg);
color: #333;
}
Was mache ich falsch?
Besten Dank!
Bene
P.S Wird das Ändern der Hintergrundbilder mit css von allen Browsern interpretiert?