XHTMLforum - Navigation / Pfeil

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Navigation / Pfeil (http://xhtmlforum.de/showthread.php?t=62001)

Solander

07.08.2010 11:04

Navigation / Pfeil

Liste der Anhänge anzeigen (Anzahl: 1)

Servus,

eigentlich sollte es kein Problem sein, aber ich komme nicht drauf. Ich will (wie im Anhang gezeigt) den aktuellen Menüpunkt (und bei hover) mit einem Pfeil nach unten kennzeichnen. Jetzt könnte ich dafür natürlich ganz ein Bild dafür verwenden, aber schöner wäre es, wenn ich nur Farben und halt die Spitze von dem Pfeil als Hintergrundbild hätte.
Hier seht ihr wie es bis jetzt aussieht/umgesetzt wurde.

Für einen Ansatz wäre ich sehr dankbar!

threadi

07.08.2010 11:35

Wie du schon sagst: Pfeil selbst als Grafik, diese als Hintergrundbild an den Link hängen und nur bei Hover einblenden.

Solander

07.08.2010 11:46

Problem war jetzt, dass das hintergrundbild ja innerhalb des Listenelements ist und nicht darunter. Habe folgenden Code verwendet:

#nav .level1 li a:hover, #nav .level1 li a.current{
background: #fff url(nav_pfeil.png) center bottom no-repeat;
}

threadi

07.08.2010 11:48

Dann erweitere den Link um die Höhe die Du brauchst nach unten.

heiko_rs

07.08.2010 12:07

Wenn das Ganze im IE 6 laufen soll, würde ich padding-bottom von a bei :hover um die Höhe des Pfeils erhöhen, durch neg. margin-bottom ausgleichen und den Pfeil (plus hellblauem BG über die volle Breite) per Grafik kommen lassen.

Andernfalls hat li padding-bottom und bekommt bei li:hover den Pfeil (die Grafik muss hier nicht die volle Breite haben).

Solander

07.08.2010 14:18

Danke!

Ich habe es jetzt so

Code:

#nav .level1 li.active{

    background:url(nav_pfeil.png) center bottom no-repeat;

        padding-bottom:13px;

}

#nav .level1  li a:hover, #nav .level1  li a.current{

    background: #fff;        

}

Zwar funktioniert es bei :hover noch nicht, aber ok. Habe es aber noch nicht in verschiedenen Browsern getestet.

Danke euch nochmals!

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:01 Uhr.