Grafik in Navigation

[radobo]

Hoffe mit diesem Thema hier in der richtigen Rubrik zu sein? Ich möchte die Navigations-Anzeige so abändern, dass statt des Textes ("home") eine Grafik (Häuschen) angezeigt wird. Ich habe hier dazu bereits einen Tipp gefunden und umgesetzt, jedoch funktioniert die Lösung nur, wenn man nicht "home" ist, nur bei allen anderen Menüpunkten. Es sieht bei Seitenaufruf (auch auf der Home-Adresse) und beim Navigieren zu anderen Menüpunkten korrekt aus, nur wenn man das Häuschen anklickt, dann steht da "home" statt der Häuschen-Grafik.

Verwendet habe ich nachfolgende css-Definiton:
/* Logo statt Text für home */
#header .nav-logo a {
width:40px;
height:40px;
top:5px;
display:block;
background-image:url("files/DVB/Layout/home-icon.png");
background-repeat:no-repeat;
text-indent:-3000px;
}
In der Seite home habe ich die Klasse nav-logo angegeben.
Ich vermute, dass außer "a" hinter .nav-logo noch irgendwas anderes stehen muss. Hatte mal "active" probiert, aber das hatte nicht gewünschten, sondern nur negative Effekte für die anderen Menüpunkte.
Weiß jemand die Lösung? Geht es vielleicht ganz anders (so ein ungewöhnliches Thema ist das ja eigentlich nicht)?

Vielen Dank für Tipps und Hinweise, Reinhard

[mlweb]

Link zu Seite?

[Andreas]

(so ein ungewöhnliches Thema ist das ja eigentlich nicht)?

Stimmt, hier geht es nur darum ein Element zu formatieren. Dazu brauchst du noch nichteinmal die Klasse. Fehler kann ich bei dir keinen sehen, außer, dass vielleicht der Pfad zum Bild nicht stimmt. Wie mlweb schon sagte, Link zur Seite wird alles klären.

[tab]

Ähhh, ich nehme mal an, es hat nicht den offensichtlichen Grund. Der wäre einfach, dass auf der Seite selbst der Menüpunkt keinen Link hat, sondern nur ein "span".
Man müsste also auch ".nav-logo span" entsprechend stylen.

[Andreas]

LOL, ich denke doch, dass es das sein wird

ps Dein top:5px; wird keine Auswirkung haben, das gilt nur für Elemente, die nicht static positioniert sind.

[radobo]

Ja, das Top5px hat keine Auswirkung. Das hatte ich probiert und gemerkt, dass es nichts bringt, aber offenbar vergessen, es wieder zu entfernen.

Die Seite heißt denkmalverein-bonn-aktuell.de. Bitte nicht kritisch nach Inhalten suchen, die Seite ist noch im Entwurfstadium. Das Home-Häuschen ist auch noch nicht fertig layoutet.

Der Link zum Logo ist korrekt.

Der Hinweis auf das fehlende span hört sich richtig an. Wo bringe ich das denn unter - als weitere css-Klasse? Ich stocher da mangels ausreichender Kenntnisse ziemlich im Nebel. Aber die eigene Klasse für dieses Häuschen brauche ich doch, oder?

Danke für die Hilfe!

[tab]

Du musst das nur als zusätzlichen Selektor in dein CSS einfügen, also dein obiges CSS so ergänzen:

#header .nav-logo a, #header .nav-logo span {
   width:40px;
   height:40px;
   top:5px;
   display:block;
   background-image:url("files/DVB/Layout/home-icon.png");
   background-repeat:no-repeat;
   text-indent:-3000px;
}

[Andreas]

Ein paar von den Werten benötigst du nicht. Und wenn du das Margin auf den Items gegen Padding tauschst, vergrößerst du die klicksensible Fläche.

#header .mod_navigation li a, 
#header .mod_navigation span {
  /*
  margin-left: 20px;
  margin-right: 20px; 
  */
  padding: 0 20px;
}
#header a.nav-logo,
#header span.nav-logo {
  background-image: url("../../files/DVB/Layout/home-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -100px;
  width: 20px;
} 

Die As in den Navigationen würde ich immer mit li a {} ansprechen, sonst kommen diese Skiplinks a.invisible auch immer in den Genuss dieser Formatierung.

[radobo]

Super, es funktioniert! Allerdings nur, wenn ich es bei "a" belasse, mit dem Eintrag "li a" hat es keinen Effekt auf die anderen Menüpunkte, da wirkt dann nur das span auf die Home-Seite selber. Das Padding habe ich auch übernommen. Die Menü-css hatte ich von der Buch-CD von Peter Müller, da war es mit Margins. Aber so ist es besser, danke auch dafür.
Die URL ist bei mir ohne die ../../ vor files. Keine Ahnung warum, aber mit den Punkten davor findet meine Installation das Logo nicht.

[tab]

Ja, das mit dem "li a" ist normalerweise sinnvoll, hier kann es so allerdings nicht funktionieren wegen der Klasse nav-logo, die in diesem Fall dem li zugewiesen ist. Die Klasse nav-logo ist zwar auch dem <body> zugewiesen, aber da greift der Selektor wiederum nicht, weil das body-Tag nun mal nicht im Header liegt sondern umgekekehrt. Dafür müsste der Selektor dann lauten ".nav-logo #header li a". Es funktioniert also bisher sowieso nur, weil das Navigationsmodul die Klasse der Seite auch nochmal dem entsprechenden li zuweist. "#header .nav-logo li a" kann also so nicht funktionieren wie gewünscht, höchstens mit einem darin enthaltenen li einer Unterseite.

[Andreas]

Sorry, habe nicht aufgepasst, habe es oben korrigiert: #header li.nav-logo a. Ist in dem Fall uniteressant, da die a.invisible damit auf keinen Fall angesprochen werden.

Die Klasse, die man einer Seite gibt, kommt in den BODY, in die entsprechenden LIs und in die entsprechenden As in den Navigtionen.

"../../" hatte nichts zu bedeuten, das kam nur vom Rauskopieren aus den Dev-Tools.

Ohne Vergabe einer Klasse in der Seite wäre das so gegangen (nachdem du der Navigation mal eine Klasse gegeben hast, was du tun solltest)

.mainnav > ul > .first > a,
.mainnav > ul > .first > span {
}