✔ Schrift durch Hintergrundbild ersetzen

[Fabian Frank]

Hallo,

hab jetzt mit der Replace-Funktion ein Navi-Menü mit CSS gestaltet.
Jedoch stellt sich jetzt die Frage, wie ich den Buchstaben, in dem Fall also das "n" wegbekomme, ohne das das Hintergrundbild weggeht, da das n momentan noch auf dem Hintergrundbild liegt, und somit beeinträchtigt.

Hier mal der Code der index.php

<div id="navigation"><ul><li><a href="" id="news">n</a></li><li></li></ul></div>

Code der Css-Datei

#navigation {
margin-top: 1em;
margin-bottom: 0.5em;
}

#navigation ul {
padding-top: 8px;
background-color: #000000;
text-align: center;
margin-left: 0;
padding-left: 0;
height: 27px;
}

#navigation li {
list-style-type: none;
padding: 0.25em 1em;
display: inline;
}

#navigation li:first-child {
border: none;
}

#news {
  background: url(../images/news.gif) no-repeat;
  position: absolute;
  width:100px;
}
#news:hover {
  background: url(../images/news_hover.gif) no-repeat;
  position: absolute;
  width:100px;
  }

Wenn ich das n nämlich komplett aus dem <a>-Tag entferne, erscheint logischerweise das Hintergrundbild auch nicht mehr.

Da muss es doch eine Lösung geben. Hab schon versucht mit z-Index zu lösen, hat jedoch auch nicht funktioniert.

Grüße,

Fabian

 

[Maik]

Hi,

mach es mal so:

#navigation a span { display:none; }

<a href="" id="news"><span>n</span></a>

 

[Fabian Frank]

Hi,

mach es mal so:

#navigation a span { display:none; }

<a href="" id="news"><span>n</span></a>

Danke für deine Antwort.
Jedoch ist das noch nicht so das wahre, da das N ja dann wieder unterdrückt wird (anscheinend), sodass das Hintergrundbild wieder nicht angezeigt wird.

Sonst noch Ideen?

 

[Fabian Frank]

EDIT: uups, tut mir leid.

 

[Maik]

So funktioniert's bei mir einwandfrei:

#news {
  background: url(../images/news.gif) no-repeat;
  position: absolute;
  width: 100px;
  height: 27px;
  display: block;
}
#news:hover {
  background: url(../images/news_hover.gif) no-repeat;
}

#navigation a span { display:none; }

 

[Fabian Frank]

So funktioniert's bei mir einwandfrei:
....

Ah, ok. Verstehe was du meinst. Hab das grad auch mal getestet nur mit dem Code den du gepostest hast, da gehts. Jedoch wenn ich die Zeile

#navigation a span { display:none; }

am ende meiner CSS-Datei einfüge (und die Hover-Formatierung in deine Abändere) gehts auch, jedoch hab ich dann auf einmal ein Problem mit der Positionierung.
Und zwar wird der Button dann nicht in der mitte des div-layers angezeigt, sondern links unterhalb der "Box".

PS: Sorry, Hab grad leider kein Screenshot-Programm da. Hoffe Du (oder jemand) versteht halbwegs was ich mein...

 

[Maik]

Sorry, versuch es mal hiermit:

#news {
  background: url(../images/news.gif) no-repeat;
  position: absolute;
  width: 100px;
  height: 27px;
  /*display: block;*/ /* auskommentiert = deaktiviert */
}

P.S. Ich mach meine Screenshots immer mit der "Druck"-Taste und füg sie so über die Zwischenablage in ein Grafikprogramm ein.

 

[Fabian Frank]

perfetto ;-)

Vielen Dank,

Grüße