CSS li als Link ohne "style"

[blablub1212]

Wenn du den Link um das LI baust, dann hast du halt kein valides HTML mehr. Und warum was "falsch" machen, wenn das absolut nicht nötig ist?

Da mein angehängter Code definitiv funktioniert, frage ich mich, warum du das nochmal neu machst? Es wäre in dem Zusammenhang auch mal spannend zu sehen, wie denn dein komplettes HTML + CSS aussieht. Evtl. hast du da irgendwelche Abhängigkeiten, die man noch beseitigen sollte.

 

[Jesterfox]

Dass das ganze "funktioniert" liegt an einer gewissen Fehlertoleranz der Browser. Auf so etwas sollte man sich aber nicht verlassen (ich finds schade das sich XHTML2 nicht durchsetzen konnte... da hätte dir jeder Browser nur eine Fehlermeldung ausgegeben ;-)

 

[Anon1216]

Ich versteh nicht was du mit valides HTML meinst. Was kann denn passieren wenn ich das so mache wie ich gesagt habe?

Ich habs jetzt auch einmal so:
<li onclick="location.href='seite.html';" style="cursorointer;"></li>

Damit wird das ganze <li> zum Link so wie ich es wollte. Das geht doch auch oder nicht?

Ergänzung (20. März 2016)

Es wäre in dem Zusammenhang auch mal spannend zu sehen, wie denn dein komplettes HTML + CSS aussieht. Evtl. hast du da irgendwelche Abhängigkeiten, die man noch beseitigen sollte.

Ich habe für fast jedes Bild padding-left und padding-right einzelnd bearbeitet weil sonst die "Kästen" nicht gleich groß wären. Und das sieht nicht so gut aus.

 

[Jesterfox]

HTML hat Regeln wie welche Elemente verschachtelt werden dürfen. Genauso wie die Deutsche Sprachen Regeln hat (Grammatik). Man kann auch bei deutschen Sätzen auf die Grammatik verzichten, man darf dann aber nicht mehr erwarten das jeder einen versteht ;-) Genauso könnte es auch passieren das mal ein Browser das nicht so macht wie du es gerne hättest (hast du es überhaupt schon mal in verschiedenen Browsern getestet?)

Deine neue Variante nutzt halt JavaScript, wer das deaktiviert hat kann dem "Link" nicht folgen. Profitipp: Suchmaschinen-Crawler erkennen sowas auch nicht als Link. Wenn du in Google & Co. mit der Seite gefunden werden willst solltest du das nicht machen (oder zumindest mit einen <a> Element im <li> kombinieren, damit ohne JS zumindest der innere Bereich klickbar ist)

 

[blablub1212]

Du kannst die Bilder mit display: block und padding: auto auch einfach alle vertikal zentrieren, dann musst du das nicht für jedes Bild einzelnen machen ...

 

[Anon1216]

Du kannst die Bilder mit display: block und padding: auto auch einfach alle vertikal zentrieren, dann musst du das nicht für jedes Bild einzelnen machen ...

Die Bilder sind alle unterschiedlich breit und wenn alle gleich viel Abstand haben denn werden die Kästen auch alle unterschiedlich breit. Der Kasten ist der Innenabstand vom <li>.

Oder wäre es so besser:

<ul>
<li><a><div><img src="#"></div></a></li>
</ul>

Denn ist nicht mehr das <li> der Link denn mache ich eben einen Div Container!?

 

[Jesterfox]

Besser <span> anstelle von <div> (ja, wieder mal die regeln von HTML ;-) und per CSS dann display:block oder inline-block zuweisen, falls notwendig.

 

[Anon1216]

Da mein angehängter Code definitiv funktioniert, frage ich mich, warum du das nochmal neu machst?

Mit deinem Code werden die Bilder einfach auf 100x100 skaliert, ich habe auch Bilder die 20x100 sind und wenn die dann Skaliert werden sehen die nicht mehr so gut aus.

Ergänzung (20. März 2016)

Was ich noch machen könnte, ich bearbeite die Bilder alle so, dass sie 100x100 sind. Das sind zwar ein paar Bilder aber so würde es funktionieren.

 

[blablub1212]

Nein du musst die Bilder auch nicht alle bearbeiten

Ich habe dir mal kurz ein jsfiddle gebaut: https://jsfiddle.net/2bz6sxu1/2/

Die Katze ist quadratisch, der Stift (quer) ist sehr breit und der Stift (hochkant) ist sehr hoch. Auch habe ich dir mal die Größe aus dem Image entfernt und direkt an das LI gegeben. Somit wird jedes Bild skaliert und Beibehaltung seiner Relation. Auch sind die Bilder sowohl vertikal als auch horizontal zentriert und das ganze LI ist klickbar.

Kleiner Fallstrick: https://developer.mozilla.org/de/docs/Web/CSS/object-fit

Ich hab keine Ahnung wie der Internet Explorer damit umgeht. Sollte es damit Probleme geben, könnte man die ganzen Bilder auch als Background einbinden und dann die Background-Size auf "cover" setzen. Würde aber bedeuten, dass man für jedes LI eine eigene Klasse mit der entsprechenden Background URL anlegen müsste. Aber so ist das halt mit Bilder ... ich weis schon warum ich immer Picons (fontawesome.io) nutze um solche Geschichten umzusetzen, oder alle Bilder im Vorfeld bspw. quadratisch zuschneide