li (Liste) mit einem Link versehen.

[mirko22]

Hallo,

ist dies so richtig? Bzw. ist dies erlaubt?

<ul>
<a href="#"><li></li><a/>
</ul>

Grund: ich habe ein Backgroundimage in dre liste (li) hinterlegt und dies soll bei hover sich verändern, genau so wie die Schriftfarbe.
Für neue Ideen bin ic offen :)

Danke schon mal.

 

[thecain]

<ul><li><a href="#"></a></li></ul>

<ul> darf keine <a> Tags enthalten

 

[mirko22]

ok. wie bekomme ich es dann hin, dass bei hover der Schrift <a href="#">test</a> auch das Background image welches ich hinter li gelegt habe, sich auch verändert? Dies ist ja nicht mehr ein Bereich. List-sytle-type mit einer grafik zu belegen geht auch nicht, weil es verschiedene Grafiken sind.

 

[thecain]

du kannst jedem list element eine id geben also quasi

<li id="bla"></id>

dann im CSS

#bla {

}

#bla :hover {

}

 

[<nick>]

Grundsätzlich kann man dir sicher besser helfen wenn du beide Quellcodes, HTML sowie CSS postest.
Jeden Punkt der Liste kannst du auch ohne klasse ansprechen, sollte sich die Liste z.b. in einem nav tag befinden und du möchtest <a href=""></a> ansprechen:

nav ul li a {

Möchtest du dann z.b. für den fünften Punkt der Liste ein background-image nutzen müsstest du immernoch keine id oder class nutzen, sondern kannst auf:

nav ul li:nth-child(5) {

zurückgreifen, und dann ganz normal das background-image einbinden.

 

[thecain]

Grundsätzlich kann man dir sicher besser helfen wenn du beide Quellcodes, HTML sowie CSS postest.

Da geb ich dir recht

Möchtest du dann z.b. für den fünften Punkt der Liste ein background-image nutzen müsstest du immernoch keine id oder class nutzen, sondern kannst auf:

nav ul li:nth-child(5) {

zurückgreifen, und dann ganz normal das background-image einbinden.

Hier nicht! Wo ist da bitte der Sinn?

 

[MrMurphy]

Hallo

Wo ist da bitte der Sinn?

Der Sinn ist den Inhalt vom Aussehen / Layout zu trennen. Und dazu sollten im HTML-Quelltext im body-Element möglichst nur Informationen stehen. id und class sind keine Informationen im Sinne der Semantik. Deshalb sollte auf die möglichst verzichtet werden.

Hier nicht!

Das das nur ein Beispiel sein kann und ein nav-Element vorhanden sein sollte muss doch wohl nicht extra dazu geschrieben werden. Sofern uns mirko22 nur mit Textschnipseln versorgt ist eine konkrete Hilfe nicht möglich.

Grundsätzlich funktioniert das und sollte auch so verwendet werden:

http://foreninfo.bplaced.net/seiten_fremdseiten/2014_02_06_mirko22_css_naviliste_01.html

Edith: Ich hatte den Hover-Effekt vergessen, den habe ich nachgepflegt.

Gruss

MrMurphy

 

[thecain]

Wenn du also 10 listenpunkte hast und jedem ein anderes hintergrundbild geben willst machst du 10 x nth-child(x) bzw first und last child beim jeweilig ersten und letzten?

Ich sehe ja durchaus sinnvolle Anwendungen mit nth-child und Listen. (Beispielsweise jedes zweite grau hinterlegen), aber so finde ich es eher sinnlos/verwirrend.

Doch man möge mich gerne eines besseren belehren.

 

[<nick>]

Wenn du also 10 listenpunkte hast und jedem ein anderes hintergrundbild geben willst machst du 10 x nth-child(x) bzw first und last child beim jeweilig ersten und letzten?

Mit

nav ul li:nth-child(n) a {

sollte man jedes Element der Liste auswählen können.

 

[thecain]

Ich weiss das man kann... Aber ist das noch übersichtlich/sinnvoll?

 

[AzRaIL]

ok. wie bekomme ich es dann hin, dass bei hover der Schrift <a href="#">test</a> auch das Background image welches ich hinter li gelegt habe, sich auch verändert?

li:hover

 

[mirko22]

Hallo, danke für die Anregungen. Was ich will ist, das die Grafik die ich als BG im li Element einbinde auch verlinkt sein soll, daher wollte ich um das li Element den link legen. Aber ihr sagt das geht gar nicht? Gibts ne andere Möglichkeit, wie ich das BG Image mit Verlinken kann?

 

[scbawik]

Dann musst du das anders konzipieren.
Du kannst den Link (<a>) zB mit display:inline-block so formatieren, dass er das Listenelement komplett ausfüllt.