Horizontale Navigation mit Rollover

Bex Bunny · #1 (**permalink**) 29.09.2007, 01:44

Ich probier mich seit kurzem mit CSS aus und versuche gerade eine horizontale Navigation mit Rollovereffekt zu realisieren. Im FF funktioniert es wie es soll. im IE erscheinen die Grafiken allerdings nicht. Könnte mir bitte einer bei der Lösung des Problems helfen.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">

<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="test.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<ul class="nav">
  <li class="nav"><a class="b" href="#">Test2</a></li>
  <li class="nav"><a class="b" href="#">Test2</a></li>
  <li class="nav"><a class="b" href="#">Test2</a></li>
  <li class="nav"><a class="b" href="#">Test2</a></li>
  <li class="nav"><a class="b" href="#">Test2</a></li>
</ul>
</body>

</html>

Code:

* {     margin: 0;
        padding: 0;

}
ul.nav {
        margin: 0;
        padding: 0;
        list-style: none;
        width: 720px;

}

ul.nav li.nav {
        float: left;

}
a:link.b, a:visited.b {
        display: block;
        width: 114px;
        height: 35px;
        line-height: 35px;
        color: #000;
        text-decoration: none;
        background: #94B8E9 url(images/archiv.gif)no-repeat left top;
        text-indent: -999px;
}

a:hover.b {
                background-position: right top;
        }

etux · #2 (**permalink**) 29.09.2007, 08:20

Hallo Bex Bunny,
auf die Schreibweise muss Du achten.

Code:

a:link.b, a:visited.b

geht nicht, eher so:

Code:

a.b:link , a.b:visited

Grüße: Emil

Bex Bunny · #3 (**permalink**) 29.09.2007, 12:10

Danke Emil für Deinen Hinweis, aber leider ist im IE der Effekt immer noch derselbe. Die Grafiken werden nicht angezeigt.

etux · #4 (**permalink**) 29.09.2007, 12:42

Hallo Bex Bunny,

ein Leerzeichen muss vor "no-repeat".

Code:

a.b:link, a.b:visited {
        display: block;
        width: 114px;
        height: 35px;
        line-height: 35px;
        color: #000;
        text-decoration: none;
        background: #94B8E9 url(images/archiv.gif) no-repeat left top;
        text-indent: -999px;
        
}

a.b:hover {
	background-position: right top;
}

Grüße: Emil

P.S.: Was ich nicht verstehe: Warum funktioniert es auch mit "a:link.b".

pmmueller · #5 (**permalink**) 29.09.2007, 14:22

Zitat:

Zitat von etux

Was ich nicht verstehe: Warum funktioniert es auch mit "a:link.b".

Bei der Angabe von mehreren Klassen spielt es keine Rolle, in welcher Reihenfolge sie angegeben werden. :link ist ja eine Pseudoklasse, von daher könnte das der Grund sein.

Grüße
Peter

Bex Bunny · #6 (**permalink**) 29.09.2007, 17:48

Zitat:

Zitat von etux

Hallo Bex Bunny,

ein Leerzeichen muss vor "no-repeat".

Vielen Dank, da waren die Augen vergangene Nacht wohl doch schon halb zu bei mir, um das fehlende Leerzeichen zu finden.

heiko_rs · #7 (**permalink**) 29.09.2007, 20:43

Was ich an dieser Stelle immer empfehle: Wirf die Pseudoklassen :link und :visited raus und mache einfach nur a draus (die Regel für :hover bleibt unberührt).

pmmueller · #8 (**permalink**) 29.09.2007, 22:31

Zitat:

Zitat von heiko_rs

Wirf die Pseudoklassen :link und :visited raus und mache einfach nur a draus (die Regel für :hover bleibt unberührt).

Tja, das ist natürlich noch viel einfacher

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
horizontale Navigation mit rollover Bild	c3ox	CSS	3	28.11.2009 00:06
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 18:18