XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   text-link mit grafik bei a:hover (http://xhtmlforum.de/showthread.php?t=54535)

imho 14.11.2008 13:03

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.

andir 14.11.2008 16:59

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 {} ).

imho 17.11.2008 10:51

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?

andir 17.11.2008 11:41

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.

imho 17.11.2008 13:39

Zitat:

Zitat von andir (Beitrag 410966)
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.

aboleo 17.11.2008 16:15

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.


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023