Hallo ich grüße Euch,

ich bin blutiger Anfänger brauche dringend Hilfe!!!

Ich möchte eine Seitennavigation gestalten, die Horizontal angeordnet ist und keinen Text enthält.
Die Navigation soll aus Grafiken bestehen, insgesammt fünf Links und mit Mouseovereffekt versehen werden. Das Grundgerüst habe ich schon fertig und die zehn Bilder habe ich auch schon erstellt.
Leider funktioniert die Darstellung nicht. Es wird auf allen fünf Links die selbe Grafik also die erste Grafik angezeigt. Ich möchte aber, fünf verschiedene Grafiken angezeigt bekommen.
Was muss ich in der HTML und in den css Dateien ändern, damit es funktioniert ?
Danke .....

Hier ein Auszug aus der Html Datei :

</div><div id="menu"><div id="menu"><ul>
<li><a id="selected" href="index.html"><!--Linkbeschreibung--></a></li>
<li><a href="page1.html"></a></li>
<li><a href="page2.html"></a></li>
<li><a href="page3.html"></a></li>
<li><a href="contact.html"></a></li>
</ul></div></div>


Hier ein Auszug aus der css datei, die für das Format zuständig ist:

#menu {
height: 65px;
margin-top: -15px;
width: 1010px;
}
#menu ul {
margin: 15px auto;
}
#menu li {
padding: 25px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
#menu li a {
padding: 14px 48px 0px;
display: block;
float: left;
height: 22px;
text-decoration: none;
}
#menu2 {
height: 65px;
margin-top: -15px;
width: 1010px;
}
#menu2 ul {
margin: 15px auto;
}
#menu2 li {
padding: 25px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
#menu2 li a {
padding: 14px 48px 2px;
display: block;
float: left;
height: 22px;
text-decoration: none;
}

Hier ein Auszug aus der css datei, die für das Aussehen zuständig ist:

#menu {
}
#menu li a {
background-image: url(navi_1.jpg);
}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover {
background-image: url(navi_ak_1.jpg);
}
#menu2 {
}
#menu2 li a {
background-image: url(navi_2.jpg);
}
#menu2 li a:hover, #menu2 li a#selected, #menu2 li a#selected:hover {
background-image: url(navi_ak_2.jpg);
}

Jedes li braucht seine eigene ID für die individuelle Grafik des jeweils enthaltenen a.

Außerdem braucht li keine Höhe, nur eine Breite. Bei a genau umgekehrt, und kein float. Text muß sein, Du kannst ihn aber per text-indent: -9999px; verschwinden lassen (plus font-size: 0; wg. Firefox-Outline).

Du vergibst die ID #menu doppelt (nicht erlaubt), aber das umgebende div#menu solltest Du eh rauswerfen, da überflüssig.

Hallo Heiko,

vielen dank für die Tips sie haben mir weitergeholfen.
Leider bekomme ich es nicht hin, das der Linktext mit „text-indent: -9999px“, ausgeblendet wird.
Entweder wird nur der erste Linktext entfernt und die anderen Linktexte bleiben erhalten oder es wird die erste Grafikdatei angezeigt und die anderen verschwinden.
Kannst du mir da auch weiterhelfen ? Wo muss ich die text-indent einsetzten ?

Hier ein Ausschnitt des css für die Formatierung

#navi li {

padding: 0px 4px 0px 0px;
float: left;
list-style-type: none;
list-style-image: none;
list-style-position: outside;

#navi li a {

padding: 14px 70px 0px 0px;
display: compact;
float: left;
height: 22px;
text-decoration: none;

Hier ein Ausschnitt des css für die Grafik

#navi li a#navi_1:link, #navi li a#navi_1:visited {
background-image:url(navi_1.jpg);

}
#navi li a#navi_1:hover {
background-image:url(navi_ak_1.jpg);
}

#navi li a#navi_2:link, #navi li a#navi_2:visited {
background-image:url(navi_2.jpg);

}
#navi li a#navi_2:hover {
background-image:url(navi_ak_2.jpg);
}

#navi li a#navi_3:link, #navi li a#navi_3:visited {
background-image:url(navi_3.jpg);
}
#navi li a#navi_3:hover {
background-image:url(navi_ak_3.jpg);
}

#navi li a#navi_4:link, #navi li a#navi_4:visited {
background-image:url(navi_4.jpg);
}
#navi li a#navi_4:hover {
background-image:url(navi_ak_4.jpg);
}

#navi li a#navi_5:link, #navi li a#navi_5:visited {
background-image:url(navi_5.jpg);

}
#navi li a#navi_5:hover {
background-image:url(navi_ak_5.jpg);

In dem gleichen Element, desssen Text du verschieben willst, also "a"


gaby