|
|||
Liste einfärben, wenn Link in der Liste ausgewählt ist
Hiho zusammen,
wie an meiner Postanzahl zu erkennen ist, bin ich neu hier. Möchte mich kurz in einem Satz vorstellen, auch wenn meine Signatur eigentlich verrät, dass es über mich nichts zu sagen gibt . Werde morgen 23 Jahre alt, komme aus der schönen Stadt Berlin und arbeite seit knapp fünf Jahren mit Html und CSS, habe mich vor zwei Jahren kurz in Flash verliebt, bin dann unglücklicher Weise in den Tiefen von Actionscript gescheitert und somit wieder zu Html und CSS zurückgekehrt. Neulich bin ich das erste Mal auf ein Problem gestoßen, was ich nur mit CSS nicht lösen kann. Habe die letzten Tage ständig nach Lösungen gesucht, auch hier in diesem Forum, habe mir etliche Definitionen verschiedener CSS-Eigenschaften bei css4you und der W3C angeschaut und leider nichts Passendes gefunden. Zu meinem Problem: Ich habe folgende Liste: Code:
<ul id="navi"> <li><a href="#“>Link1</a></li> <li><a href="#“>Link2</a></</li> <li><a href="#“>Link3</a></</li> <li><a href="#“>Link4</a></ </li> <li><a href="#“>Link5</a></</li> <li><a href="#“>Link6</a></</li> </ul> Code:
/*NAVI-------------------------------------------------*/ ul#navi { margin-bottom: 30px; width: auto; } ul#navi li { font-size: 11px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #aaaaaa; height: 30px; width: auto; line-height: 30px; } ul#navi a:link, ul#navi a:visited { width: auto; height: 30px; display: block; line-height: 30px; } ul#navi a:focus, ul#navi a:hover, ul#navi a:active { background-color: #ffed00; color: #000000; } ul#navi a.selected { background-color: #eaeaea; } Wenn ich mit der Maus über den Link fahre, färbt sich der Hintergrund gelb ein. Zusätzlich soll der Link aber noch einrücken (sich um 10 Pixel nach rechts verschieben). Deswegen möchte ich, dass das Li, was den Link umschließt einen Inneabstand links von 10 Pixeln beim rüberfahren des Links bekommt. Dem Link selbst kann ich diesen Abstand nach Links nicht geben, da ich damit ja den gelben Hintergrund verschieben würde. Der soll aber beim Hover weiterhin über die volle Breite gehen. Leider habe ich in CSS bis jetzt keine Möglichkeit gefunden, einem Elternelement eine bestimmte Eigenschaft zuzuweisen, wenn das Kindelement (in diesem Fall der Link) mit der Maus berührt wird. Das einzige, was mir gerade beim Schreiben des Textes einfällt, wäre folgende Lösung: Ich positioniere beim Hover das Link-Bild über background-position 10 Pixel nach rechts und damit der Text neben dem Bild noch mitrückt, gebe ich diesem ein text-indent. Liebe Grüße *pi
__________________
Über mich gibs nix zu sagen. |
Sponsored Links |
Sponsored Links |
|
|||
Vielen Dank, ist auf jeden Fall schon mal ein Lösungsweg.
Inzwischen es würde generell mal interessieren, ob diese Eltern-Kind-Problematik überhaupt CSS lösbar ist. Ich kann ja ein Kind-Element in einem Elternelement ansprechen (z.B.: ul#navi li a), aber eben nicht andersrum. Also ich kann kein Elternelement ansprechen, wenn es ein bestimmtes Kindelement beinhaltet. Und Speziell mein Problem war ja, dass das Li anderes formatiert werden soll, wenn einen Link beinhaltet, auf dem gerade der Mauszeiger ist. Ich glaube, ich mach mir zu viele Gedanken
__________________
Über mich gibs nix zu sagen. |
|
||||
Zitat:
Es gibt den Nachbarselektor, den aber der IE6 nicht kapiert. Dann gibts noch das Pseudoelement :before was etwas vor einem bestimmten Element selektiert, was aber vom IE bis inkl. IE7 auch nicht kapiert wird. Von einer Ansprache per "Vorfahrenselektor" hab ich noch nichts gehört. Den "Vorfahren" kann man ja per "Nachfahre" ansprechen, nur halt vorher aufhören zu selektieren. Äh...., Vorfahre, Nachfahre....*tilt*. Gruß Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
Stichwörter |
abstand, css, hover, link, liste |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Links in einer Liste formatieren | Steakfred | CSS | 2 | 26.01.2008 16:49 |
Bunte Liste: Code kürzen? | Steakfred | CSS | 2 | 23.01.2008 12:43 |
Link in Liste; Text und Hintergrund voneinander unabhängig positionieren? | quarki69 | CSS | 7 | 12.03.2007 23:13 |
Liste (inline) Umbruch erzeugen | Steakfred | CSS | 3 | 09.05.2006 13:27 |
Liste im Hintergrund verdeckt Link im Vordergrund | derda | CSS | 2 | 16.09.2005 12:39 |