Wie kann ich denn ein DIV, dass andere Elemente enthält zu einem Link machen? Ich bekomme immer einen Validation-Error:

One possible cause for this message is that you have attempted to put a block-level element (such as „<p>“ or „<table>&ldquo inside an inline element (such as „<a>“, „<span>“, or „<font>&ldquo.

so sieht das aus:

1. <a href="linkzudennews">
2. <div>
3. <strong>titel</strong>
4. <p>teaser</p>
5. </div>
6. </a>

Quelltext in Zwischenablage kopieren

hatte auch schon versucht das DIV wegzulassen und das umschliessende A per CSS zu einem blockelement zu machen, half aber nix, weil er auch wegen dem P im A meckert.

danke danke

mach das <a> in das <div> und passe die größe mit

1. display:block;
2. height:x;
3. width:x;

Quelltext in Zwischenablage kopieren an

Das müsste aber wieder zum Fehler führen, da das <p>-Tag nicht im <a>-Tag enthalten sein darf.

Scheidet Javascript bei dir aus?

ich meinte das ja auch so:

1. <div>
2. <a href="linkzudennews"></a>
3. <strong>titel</strong>
4. <p>teaser</p>
5. </div>

Quelltext in Zwischenablage kopieren

Dann müssten die „inneren“-Elemente, also die im <a>-Tag liegen sollen, aber noch mit position: absolute; positioniert werden und dem <a>-Tag selbst noch ein position: relative; gegeben werde - wenn ich das gerade richtig im Kopf hab.

eh ja stimmt! hatte ich vergessen, ich glaube man muss nur das a mit position irgendwas versehen

loeffler schrieb am 02.12.10, 17:00 Uhr:

Scheidet Javascript bei dir aus?

wäre meine notlösung – eigentlich spricht ja nichts dagegen, javascript einzusetzen, oder? (hab ich mich schon immer gefragt. gibt es leute die OHNE js im netz unterwegs sind?)

ich würde es dann halt so machen, dass ich noch einen „fallback“ habe in dem ich den titel verlinke.

Leider ist ein DIV oder auch P innerhalb eines A nicht Valide, wenn du mehrere Elemente innerhalb eines A haben möchtest, geht imho nichts an SPANs vorbei...

(Siehe inline und Blockelemente)

Bei mir hats geklappt, in dem ich dem div position: relative; zugewiesen habe, den inneren Tags allen position: absolute; und dann beim a-Tag den z-index angepasst hab.

JS wäre denke ich allerdings die elegantere Methode.

deklarier es einfach als html5, dann ist es nämlich erlaubt und valide.

Felix schrieb am 02.12.10, 17:39 Uhr:

deklarier es einfach als html5, dann ist es nämlich erlaubt und valide. werber

hat das irgendwelche nachteile?

honsey schrieb am 02.12.10, 17:44 Uhr:

Felix schrieb am 02.12.10, 17:39 Uhr:

deklarier es einfach als html5, dann ist es nämlich erlaubt und valide. werber

hat das irgendwelche nachteile?

ja. das html5 eine noch nicht fertige spezifikation ist, die kaum ein browser bisher richtig interpretiert, du mit diesem doctype den ie in den quirksmode schickst. [u.v.m].

bei deinem zu vermutendem kenntnisstand ist das blödsinn.
don't believe the hype

mach es (wie schon vorgeschlagen) per javascript plus fallback:

1. <div onclick="document.location.href='deinlink.html'">[...]</div>

Quelltext in Zwischenablage kopieren

ich hab es jetzt so gelöst, falls es mal jemand braucht:

css

1. .news_teaser:hover { cursor: pointer; }

Quelltext in Zwischenablage kopieren

jquery (nutze ich eh im projekt)

1. $("div.news_teaser").click(
2. function()
3. {
4. window.location = $(this).find("a").attr("href");
5. }
6. );

Quelltext in Zwischenablage kopieren

html

1. <div class="news_teaser" id="news_teaser-0">
2. <a href="url" title="Le Titel"><strong>Le Titel</strong></a>
3. <p>Le Content.</p>
4. </div>

Quelltext in Zwischenablage kopieren

danke danke!

loeffler schrieb am 02.12.10, 17:00 Uhr:

Das müsste aber wieder zum Fehler führen, da das <p>-Tag nicht im <a>-Tag enthalten sein darf.

Scheidet Javascript bei dir aus?

hat jetzt zwar nicht direkt was mit dem thema zu tun, aber das müsste laut HTML5 mittlerweile erlaubt sein? interessiert mich jetzt.

klar das würde natürlich vorraussetzen das er den korrekten DOCTYPE gesetzt hat und ... ich meine jetzt generell.

HTML 5 erlaubt das, ja. Aber er fragte ja nach XHTML 1.0 Strict, und da ist das nicht erlaubt.

honsey schrieb am 02.12.10, 19:00 Uhr:

Dieser Text ist nur für Mitglieder sichtbar.

Gehts da um die Verlinkung der News auf der rechten Seite?
Wenn ja, wieso muss es unbedingt ein verlinktes <div> sein?
Wieso verlinkst du nicht einfach nur den gesamten Text?

ich möchte, dass auch die headline/datum verlinkt wird und beides gesondert in a-tags zu setzen war mir irgendwie nicht schön genug und auch ein bisschen doof, weil der cursor da springt zwischen headline und text?

es war aber eher eine generelle frage: was tun, wenn man ein prall gefülltes div hat, das irgendwohin linken soll?

mal noch ne ganz andere frage:

7 a:hover Die Eigenschaft â color existiert nicht : #b0b0b0 #b0b0b0
9 p a Die Eigenschaft â text-decoration existiert nicht : underline underline
11 .title Die Eigenschaft â color existiert nicht : red red
34 .next-posts Die Eigenschaft â float existiert nicht : right right
35 .prev-posts Die Eigenschaft â float existiert nicht : left left
38 #credit a Die Eigenschaft â text-decoration existiert nicht : none none
49 ul.news_navigation a Die Eigenschaft â text-decoration existiert nicht : none none

mein css validiert nicht, css 2.1?

was is denn da los? text-decoration, float, color – gehts noch? das is doch standard!

da hängen komische sonderzeichen drin:

1. a:hover {Â color: #b0b0b0; }
2. p a {Â text-decoration: underline; }

Quelltext in Zwischenablage kopieren

das is ja interessant… vielen dank coda, fürs nicht-anzeigen

vielleicht irgendein kodierungs problem

ja – anscheinend, komischerweise wurden sie mir auch nach nem reload nicht angezeigt in coda. hab jetzt die entsprechenden stellen neu geschrieben – jetzt gehts!

danke euch