Probleme mit Validität bei Verschachtelung von SPAN mit TABLE

hinkel11

Mitglied
Gelöst: Probleme mit Validität bei Verschachtelung von SPAN mit TABLE

Hallo,

ich bin gerade dabei die folgende Seite zu validieren:
http://www.corona-gehren.de/main/index.php?Itemid=168

Der W3C-Validator gibt mir dabei folgende Fehlermeldung aus: "element div not expected" oder so. Liegt augenscheinlich daran, dass ich ein div in ein span gesetzt habe, was niht valide ist.

Das Problem besteht darin, dass ich nicht so recht weis, wie ich das beheben kann, da dieses <a><span><span> (wenn man sich mal den Quellcode anschaut) automatisch gesetzt wird, da es automatisch von einem Joomla-Tooltip-Plugin gesetzt wird. Im Editor, dort wo ich das ganze eingegeben habe, erscheint daher kein <a><span><span> sondern ein {tooltip}, natürlich auch mit den entsprechenden Schlusstags.

Dies wäre z.B. der HTML-Code für 1 Bild mit Tooltip (die betreffende Zeile ist hervorgehoben), so wie er im Joomla-Editor steht:
HTML:
<td>
<div class="shadow5">
{tooltip}
<img src="http://www.tutorials.de/forum/images/Spielerfotos/Fadda-new-crown.jpg" style="z-index: 4 !important; border: 1px solid #3a3a3a" alt=" " />
{end-link}
<img src="templates/corona03/images/chromeg.png" style="behavior: url('./modules/mod_fisheye_menu_camp26/fisheye_menu/png.htc'); margin: 0 auto" alt=" " width="50" border="0" height="69" />
<div style="padding-left: 5px; line-height: 1.5; font-family: Arial,JanicesHand,Lucida Calligraphy,Times New Roman; color: #ffffff; font-size: small">
Name: Ronny Behrendt <br /> 
Geburtstag: 26. April 1967 <br /> 
Beruf: Maurer <br /> 
Rückennummer: 9 <br /> 
Position: Zentrales Mittelfeld <br /> 
Fan von: Hamburger SV
</div>
{end-tooltip}
</div>
</td>

Für {tooltip} erscheint im Seitenquelltext <a><span><span>.

Ich habe probiert den div-Container nach oben zu nehmen, d.h. direkt nach <td> -> Ergebnis: kein Text mehr zu sehen im Tooltip. Wenn ich den div-Container direkt vor {tooltip} ist wieder das gleiche Ergebnis zu beobachten, also kein Text.

Nun habe ich im php-Code vom Tooltip-Plugin nachgeschaut und folgendes gefunden:

PHP:
$string = $row->text;
	$patterns[0] = '/{tooltip}/';
	$patterns[1] = '/{end-link}/';
	$patterns[2] = '/{end-tooltip}/';
	$replacements[2] = '<a href="#" class="tooltip">';
	$replacements[1] = '<span><span>';
	$replacements[0] = '</span></span></a>';
	
	$row->text = preg_replace($patterns, $replacements, $string);

Bei den beiden <span>-Tags habe ich nun testweise mal ein style="display: block" hineingeschrieben. Dadurch wird das gesamte Layout total aufgebrochen. t also auch nicht.
Was kann ich sonst noch machen?
Danke.
 
Zuletzt bearbeitet:
Hi,

Inline-Elemente, wie das genutzte <a>- und <span>-Element, dürfen keine Blockelemente, wie das <table>- und <div>-Element, sondern nur weitere Inline-Elemente oder Text enthalten - siehe hierzu die HTML-Referenz für Inline-Elemente.

Wenn das Markup valide sein soll, müsstest du demnach den inneren Aufbau des Tooltips anstelle der Tabelle und dem DIV-Block mit Inline-Elementen konstruieren, denn mit einer display:block-Deklaration für das umschliessende <span>-Element validiert der HTML-Code weiterhin nicht.

mfg Maik
 
Muss nochmal nachhaken, weil ich niht genau verstanden hab, was ich nun machen soll. Also die Ursache ist klar-> kein Blockelement in einem Inline-Element. Doch was muss ich nun machen im tooltip-Code? Was ich verstanden hab ist, dass ich den betreffenden div-Container durch ein inline-Element ersetzen soll. Hab ich probiert indem ich das div durch ein weiteres span ersetzt habe. Klappt aber auch nicht. Dann hab ich aus Verzweiflung das div einfach mal durch font ersetzt. Klappt aber nur halb, d.h. nicht alle css-Anweisungen werden übernommen, wie es für das font-Tag zu erwarten war.
 
Damit hier keine Mißverständnisse aufkommen, wir reden von diesem DIV-Block:
HTML:
<div style="padding-left: 5px; line-height: 1.5; font-family: Arial, Papyrus,JanicesHand,Lucida Calligraphy,Times New Roman; color: #ffffff;font-size: small"> ... </div>

Wenn du dies in ein <span>-Element umwandelst, muß es zusätzlich "Block-Level-Charakteristika" erhalten, damit die padding-left- und line-height-Eigenschaft auch Wirkung zeigt.

mfg Maik
 
Ja, genau um den div-Container geht es. Wenn ich den nun ersetze durch span dann wird der tooltip irgendwie geteilt in der Mitte. Und das liegt nun am line-height oder wie?
Im Anhang mal ein Screenshot.
 

Anhänge

  • screen.jpg
    screen.jpg
    67,3 KB · Aufrufe: 9
Besitzt dieses <span> die angesprochene "Block-Level-Charakteristika" mittels display:block?

mfg Maik
 
Ja, hab im span ein display: block hinzugefügt.
Code sah also so aus:
Code:
<span style="display: block; padding-left: 5px; line-height: 1.5; font-family: Arial,JanicesHand,Lucida Calligraphy,Times New Roman; color: #ffffff; font-size: small">Name: Ronny Behrendt <br /> Geburtstag: 26. April 1967 <br /> Beruf: Maurer <br /> Rückennummer: 9 <br /> Position: Zentrales Mittelfeld <br /> Fan von: Hamburger SV</span>

Das Ergebnis sieht aus wie auf dem Screenshot.
 
Dann liegt das am Tooltip-CSS purecsstooltip.css, dessen Selektoren für die einzelnen <span>-Tags auch auf dieses <span>-Element Einfluß haben.

Mit diesem Code wird der Tooltip bei mir nicht zerschossen dargestellt:
HTML:
<a href="#" class="tooltip">
   <img src="http://www.corona-gehren.de/main/images/Spielerfotos/Fadda-new-crown.jpg" style="z-index: 4 !important; border: 1px solid #3a3a3a" alt=" " />
   <span style="padding-left: 5px; line-height: 1.5; font-family: Arial,JanicesHand,Lucida Calligraphy,Times New Roman; color: #fff; font-size: small;">
         <img src="http://www.corona-gehren.de/main/templates/corona03/images/chromeg.png" style="behavior: url('./modules/mod_fisheye_menu_camp26/fisheye_menu/png.htc'); margin: 0 auto; display:block;" alt=" " width="50" border="0" height="69" />
         Name: Ronny Behrendt <br /> Geburtstag: 26. April 1967 <br /> Beruf: Maurer <br /> Rückennummer: 9 <br /> Position: Zentrales Mittelfeld <br /> Fan von: Hamburger SV
    </span>
</a>
CSS:
a.tooltip{
        text-decoration: none;
        position: relative;
}
a.tooltip:hover{
        padding: 0;
        border:none;
}
a.tooltip span {
        display: none;
        position: absolute;
        background-color: #000000;
        border: 1px solid #d9d9d9;
        color: black;
        text-decoration: none;
        width: 200px;
        -moz-opacity: 0.9;
        filter:alpha(opacity=90);
        opacity: 0.9;
        -moz-border-radius:3px;
        bottom: 100px;
        left: 60px;
        text-align: left;
}
a.tooltip:hover span {
        display: block;
}

mfg Maik
 
@Maik

Hab das mal probiert mit dem Code den du mir gegeben hast. Funktioniert bei mir leider gar nicht. Keine Ahnung was ich da falsch gemacht hab.

Also, ich hab ne SIcherung von der Seite plus der purecsstooltip.css gemacht. Dann hab ich das mit {tooltip} usw. entfernt und durch deinen Code ersetzt. Dann habe ich den gesamten Inhalt der purecsstooltip durch deinen Code ersetzt.
Ergebnis sieht wie folgt aus:
http://www.corona-gehren.de/main/index.php?Itemid=168

Was ging da schief?
 
Nimm mal im Inline-Style des <span>-Elements die display:block-Deklaration heraus, damit der Tooltip zunächst versteckt wird.

Denn diese Eigenschaft bekommt das Element erst mit diesem Selektor zugewiesen:
CSS:
a.tooltip:hover span {
        display: block;
}

Desweiteren fehlt da noch eine Angabe zu z-index, damit der Tooltip nicht vom benachbarten Photo überdeckt wird.

mfg Maik
 
Zurück