✔ css Navigation nur mit Bildern

[van-delle]

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);
}

 

[Maik]

Hallo und Willkommen im Forum!

Damit für jeden Link sein individuelles Grafikset zugeordnet werden kann, erhält jeder eine eindeutige ID (hier: #navi_1, #navi_2, #navi_3), um über sie die Hintergrundbilder differenziert bestimmen zu können - also:

<div id="menu">
        <ul>
             <li id="selected"><a href="#" id="navi_1">...</a></li>
             <li><a href="#" id="navi_2">...</a></li>
             <li><a href="#" id="navi_3">...</a></li>
             <!-- usw. -->
        </ul>
</div>

Und im Stylesheet sieht das dann in groben Zügen so aus:

/* #navi_1 */
#menu li a#navi_1:link, #menu li a#navi_1:visited { 
background-image:url(navi_1.jpg); 
}
#menu li a#navi_1:hover, #menu li#selected a#navi_1 { 
background-image:url(navi_ak_1.jpg); 
}


/* #navi_2 */
#menu li a#navi_2:link, #menu li a#navi_2:visited { 
background-image:url(navi_2.jpg); 
}
#menu li a#navi_2:hover, #menu li#selected a#navi_2 { 
background-image:url(navi_ak_2.jpg); 
}


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


/* usw. */

 

[van-delle]

Hallo Michael,

vielen dank für deine Hilfe sie hat mir sehr 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);

 

[Maik]

Von welchem Linktext sprichst du? In deinem Eingangspost hast du geschrieben, dass die Links keinen Text enthalten, und in deinem HTML-Code ist auch keiner zu sehen

Ansonsten würde ich ihn folgendermaßen ausblenden:

#menu li a span {
display: none;
}

<div id="menu">
    <ul>
        <li><a href="#" id="navi_1"><span>Linktext 1</span></a></li>
        <li><a href="#" id="navi_2"><span>Linktext 2</span></a></li>
        <li><a href="#" id="navi_3"><span>Linktext 3</span></a></li>
    </ul>
</div>