komplette Div-Box verlinken

[mazl1]

Hallo zusammen,

bei der Validierung meiner neu erstellten Seite bin ich auf das Problem gestoßen, dass ich mittels <a> keine komplette Div-Box verlinken sollte.
Die Div-Box hat bisher folgenden Aufbau:

<div>
<a mit href und hintergrundbild>
<h3></h3>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</a>
</div>

Gibt es eine valide Methode diesen Div zu verlinken?
Wäre über Hilfe sehr dankbar

 

[Maik]

bin ich auf das Problem gestoßen, dass ich mittels <a> keine komplette Div-Box verlinken sollte.
Die Div-Box hat bisher folgenden Aufbau:

<div>
<a mit href und hintergrundbild>
<h3></h3>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</a>
</div>

Genau so wenig kann in einem <a>-Element ein Überschriften-, Textabsatz-, und Listenelement eingebunden werden, da diese ebenfalls zu den "Block-Elementen" zählen, die in einem "Inline-Element" nicht enthalten sein dürfen.

Stellt sich bei diesem Markup die Frage, was das für ein Link sein soll, der eine Überschrift, einen Textabsatz und eine Liste umfasst?

Wenn es nur um das <div>-Element geht, ist die display:block-Eigenschaft für das <a>-Element der Schlüssel zum Erfolg, damit es den DIV-Block in seiner Fläche vollständig ausfüllt.

mfg Maik

 

[mazl1]

Hi Maik,

bei der zu verlinkenden Div-Box handelt es sich um eine Wahlmöglichkeit für den Kunden. Er hat 3-4 dieser Div-Boxen zur Auswahl und h3 definiert den Titel der darunterliegenden Seiten. Das p Element stellt einen einleitenden Text da und ab und an sind einige List Elemente um Stichwörter aufzuführen.

Der Link soll also den kompletten Div-Block umfassen.

 

[Maik]

Sorry, aber das geht so nicht, wenn das Markup validieren soll.

Ein Inline-Element (= <a>) darf nur weitere Inline-Elemente, oder Text enthalten - siehe http://de.selfhtml.org/html/referenz/elemente.htm#inline_elemente.

mfg Maik

 

[Maik]

Denkbar und valid ist dieses "Konstrukt":

<div>
    <a href="#">
        <span class="h3">Überschrift</span>
        <span class="p">Textabsatz</span>
        <span class="ul">
            <span class="li">Listeneintrag</span>
            <span class="li">Listeneintrag</span>
            <span class="li">Listeneintrag</span>
        </span>
    </a>
</div>

Die einzelnen <span>-Elemente lassen sich entsprechend ihrer Funktion (Überschrift, usw.) mittels CSS anpassen:

div { background:#eee; }
a, span { display:block; text-decoration:none; }
.h3 { /* Überschriftformatierung */ }
.p { /* Textabsatzformatierung */ }
.ul { /* Listenformatierung */ }
.li { /* Listeneintragformatierung */ }

Kleine Einschränkung: Die spezielle Listenformatierung ist auf das <span>-Element nicht anwendbar.

mfg Maik