Überschriften und DIVs innerhalb von <a href>

[Danny]

Sicherheitsnachfrage:

Eclipse meckert, wenn ich in ein verlinktes DIV ein Bild, eine <h4> und <p> platziere - das sei nicht gültig.

Erstens aber will ich, dass die gesamte Fläche ein Hotspot ist (und nicht nur <h4> – oder der Text – oder ein Bild), zweitens funktioniert das Ganze in den von mir getesteten Browsern (Firefox 3.6, Safari 5, Opera 10) ganz gut. Auch der hover-Effekt in der Überschrift wird mit angezeigt, um einen Link vorzutäuschen, der dort in Wirklichkeit aber gar nicht ist (also in der Überschrift).

Wie würde man alternativ eine ganze Fläche zum Hotspot machen, ohne Regeln zu verletzen (mal vorausgesetzt, Eclipse hat Recht) und ohne JS?

[Hopsel]

Hi Danny!

Wie würde man alternativ eine ganze Fläche zum Hotspot machen, ohne Regeln zu verletzen (mal vorausgesetzt, Eclipse hat Recht) und ohne JS?

Eclipse hat recht.
Ein großformatigen "Hotspot" könnte man mit korrekt verschachtelten Elementen und entsprechenden CSS-Anweisungen erstellen.

MfG H☼psel

[Danny]

Danke an alle!

Die a {display:block;}-Geschichte will ich mir näher ansehen!

[Texter mit x]

Eclipse meckert, wenn ich in ein verlinktes DIV ein Bild, eine <h4> und <p> platziere - das sei nicht gültig.

Was genau sei nicht gültig? Ein div darf img, h4 und p enthalten.
http://de.selfhtml.org/html/referenz/elemente.htm#div

Erstens aber will ich, dass die gesamte Fläche ein Hotspot ist

Ein was?

[Gunnar Bittersmann]

@@Texter mit x:

nuqneH

Eclipse meckert, wenn ich in ein verlinktes DIV ein Bild, eine <h4> und <p> platziere - das sei nicht gültig.

Was genau sei nicht gültig? Ein div darf img, h4 und p enthalten.

Ein a darf aber kein div enthalten, jedenfalls nicht in HTML 4/XHTML 1. Mit HTML5 ändert sich das (endlich!).

Ich würde mich aber nicht darauf verlassen wollen, dass jeder heutige Browser schon mit
  <a href="http://example.net><div>foo</div></a>
wie vom Autor gewünscht umgehent. Manche Browser könnten das 'a'-Element implizit mit dem <div>-Start-Tag schließen und das als
  <a href="http://example.net></a><div>foo</div></a>
interpretieren. Dann gibt es nichts anzuclicken. Das falsche </a>-End-Tag am Ende ist dann das kleinere Problem.

Qapla'

[Texter mit x]

Eclipse meckert, wenn ich in ein verlinktes DIV ein Bild, eine <h4> und <p> platziere - das sei nicht gültig.

Was genau sei nicht gültig? Ein div darf img, h4 und p enthalten.

Ein a darf aber kein div enthalten,

Ich hatte es nicht so gelesen, als ob das alles in einem a steht, "verlinkt" wird ja eigentlich das Ziel.

[pete]

du musst dein a-element via css mit display:block formatieren; dann nimmt die sensitive Fläche den gesamten raum des umschliessenden div ein.
wenn im IE dann nur der im h4-tag enthaltene text sensitiv ist, musst du dich leider mal mit 'hasLayout' beschäftigen ...

[Der Martin]

Hallo,

Sicherheitsnachfrage:

was hat die Frage mit Sicherheit zu tun??

Eclipse meckert, wenn ich in ein verlinktes DIV ein Bild, eine <h4> und <p> platziere - das sei nicht gültig.

Wenn du mit "verlinkt" meinst, dass ein Link (a-Element) ein div enthält: Yo, Eclipse hat Recht.
Ein a-Element darf nur inline-Elemente (ausgenommen ein weiteres a) und Text als Kinder haben, aber keine Blockelemente.

Wie würde man alternativ eine ganze Fläche zum Hotspot machen, ohne Regeln zu verletzen (mal vorausgesetzt, Eclipse hat Recht) und ohne JS?

Wenn du die genannten Elemente (insbesondere h4 und p) beibehalten willst: Nur durch geschicktes Täuschen. Positioniere das a-Element *im div*, und zwar so, dass es alle anderen Inhalte des Container-div überlagert.

Ciao,
 Martin