zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation / Pfeil

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.08.2010, 12:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard Navigation / Pfeil

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!
Angehängte Grafiken
Dateityp: jpg navigation.jpg (24,5 KB, 16x aufgerufen)
__________________
www.anotherstyle.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.08.2010, 12:35
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Wie du schon sagst: Pfeil selbst als Grafik, diese als Hintergrundbild an den Link hängen und nur bei Hover einblenden.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.08.2010, 12:46
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard

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;
}
__________________
www.anotherstyle.de
Mit Zitat antworten
  #4 (permalink)  
Alt 07.08.2010, 12:48
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 888
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Dann erweitere den Link um die Höhe die Du brauchst nach unten.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.08.2010, 13:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.08.2010, 15:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 71
Solander befindet sich auf einem aufstrebenden Ast
Standard

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!
__________________
www.anotherstyle.de
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 16:46
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


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