zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Liste einfärben, wenn Link in der Liste ausgewählt ist

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.08.2008, 12:30
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard 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>
Hier der dazugehörige Ausschnitt aus der CSS-Datei:

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;
}
Links haben bei mir standardmäßig ein Icon, was ich über background-image einbinde und links vom Link platziere. Der Link selbst bekommt dann noch einen Innenabstand links, damit die Schrift im Link nicht über den Icon steht.

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.08.2008, 12:52
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

lös das doch rein grafisch.

du machst dir ne Grafik, das beide Zustände, die Schrift und das icon beeinhaltet. z.B. Grafik 190x30px groß.
Links in der Grafik der Normalzustand 90x30px und rechts der gehoverte 100x30px.

Per background-position wird der andere Teil ins Bild geschoben.
Der Linktext wird natürlich noch in den Quelltext geschrieben und per "Image Replacement-Technik" (Gilder/Levin!!) durch die Grafik verdeckt.

In der CSS-FAQ ist weiter unten ein Tut für Menüs, da kommt auch ein grafisches Menü vor.

Ist grad ne spontane Idee ohne es getestet zu haben.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.08.2008, 13:01
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.08.2008, 13:17
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von *pi Beitrag anzeigen
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.
Es gibt die Ansprache per Nachfahrenselektoren, also bildlich von oben nach unten.
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
Mit Zitat antworten
  #5 (permalink)  
Alt 15.08.2008, 14:12
*pi *pi ist offline
Neuer Nutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.08.2008
Ort: Berlin
Beiträge: 57
*pi befindet sich auf einem aufstrebenden Ast
Standard

Na für :before gibt es ja JS-Workarounds. selbst benutzt habe ich sie aber noch nicht.
__________________
Über mich gibs nix zu sagen.
Mit Zitat antworten
  #6 (permalink)  
Alt 15.08.2008, 15:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
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

Zitat:
Zitat von *pi Beitrag anzeigen
Dem Link selbst kann ich diesen Abstand nach Links nicht geben, da ich damit ja den gelben Hintergrund verschieben würde.
Nein, dank der Eigenschaft padding.
Mit Zitat antworten
Antwort

Stichwörter
abstand, css, hover, link, liste

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
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


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