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