zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden text-link mit grafik bei a:hover

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.11.2008, 13:03
Benutzerbild von imho
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard text-link mit grafik bei a:hover

hallo.

ich bin grade am überlegen wie ich am besten folgendes menü löse.

http://img523.imageshack.us/img523/5954/layoutjk4.jpg

bei a:hover soll links eine grafik erscheinen und zwar dieses braune rechteck. wenn der link active ist soll das rechteck dort bleiben. jetzt hatte ich zuvor versucht dieses mit border-left zu lösen, aber dabei verschiebt sich die navigation nach rechts und es klebt direkt an dem link-namen dran, sodass es imho keine gute lösung ist.

wie also kann ich mein vorhaben mit einer grafik beim hover und active lösen und die schmale linie mit einfügen? die navigation habe ich mit einer undefinierten liste aufgebaut.
__________________
wissen ist gut
können ist besser
aber das interessante ist der weg dorthin.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.11.2008, 16:59
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Nimm doch ein transparentes Gif mit dem Rechteck drin als Hintergrundbild für a, wenn a gehovert wird. Das sollte deine Frage beantworten.

Listen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Mit einer Klasse z.B. li class="current" im HTML kannst Du den "aktiven" Zustand anzeigen lassen wenn es entsprechend im CSS notiert ist ( li.current {} ).
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.11.2008, 10:51
Benutzerbild von imho
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

aber dann sitzt die grafik doch genau hinter dem text und sie soll ja weiter links sitzen ?!

soll ich es einfach mit leerzeichen bzw.   lösen? dann funktioniert es nämlich, aber ist demnach ja keine professionelle lösung.

und die linie links mit css definieren?
__________________
wissen ist gut
können ist besser
aber das interessante ist der weg dorthin.

Geändert von imho (17.11.2008 um 11:02 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 17.11.2008, 11:41
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Du kannst dem Linktext (im span) ja ein padding oder margin mitgeben. Das a selbst und das li ist dann natürlich größer als es auf den ersten Blick ausschaut.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #5 (permalink)  
Alt 17.11.2008, 13:39
Benutzerbild von imho
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.11.2008
Beiträge: 49
imho befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andir Beitrag anzeigen
Du kannst dem Linktext (im span) ja ein padding oder margin mitgeben. Das a selbst und das li ist dann natürlich größer als es auf den ersten Blick ausschaut.
stimmt. wieso einfach wenn's auch kompliziert geht

aber ich weiß leider noch immer nicht wie ich die linke linie definieren soll, die sich jeweils auf der linken der navigations-punkte befindet.
__________________
wissen ist gut
können ist besser
aber das interessante ist der weg dorthin.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.11.2008, 16:15
Benutzerbild von aboleo
OperaRueles!
XHTMLforum-Mitglied
 
Registriert seit: 23.04.2008
Ort: Erlangen
Beiträge: 139
aboleo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
aber ich weiß leider noch immer nicht wie ich die linke linie definieren soll, die sich jeweils auf der linken der navigations-punkte befindet.
Dazu braechte man jetzt an dieser Stelle ein bisschen Code, denn da gibt es mehrere Ansaetze.
Beispielsweise, kenntest du der jeweilligen Liste immer einen border-left mitgeben.
__________________
Ad pedem litterae

Geändert von aboleo (17.11.2008 um 16:17 Uhr) Grund: Ergaenzung
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
Parent DIV soll mit der Höhe seines Childs wachsen Tekkla CSS 2 19.11.2009 19:27
DIV bis GANZ unten burnZ CSS 5 27.07.2008 14:14
Helft mir. Ich habe voll die Leseschwäche nick CSS 12 15.01.2008 21:52
Internet Explorer verschluckt Grafik Webentwickler Eric CSS 4 06.07.2007 15:53
Falsche Darstellung beim Internet Explorer LordAvalon CSS 4 09.04.2007 17:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:19 Uhr.