✔ Div einen Link zuweisen

[lisali]

Mhh... das ist auch nicht so das, was ich erreichen möchte.

Also, ich möchte halt, dass der ganze Container beim hover ein Link ist und überall klickbar und überall ändert sich halt auch die Background-Farbe.

Aber einzelne Links, ob Text- oder Bildlinks in diesem Container, sollen nichts anderes tun, außer eben ein seperater Link sein.

Ich weiß nicht, ob das jetzt hilft, aber es geht um den Nachrichtenbereich. Es soll so wie z.B. bei Facebook sein, dass wenn man einfach dadrüberfährt mit der Maus, dass man zur Mail selbst gelangt, aber z.B. Profilbild, oder Profilname, oder das Icon zum Löschen der Mail sind eben seperate Links.

 

[Maik]

Soll der DIV-Block beim Überfahren mit der Maus lediglich von den übrigen Blöcken "hervorgehoben" werden?

In diesem Fall hilft dir hier die :hover-Pseudoklasse weiter:

div:hover {
border:2px solid #ccc; 
background:#eee;
}

mfg Maik

 

[lisali]

Das auch, aber eben auch ein Link sein, wie ich meinte.

Ich weiß jetzt auch nicht wie ich es besser erklären könnte...

Es ist halt ein Container, oben links steht z.B. ein Name und dieser Name verlinkt zur Profilseite des Users. Und ganz oben rechts ist z.B. ein Bild, und das verlinkt genauso irgendwohin.

Und in der Mitte ist Text, usw.

Aber ALLES soll ein Link sein, wenn man drüberfährt in diesem Container. Jedoch soll ich nur der Pfad des Links ändern, wenn man mal nicht im Bereich des Containers ist, wo eben ein extra Element wie ein Bild ist oder ein Text... (Name, Bild, usw.)

 

[Sprint]

Setz doch das <div> in das <a>-Tag. Funktioniert dann mit allen Inhalten. Ein lebendes Beispiel: hier die roten Blöcke. Die Beschriftung ist Text, kein Bild.

<a href="#">
    <div id="id">...</div>
</a>

Ich weiß nicht, ob es super sauberes HTML ist, aber es klappt.

 

[ComFreek]

@sprint: Das sollte man nicht machen: http://de.selfhtml.org/html/referenz/elemente.htm#a

 

[Maik]

Damit ich das richtig verstehe: das umschliessende <div>-Element soll selbst als Verweis fungieren, und in ihm befinden sich weitere Links mit anderen Verweiszielen?

Demnach müsstest du hier Javascript hinzuziehen, um diese Unterscheidung vornehmen zu können:

<div onclick="window.location='Verweisziel-A';">
   <a href="Verweisziel-B">link B</a>
   <a href="Verweisziel-C">link C</a>
</div>

@Sprint: Dein vorgeschlagenes Konstrukt ist nur in "HTML5" zulässig.

Ansonsten darf in "HTML 4.01" und "XHTML 1.x" ein Block-Element nicht in einem Inline-Element enthalten sein.

mfg Maik

 

[Sprint]

@sprint: Das sollte man nicht machen: http://de.selfhtml.org/html/referenz/elemente.htm#a

Hm, wenn ich die Liste richtig verstehe, darf ein <a> #PCDATA Elemente beinhalten und das <div> steht auch darunter. Also sollte es erlaubt sein.

 

[Maik]

Achja, falls jemand auf die glorreiche Idee kommen sollte, das Verschachteln von <a>-Elementen ist ebenso wenig zulässig ;-)

mfg Maik

 

[Maik]

Hm, wenn ich die Liste richtig verstehe, darf ein <a> #PCDATA Elemente beinhalten und das <div> steht auch darunter. Also sollte es erlaubt sein.

Du verstehst sie falsch

Kindelemente 	  |       Darf #PCDATA  und folgende andere HTML-Elemente enthalten:
                                         [Inline-Elemente] (außer a)

#PCDATA steht für parsed character data, zu deutsch: vom Seite HTML-Parser analysierte Zeichendaten. Es handelt sich in HTML normalerweise um Text, der innerhalb eines Elements, also zwischen Anfangs- und End-Tag notiert werden kann.

Zur Gegenprobe kannst du ja dein Markup dem Validator vorlegen

mfg Maik

 

[lisali]

Damit ich das richtig verstehe: das umschliessende <div>-Element soll selbst als Verweis fungieren, und in ihm befinden sich weitere Links mit anderen Verweiszielen?

Demnach müsstest du hier Javascript hinzuziehen, um diese Unterscheidung vornehmen zu können:

<div onclick="window.location='Verweisziel-A';">
   <a href="Verweisziel-B">link B</a>
   <a href="Verweisziel-C">link C</a>
</div>

@Sprint: Dein vorgeschlagenes Konstrukt ist nur in "HTML5" zulässig.

Ansonsten darf in "HTML 4.01" und "XHTML 1.x" ein Block-Element nicht in einem Inline-Element enthalten sein.

mfg Maik

Perfekt, danke!