✔ Liste als Navigationsmenü mit Bildern als Menüpunkt ->Menüpunkte ohne Stil

[deluxeondecks]

Hallo Leute,

ich möchte ein Menü als Liste erstellen. Die Menüpunkte sind jedoch als Bild, da es eine besondere Schrift ist. Somit kann ich dem Listenelement bzw. Menüpunkt keinen Text geben, da er ja sonst das Bild überschreibt. Wenn man die CSS-Styles jedoch deaktiviert im Browser, sollen die Menüpunkte als Text dargestellt werden. Wie stell ich das am Besten an?

<ul> 
     <li id="sprite-b_a" class="container"><a href="#"></a></li> 
      <li id="sprite-b_b" class="container"><a href="#"></a></li> 
</ul>

.container {
   background: url("images/buttons/menuStripes.jpg") no-repeat top left;
}

#sprite-b_a{ background-position: 0 0; width: 130px; height: 30px; }
#sprite-b_b{ background-position: 0 -32px; width: 130px; height: 30px; }

 

[hela]

Hallo,

den Text kann man per CSS verstecken - das ganze nennt sich "Image Replacement" und davon gibt es ziemlich viel Methoden. Eine Übersicht dazu findest du bei Jens Meiert.

Alle Methoden haben irgendwelche Vor- und eben auch Nachteile. Ich verwende entweder die Leahy-Langridge-Methode, wenn aus irgendwelchen Gründen kein zusätzliches Markup im Titel bzw. Menüpunkt möglich ist, ansonsten die Gilder-Levin-Methode.

 

[deluxeondecks]

Danke für die schnelle Antwort, jedoch hat es noch nicht den gewollten Effekt. Wo liegt der Fehler?

<ul> 
   <li class="container" id="sprite-b_home"><a href="#">Startseite</a></li> 
</ul>

.container li {
   background: url("../../images/buttons/csg-4ca063fd34436.jpg") no-repeat top left;
}

#sprite-b_home{ 
	background-position: 0 0; 
	width: 130px; 
	height: 35px; 
	background: url("../../images/buttons/b_home.jpg");
	overflow: hidden;
}

Jetzt ist es so, das der Text "Startseite" über das Bild liegt und somit stört (dieser soll weg). Der Link ist auch auf "Startseite" gesetzt und nicht auf das Bild. Wenn ich den CSS Style dann im Browser ausschalte, soll "Startseite" als Link dargestellt sein und das Bild nicht mehr.

 

[hela]

Hallo,
verrate einfach mal, welche Image-Replacement-Methode das werden soll. Den Link zur Übersicht von Jens Meiert hatte ich ja schon gepostet.

 

[deluxeondecks]

Oh sorry, das hab ich ganz vergessen. Ich habe versucht die "Leahy-Langridge-Methode" anzuwenden.

 

[hela]

Oh sorry, das hab ich ganz vergessen. Ich habe versucht die "Leahy-Langridge-Methode" anzuwenden.

In deinem HTML-Quelltext gibt es kein Element mit dem Klassenattribut "container" und einem LI-Element als Kind (child) oder Nachkommen (descendant). Deshalb greift die Regel ".container li" sowieso nicht. Bei mir würde es so funktionieren:

.container li {
  overflow: hidden;
  padding-top: 50px;  /* = Höhe des "Hintegrundbildes */
  width: 160px;       /* = Breite des Hintergrundbildes */
  height: 0;         /* Schrift ausblenden! */
}
#sprite-b_home{
    background-image: url(hgBild.png);  /* Hintergrundbild */
    background-position: 0 0;
}

<ul class="container">
  <li id="sprite-b_home">
    <a href="#">Startseite</a>
  </li>
</ul>

 

[deluxeondecks]

Also mit dem Stil ausblenden und den Link anzeigen funktioniert perfekt mit deiner Methode. Aber wenn das Bild angezeigt wird, ist irgendwie kein Link dahinter.

Die Raute hab ich natürlich durch einen passenden Pfad ersetzt.

 

[hela]

... Aber wenn das Bild angezeigt wird, ist irgendwie kein Link dahinter...

Da hast du natürlich recht. Das habe ich völlig übersehen, dass der Link dann auch nicht mehr funktionsfähig ist. Aber eigentlich kein Problem, du musst das Image-Replacement nur auf das A-Element anwenden, wobei es als Blockelement deklariert wird:

<ul class="container">
  <li id="sprite-b_1"><a href="#1" title="Seite 1">Seite 1</a></li>
  <li id="sprite-b_2"><a href="#2" title="Seite 2">Seite 2</a></li>
</ul>

ul.container {
  list-style-type: none;
}
.container li a {
  display: block;    /* -> Blockelement */
  overflow: hidden;
  padding-top: 50px;  /* = Höhe des Hintergrundbildausschnittes */
  width: 160px;       /* = Breite des Hintergrundbildes */
  height: 0;          /* Schrift ausblenden! */
}

/* meine Bildgröße insgesamt: 160x100 */
#sprite-b_1 a {
    background:
      transparent
      url(hgBild.png)  /* Hintergrundbild */
      0 0              /* Position: obere Bildhälfte */
      no-repeat;
}
#sprite-b_2 a {
    background:
      transparent
      url(hgBild.png)  /* Hintergrundbild */
      0 -50px          /* Position: untere Bildhälfte */
      no-repeat;
}

Da ich vermute, dass du CSS-Sprites anwenden möchtest, habe ich das auch mal im Beispiel gemacht.

 

[deluxeondecks]

Perfekt, ich danke dir vielmals!