<div> in <a>

[e7]

Hallo,

nachdem ich mich bei meinem aktuellen Projekt bemühe, zur Abwechslung mal komplett valide zu schreiben (HTML 4.01 Transitional), hab ich folgendes Problem: Und zwar will ich ein <div>-Tag haben, welches anklickbar sein soll und deswegen innerhalb eines <a>-Tags steckt... Und was sagt mir der Validator?

------------------------
Line 23, column 220: document type does not allow element "DIV" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

...ound-image: url(pictures/pixel.gif);"><span class="map_info">&nbsp;</span></d

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

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

Im Großen und Ganzen: Kein Blockelement <div> innerhalb eines inline-Elements <a>. Wie soll ich dann aber sonst das DIV verlinken? Mit JavaScript? Doch nicht wirklich, oder???

E7

[MudGuard]

Hi,

...ound-image: url(pictures/pixel.gif);"><span class="map_info">&nbsp;</span></d

Im Großen und Ganzen: Kein Blockelement <div> innerhalb eines inline-Elements <a>.

Richtig.

Wie soll ich dann aber sonst das DIV verlinken? Mit JavaScript? Doch nicht wirklich, oder???

Aus welchem Grund meinst Du, das div innerhalb des Links zu brauchen?
Reicht display:block für das a-Element nicht aus?

cu,
Andreas

[Dennis]

Hi e7,

Im Großen und Ganzen: Kein Blockelement <div> innerhalb eines inline-Elements <a>. Wie soll ich dann aber sonst das DIV verlinken? Mit JavaScript? Doch nicht wirklich, oder???

Richtig, du kannst das Div nicht in ein a-Element stecken. Was willst du machen? Vermutlich willst du einen Rechteckigen Link, bzw. eine Rechteckige verlinkte Fläche.

Dazu gibt es andere Methoden: Verwende display:block, wie in http://css.maxdesign.com.au/listamatic/vertical08.htm

MfG, Dennis.

[e7]

Hi,

Dazu gibt es andere Methoden: Verwende display:block, wie in http://css.maxdesign.com.au/listamatic/vertical08.htm

Stimmt, daran hatte ich gar nicht gedacht, dass das auch geht... Auf jeden Fall vielen Dank an alle!

E7

[Fabian St.]

Hi!

nachdem ich mich bei meinem aktuellen Projekt bemühe, zur Abwechslung mal komplett valide zu schreiben (HTML 4.01 Transitional), hab ich folgendes Problem: Und zwar will ich ein <div>-Tag haben, welches anklickbar sein soll und deswegen innerhalb eines <a>-Tags steckt...

Ich antworte mal mit einer Gegenfrage: Warum soll den das ganze div-Element anklickbar sein bzw. was erhoffst du dir dadurch?

Eine Lösung hierfür ist mir nicht bekannt, weil eben - wie du bereits festgestellt hast - kein Block-Level-Element in ein inline-Element kann.

---------------------------------------------------------

Grüße,

Fabian St.

[e7]

Hi,

Ich antworte mal mit einer Gegenfrage: Warum soll den das ganze div-Element anklickbar sein bzw. was erhoffst du dir dadurch?

Es ist vielleicht etwas ungewöhnlich: Das ganze ist ein <a>-Tag, der ein <div> mit Hintergrundbild anklickbar macht, innerhalb des <div> stehen weitere Daten...

Eine Lösung hierfür ist mir nicht bekannt, weil eben - wie du bereits festgestellt hast - kein Block-Level-Element in ein inline-Element kann.

Naja, halt mit dem display:block im <a>-Tag

E7

[Fabian St.]

Hi!

Eine Lösung hierfür ist mir nicht bekannt, weil eben - wie du bereits festgestellt hast - kein Block-Level-Element in ein inline-Element kann.

Naja, halt mit dem display:block im <a>-Tag

Das "Ich weiß keine Lösung dafür" war auch auf die Feststellung bezogen, dass ein <div> nicht in einem <a> stehen darf. Aber das display:block sollte natürlich funktionieren, wenn du den Plan mit deinem <div> aufgibst :-)
---------------------------------------------------------

Grüße,

Fabian St.

[e7]

Hi,

es ist soeben ein weiteres Problem aufgetreten: Ich habe einen Link, der über ein CSS folgendermaßen gestaltet wird:

a:link, a:active {
 color: #003050;
 text-decoration: none;
 border-bottom: 1px dashed #14DCDC;
}

und die Class-Definition dazu:

.map_div {
 width: 48px;
 height: 48px;
 [...]
 display: block;
 border: 0px solid black;
}

und der Link:

<a href="..." class="map_div">(inhalt)</a>

Nun geht die Unterstreichung aber mit border-bottom nicht mehr weg???

E7

[wahsaga]

hi,

Nun geht die Unterstreichung aber mit border-bottom nicht mehr weg???

dann ist evtl. der selektor a:link stärker als der klassen-selektor. (habe ich mich ehrlich gesagt noch nicht mit beschäftigt, ob dem so ist - reine vermutung).

dann könnte es helfen, per !important der anweisung innerhalb der klasse mehr gewicht zu verleihen, http://www.devmag.net/tricks/html/html_css_14.htm.

gruß,
wahsaga

[Cheatah]

Hi,

dann ist evtl. der selektor a:link stärker als der klassen-selektor. (habe ich mich ehrlich gesagt noch nicht mit beschäftigt, ob dem so ist - reine vermutung).

Pseudoklassen-Selektoren sind ebenso spezifisch wie "normale" Klassen- oder Attribut-Selektoren.

dann könnte es helfen, per !important der anweisung innerhalb der klasse mehr gewicht zu verleihen,

Wenn möglich, sollte man auf !important verzichten (Inflationsgefahr); und ich behaupte, das ist hier möglich.

Cheatah

[Cheatah]

Hi,

a:link, a:active {

[...]

.map_div {

[...]

Nun geht die Unterstreichung aber mit border-bottom nicht mehr weg???

der a:link-Selektor hat eine höhere Spezifität als der .map_div-Selektor: 1*Klasse+1*Element gegen 1*Klasse. Sorge dafür, dass der zweite Selektor eine mindestens ebenso hohe Spezifität hat wie der erste.

Cheatah

[e7]

Hi,

der a:link-Selektor hat eine höhere Spezifität als der .map_div-Selektor: 1*Klasse+1*Element gegen 1*Klasse. Sorge dafür, dass der zweite Selektor eine mindestens ebenso hohe Spezifität hat wie der erste.

mit !important geht es; aber wie mache ich das ohne???

E7

[Cheatah]

Hi,

der a:link-Selektor hat eine höhere Spezifität als der .map_div-Selektor: 1*Klasse+1*Element gegen 1*Klasse. Sorge dafür, dass der zweite Selektor eine mindestens ebenso hohe Spezifität hat wie der erste.
mit !important geht es; aber wie mache ich das ohne???

mindestens einen der beiden Selektoren anpassen.

Cheatah

[e7]

Hi,

mindestens einen der beiden Selektoren anpassen.

imho kann ich hier keinen Selektor anpassen; das a:link muss bleiben, und das .map_div ignoriert er ja... In style="" von <a> geht's auch nicht (bzw. soll es nicht wg. zentraler CSS-Formatierung)...

E7

[Cheatah]

Hi,

imho kann ich hier keinen Selektor anpassen; das a:link muss bleiben,

*>a[href]:link

und das .map_div ignoriert er ja...

Weil es unspezifischer ist. Der Browser ignoriert übrigens nicht den Selektor, sondern entscheidet aufgrund der Kaskadierungsregeln, dass die _Eigenschaft_ ihren Wert aus dem anderen Selektor erhält. Du kannst auch diesen Selektor anpassen.

In style="" von <a> geht's auch nicht (bzw. soll es nicht wg. zentraler CSS-Formatierung)...

Gute Wahl.

Cheatah

[wahsaga]

hi,

*>a[href]:link

und da das ja nicht in jedem browser funktioniert, reduzieren wir das problem doch einfach auf die schon oft gestellte frage,

"ich möchte bestimmte links auf meiner seite anders formatieren, wie geht das?"

eine mögliche antwort lautet dann meistens:

a:link { /*allgemein*/ }

#elternelement_der_andersartigen_links a:link { /*speziell*/ }

gruß,
wahsaga

[Cheatah]

Hi,

*>a[href]:link
und da das ja nicht in jedem browser funktioniert,

richtig. Ich wollte nur aufzeigen, dass die selben Elemente mit massiv unterschiedlichen Selektoren erreicht werden.

Cheatah

[wahsaga]

hi,

richtig. Ich wollte nur aufzeigen, dass die selben Elemente mit massiv unterschiedlichen Selektoren erreicht werden.

klar, ich war nur nicht sicher, ob das auch so rüberkommt, oder ob es dem OP evtl. wie die einzig seelig machende möglichkeit erscheint :-)

gruß,
wahsaga

[e7]

Hi,

a:link { /*allgemein*/ }
#elternelement_der_andersartigen_links a:link { /*speziell*/ }

Eine ID darf ich aber nur einmal vergeben... ;-(

E7

[Cheatah]

Hi,

Eine ID darf ich aber nur einmal vergeben... ;-(

eine ID ist nicht nötig. Du hast bereits alles, was Du brauchst.

Cheatah

[wahsaga]

hi,

a:link { /*allgemein*/ }
#elternelement_der_andersartigen_links a:link { /*speziell*/ }

Eine ID darf ich aber nur einmal vergeben... ;-(

und?

#id1 a:link, #id2 a:link, #id3 a:link { /*speziell*/ }

davon abgesehen wird aber auch

.klasse a:link { /*speziell*/ }

genauso funktionieren, die spezifität ist auf jeden fall höher als von a:link solo.

gruß,
wahsaga

[Cheatah]

Hi,

die spezifität ist auf jeden fall höher als von a:link solo.

sie muss nur mindestens genauso groß sein :-)

Cheatah

[e7]

Hi,

.klasse a:link { /*speziell*/ }

funktioniert leider nicht:

.map_div a {
 border-style: none;
}

Ich habs jetzt mit !important gelöst, da das andere scheinbar recht kompliziert ist...

E7

[Ingo Turski]

Hi,

funktioniert leider nicht:

.map_div a {
 border-style: none;
}

kann ja auch nicht funktionieren, wenn ds dazugehörige HTML so aussieht:

<a href="..." class="map_div">(inhalt)</a>

hierfür wäre a.map_div der richtige Selektor.

freundliche Grüße
Ingo

[e7]

Hi,

funktioniert leider nicht:

.map_div a {
border-style: none;
}

kann ja auch nicht funktionieren, wenn ds dazugehörige HTML so aussieht:

<a href="..." class="map_div">(inhalt)</a>

hierfür wäre a.map_div der richtige Selektor.

Danke, funktioniert ja wunderbar...

.map_div {
 width: 48px;
 height: 48px;
 [...]
 overflow: hidden;
 display: block;
}

a.map_div {
 border-style: none;
}

Nun jetzt noch eine Frage: Ist das so valide? Oder soll ich einfach nur a.map_div nehmen und das .map_div raushauen (könnte ich eigentlich auch so)? Ach ja: Und warum funktioniert das .map_div eigentlich ohne a vornedran nicht? Is doch die gleiche Klasse, nur dass diese eben auf alle Elemente anwendbar ist???

E7

[Cheatah]

Hi,

Nun jetzt noch eine Frage: Ist das so valide?

ohne den geringsten Zweifel. Du kannst sogar den _selben_ Selektor beliebig oft wiederholen; von völlig verschiedenen, wie in Deinem Fall, ganz zu schweigen.

Und warum funktioniert das .map_div eigentlich ohne a vornedran nicht?

Das habe ich in diesem Thread bereits mehrfach gesagt.

Cheatah

[Ingo Turski]

Hi,

Und warum funktioniert das .map_div eigentlich ohne a vornedran nicht? Is doch die gleiche Klasse, nur dass diese eben auf alle Elemente anwendbar ist???

Du hattest aber
  .map_div a
angesprochen. Was bis auf die Speziität gleichbedeutend mit
  a.map_div a
wäre. Du verstehst?

freundliche Grüße
Ingo

[e7]

Hi,

Du hattest aber
  .map_div a
angesprochen. Was bis auf die Speziität gleichbedeutend mit
  a.map_div a
wäre. Du verstehst?

ach so, wenn man es so schreibt, dann ist es sogar extrem einleuchtend...

E7

[wahsaga]

hi,

imho kann ich hier keinen Selektor anpassen; das a:link muss bleiben, und das .map_div ignoriert er ja...

nein, .map_div wird nicht ignoriert - aber es hat hier halt weniger gewicht. du brauchst also etwas mit mehr gewicht, als eine klasse.

gruß,
wahsaga

[e7]

Hi,

nein, .map_div wird nicht ignoriert - aber es hat hier halt weniger gewicht. du brauchst also etwas mit mehr gewicht, als eine klasse.

Und genau da ist das Problem - wie mache ich das? Hier der genaue Ausschnitt des HTML-Codes:

<td class="map_td_3"><a href="index.php?id=cave&cid=51" title="Bleiweil (ID: 51)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td>

E7

PS: Hier mal der leicht gekürzte HTML-Code der betreffenden Datei:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<title>stone age</title>
</head>
<body>
<div class="top_bar"><img src="design/logo.gif" alt="StoneAge"/></div>
<div class="top_right"><img src="design/logo_right.jpg" alt="Das Steinzeitspiel"/></div>
<div class="information"><b>Rohstoffe in Höhle Dolchheith (4|9)</b><br/><span title="Max: 10"><b>Einwohner:</b> 101008 (0)</span> <span title="Max: 5000"><b>Nahrung:</b> 27490 (5)</span> <span title="Max: 3000"><b>Holz:</b> 27925 (5)</span> <span title="Max: 3000"><b>Stein:</b> 28539 (5)</span> <span title="Max: 3000"><b>Metall:</b> 29090 (0)</span> <span title="Max: 3000"><b>Schwefel:</b> 29090 (0)</span> <span title="Max: 1500"><b>GG:</b> 14545 (0)</span></div>

<div class="navigation"><a href="index.php?id=uebersicht" class="navi_link">&Uuml;bersicht</a>
<a href="index.php?id=karte" class="navi_link">Landkarte</a>

<div class="content"><h1>Landkarte</h1>
<table class="tabellenrahmen">
<td class="map_td_2"><a href="index.php?id=cave&cid=1" title="Elbendiek (ID: 1)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=11" title="Todesgarten (ID: 11)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_2"><a href="index.php?id=cave&cid=21" title="Kugelbruch (ID: 21)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_2"><a href="index.php?id=cave&cid=31" title="Pickelhof (ID: 31)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_1"><a href="index.php?id=cave&cid=41" title="Gnubbelgatt (ID: 41)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_3"><a href="index.php?id=cave&cid=51" title="Bleiweil (ID: 51)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_3"><a href="index.php?id=cave&cid=61" title="Schenkelhügel (ID: 61)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_3"><a href="index.php?id=cave&cid=71" title="Augenbronn (ID: 71)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=81" title="Greifsrade (ID: 81)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=91" title="Spelzengatt (ID: 91)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td></tr>
<td class="map_td_3"><a href="index.php?id=cave&cid=2" title="Pilsklotzen (ID: 2)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=12" title="Finkenbad (ID: 12)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=22" title="Sockenwasser (ID: 22)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_1"><a href="index.php?id=cave&cid=32" title="Eisenstock (ID: 32)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=42" title="Riesenhag (ID: 42)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_1"><a href="index.php?id=cave&cid=52" title="Dunkelhof (ID: 52)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_4"><a href="index.php?id=cave&cid=62" title="Fahleg (ID: 62)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_1"><a href="index.php?id=cave&cid=72" title="Affenhütte (ID: 72)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_3"><a href="index.php?id=cave&cid=82" title="Speichelhütte (ID: 82)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td><td class="map_td_3"><a href="index.php?id=cave&cid=92" title="Kadaverfest (ID: 92)" class="map_div" style="background-image: url(pictures/pixel.gif); "><span class="map_info">&nbsp;</span></a></td></tr>

</table><p class="smallinfo" title="Diese Werte nehmen keinen Einfluss auf das Spielgeschehen">
php: execution time: 0.067 seconds</p></div></body></html>

Und hier mal die CSS-Datei auch leicht gekürzt:

a:link, a:active {
 color: #003050;
 text-decoration: none;
 border-bottom: 1px dashed #14DCDC;
}

a:visited {
 text-decoration: none;
 border-bottom: 1px dashed #14DCDC;
 color: #001030;
}

b {
 font-weight: bold;
}

input, textarea {
 border: 1px dashed #103050;
 background-color: #50C0C0;
}

input:hover {
 background-color: #80E0E0;
}

.navi_link:link, .navi_link:visited, .navi_link:active {
 color: #000000;
 display: block;
 font-weight: bold;
 border: none;
 padding: 1px;
 text-transform: lowercase;
}

.navi_link:hover {
 color: white;
 border-left: 2px solid #50C0C0;
}

.top_bar {
 background-image: url(design/back_top.gif);
 background-repeat: repeat-x;
 width: 100%;
}

.top_right {
 position: absolute;
 right: 0px;
 top: 0px;
}

.navigation {
 position: absolute;
 left: 0px;
 top: 140px;
 width: 200px;
 text-align: center;
}

.content {
 position: absolute;
 left: 220px;
 top: 120px;
 right: 2px;
}

.tabellenzeile {
 background-image: url(design/back_table.gif);
 background-repeat: repeat-x;
}

.tabellenrahmen {
 border: 1px solid #10D0D0;
 border-spacing: 0px;
 border-collapse: collapse;
}

.map_div {
 width: 48px;
 height: 48px;
 max-width: 48px;
 max-height: 48px;
 min-width: 48px;
 min-height: 48px;
 overflow: hidden;
 display: block;
 border-style: none;
}

.map_td_1 {
 background-image: url('pictures/map_gebirge.gif');
}

.map_info {
 font-size: 0.6em;
 color: black;
}

[Cheatah]

Hi,

nein, .map_div wird nicht ignoriert - aber es hat hier halt weniger gewicht. du brauchst also etwas mit mehr gewicht, als eine klasse.
Und genau da ist das Problem - wie mache ich das?

entweder hat der eine Selektor einen Element-Selektor zu viel, oder der andere einen zu wenig.

Hier der genaue Ausschnitt des HTML-Codes:

Irrelevant. Es existieren zumindest drei bombentriviale Lösungen; eine davon schränkt bewusst die Funktionalität ein.

<td class="map_td_3"><a href="index.php?id=cave&cid=51"

Das "&"-Zeichen *muss* kodiert werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<link rel="stylesheet" href="style.css" type="text/css"/>

Warum sagst Du HTML und schreibst XHTML? Dein Code ist invalide. Und bitte poste nur relevanten Code, ggf. tut es auch ein Link.

Cheatah

[e7]

Hi,

Das "&"-Zeichen *muss* kodiert werden.
Warum sagst Du HTML und schreibst XHTML? Dein Code ist invalide.

Meint der Validator vom w3c aber nicht, der gratuliert mir sogar zu meinem guten Code...

E7

[Cheatah]

Hi,

Das "&"-Zeichen *muss* kodiert werden.
Warum sagst Du HTML und schreibst XHTML? Dein Code ist invalide.
Meint der Validator vom w3c aber nicht, der gratuliert mir sogar zu meinem guten Code...

dann musst Du etwas anderes validiert haben.

Cheatah

[e7]

Hi,

dann musst Du etwas anderes validiert haben.

Äh, ja, nach langen suchen habe ich festgestellt, das Mozilla beim Speichern des HTML-Dokumentes den Quellcode automatisch anpasst und das & encodiert...

E7

[at]

Hallo.

du brauchst also etwas mit mehr gewicht, als eine klasse.

http://www.googlefight.com/cgi-bin/compare.pl?q1=sumo-ringer&q2="ex-kanzler"&B1=Make+a+fight!&compare=1&langue=us
MfG, at