DIV verlinken?

[Birke]

Huhuu!

Ich habe hier einen DIV rumliegen der ein paar Inhalte hat. Soll ein Container für die Inhalte sein, die dann floaten.
Nun würde ich gerne den kompletten DIV verlinken, was ich nicht hinbekomme. Mit onClick möchte ich es nicht machen, da es sonst bei deaktiviertem JavaScript nicht mehr funktioniert.

HTML (Struktur)

<div>
<h1>...</h1>
<img />
<p>...</p>
<a href></a>
</div>

CSS:

a{
display:block:
width:100%
height:100%
}

So nimmt sich der Link jedoch, logischerweise, nur die Breite seiner "Zeile". Die anderen Inhalte wie das Bild oder die h1 können davon ja nicht betroffen sein. Und einen Link um alles rum geht ja auch nicht. Gut. Geht schon, doch ist das ja nicht 1.0 Strict konform.

Ich könnte auch ein transparenten Pixel in einem darüber liegenden DIV verlinken, doch das gefällt mir auch nicht, da man dann den Text ja nicht mehr markieren kann. Zudem müssen die DIV ja auch floaten.

Danke schon Mal und Grüße,

Birke

 

[dms]

Mag sich im ersten Moment zwar um was vollkommen anderes handeln, aber genau genommen behandelt es das gleiche Problem, nur dass hier bei dir das "Hintergrund-Element" (aka Link) in den Vordergrund gelegt wird.

Der Trick mal kurz in Worte gefasst: Den Link riesig hoch machen und absolut positionieren. Dem umgebenden div eine relative position verpassen und den enthaltenen Link durch overflow hidden abschneiden.

 

[2nd]

Oder auf HMTL 5 setzen: Damit kann man Links und Blockelemente setzen :=)

<a href=""><div><tausend_und_eins_weitere_elemente /></div></a>

 

[Birke]

Ja danke euch Beiden! HTML 5 ist mir zu heikel, da das ja fast kein Browser kann. Der IE6 wohl am wenigsten.

Aber die Idee von dms gefällt mir. Mal ausprobieren.

 

[Atarimaster]

Oder auf HMTL 5 setzen: Damit kann man Links und Blockelemente setzen

Ich habe mich zugegebenermaßen noch nicht eingehend mit HTML 5 befasst – deshalb hat es mich nicht erstaunt, dass mir das noch nicht bekannt war. Aber jetzt habe ich mal danach gegooglet… und muss fragen:
Woher hast Du diese Info? Ich habe nichts dergleichen finden können.

Das einzige, was mir in diese Richtung bekannt ist, ist das in XHTML 2 jedes Element zum Verweis werden kann.
Man würde also schreiben:

<div href="ziel.html">
    <tausend_und_eins_weitere_elemente />
</div>

… aber selbst das ist nicht in die aktuellen HTML5-Spezifikationen aufgenommen worden.

 

[Jakob]

Ich habe mich zugegebenermaßen noch nicht eingehend mit HTML 5 befasst – deshalb hat es mich nicht erstaunt, dass mir das noch nicht bekannt war. Aber jetzt habe ich mal danach gegooglet… und muss fragen:
Woher hast Du diese Info? Ich habe nichts dergleichen finden können.

In solchen Fällen hilft die W3C-Spec http://dev.w3.org/html5/spec/Overview.html#the-a-element:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link: […]

Allerdings ist HTML 5 noch Jahre vor der Einsetzbarkeit in Produktivumgebungen.

Birkes Problem würde ich auch wie dms (bzw. Steve York) lösen.

 

[Atarimaster]

In solchen Fällen hilft die W3C-Spec http://dev.w3.org/html5/spec/Overview.html#the-a-element:

*blindbin*
Auf der Seite war ich sogar – habe aber die richtige Stelle nicht gefunden, weil ich das Dokument nach block durchsucht habe, in der Hoffnung, da stünde etwas wie may be wrapped around block level elements.

Danke!

 

[Kümmelkorn]

~~*mist geschrieben und deshalb gelöscht, schuldigung! ~~

 

[wegus]

HTML isse Auszeichnungssprache, keine Programmiersprache
*verschieb*

 

[kein Name]

http://www.promotionsickness.com/linkboxes.html
Das müsste es sein.

 

[dms]

Sei so nett und zähl noch mal die Block-Elemente in den Links.

 

[kein Name]

@dms: Wen meinst du?
Hier noch weitere Beispiele
http://mactheweb.com/downloads/box.html
http://www.smileycat.com/miaow/archives/000230.php
http://blog.enrique-ramirez.com/2007/05/16/css-box-links/

 

[dms]

Nuja, hier gehts darum dass man innerhalb eines Links derzeit keine Block-Elemente plazieren kann, da nicht valide. Irgendwelche Spans in einen Link zu klatschen und per CSS zu formatieren ist selbstverständlich kein Problem, nur geht dabei eben die semantische Auszeichnung verloren.
Birke will einen einzigen Link, der beliebigen Inhalt, so auch Überschriften und Absätze, enthält.

 

[kein Name]

@dms: dann schau dir mal den letzten Link blog.enrique ... an.
http://feuerwehr-eichendorf.de/fotos/
Habe hier das ganze umgesetzt nur leider nicht IE7 kompatibel, vielleicht hat ja noch jemand eine Idee.