span und div

[TanjaP.]

Ich möchte eine Info-Seite haben, bei der beim hovern Informationen angezeigt werden. Den passenden Code habe ich aus dem Netz und optisch für mich passend gemacht. Nur leider validiert das ganze nicht, weil div in span liegen. Wie bekomme ich das ganze genauso angezeigt und validiert?

ein Teil des html:

<a href="#">HD A<span>
<div class="textdrunter"><img src="a1.jpg" alt="" />
<p>FCI: HD A / normal<br />
BRD: A1<br />
SV: a, normal<br />
OFA: excellent<br />
BVA/KC: 0</p></div>
<div class="textdrunterrechts"><img src="a2.jpg" alt="" />
<p>FCI: HD A / normal<br />
BRD: A2<br />
SV: a, normal<br />
OFA: good<br />
BVA/KC: 1-3</p></div>
</span></a>

das dazugehörige css:

div#listequer {
  float: left; 
  position: relative; 
  top: 10px; 
  left: 0px; 
  width: 400px; 
  height: 180px; 
  z-index: 2;
  }
  
div#listequer a { 
  text-align: center; 
  padding: 3px 10px; 
  margin: 0 0 1px; 
  text-decoration: none; 
  color: black; 
  }
  
div#listequer a:hover {
  color: #441111; 
  font-style : italic;
  }

div#listequer a span {
  display: none;
  }

div#listequer a:hover span { 
   display: block;
   position: absolute; 
   top: 45px;
   width: 514px;
   padding: 5px; 
   z-index: 100;
   color: #000000; 
   background: #ecddb6;
   font-style : italic;
   text-align: center;
   border: 1px dashed black;
   }
   
.textdrunter {width: 250px; float: left;}
.textdrunterrechts {width: 250px; float: left; margin-left: 12px;}

und der Link zur Seite (noch nicht offiziell, ein Bild fehlt noch)
http://www.wolfshunde-herne.de/gesundheit/hd.php

Tanja

[hero-master]

Mach aus dem Span ein Div. Dann aber bekommst du es immer noch nicht validiert, da sich Divs (Blockelement) in dem Link (a-Tag: Inlineelemenet) befinden und das geht nunmal nicht.
Wie wäre es stattdessen mit ein wenig Javascript: http://flowplayer.org/tools/tooltip.html

[TanjaP.]

Du glaubst gar nicht, in was ich die divs schon alles verwandelt habe.
Javascript möchte ich nicht (sonst können die,die´s deaktiviert haben nix sehen).

Google schon den ganzen Tag, aber immer ist nur von einem Bild im span die Rede, niemals zwei nebeneinander, die dann auch noch den jeweils passenden Text darunter haben.

Tanja

[hero-master]

Javascript möchte ich nicht (sonst können die,die´s deaktiviert haben nix sehen).

Musst du auf die Zielgruppe schauen, aber generell hat heutzutage fast jeder JS aktiviert.

Google schon den ganzen Tag, aber immer ist nur von einem Bild im span die Rede, niemals zwei nebeneinander, die dann auch noch den jeweils passenden Text darunter haben.

Mach es doch so, es funktioniert doch! Den User interessiert es doch nicht die Bohne, ob die Site valide ist oder nicht, solange sie funktioniert

Ich schuas mir heute Abend zu Hause an.

[TanjaP.]

Ja, eigentlich interresiert es fast niemanden, ob es valide ist oder nicht, hauptsache es funktioniert.
Ich bin da aber etwas ehrgeizig (oder bekloppt), - (möglichst) keine Tabellen, kein js und valide

Tanja

Ich hab´s:

die div´s innerhalb des span durch dfn ersetzen und beim Text die <p> raus.
Tada ..

<a href="#">HD B<span>
<dfn class="textdrunter"><img src="b1.jpg" alt="" /><br />
FCI: HD B / borderline<br />
BRD: B1<br />
SV: a, fast normal<br />
OFA: good<br />
BVA/KC: 4-6</dfn>
<dfn class="textdrunterrechts"><img src="b2.jpg" alt="" /><br />
FCI: HD B / borderline<br />
BRD: B2<br />
SV: a, fast normal<br />
OFA: fair<br />
BVA/KC: 7-8</dfn>
</span></a>

freu freu freu

[kayyy]

Ich verstehe Leute nicht, die es so umständlich machen und kein Javascript nutzen. Ist mir unbegreiflich

Warum genau möchtest du kein Javascript nutzen?

[max.m]

Warum genau möchtest du kein Javascript nutzen?

Vermutlich immer noch deshalb:

Javascript möchte ich nicht (sonst können die,die´s deaktiviert haben nix sehen).

[TanjaP.]

Ich schaue sehr viel z.B. auf Katzenzüchterseiten. Die allerwenigsten sind vernünftig und korrekt "codiert", die allermeisten mit Frames, Tabellen und aus Baukästen.
Wenn ich mir nur 5% davon mit deaktivierten js anschaue, sehe ich noch nicht einmal mehr ein Menu, weil es einfach immer wieder ohne Nachzudenken drauf geklatscht wird.

Ich ziehe Lösungen ohne js vor, warum genau kann ich nicht sagen, ich find´s einfach besser mit php oder css-Lösungen; in der Regel "fummel" ich auch so lange, bis es so läuft wie ich es gerne hätte.
Einfach kann jeder...

Achso: im IE7 und darunter hoppelt das ganze jetzt auch nicht mehr zur Seite. Dazu habe ich bei div#listequer a:hover span ein left: 51px hinzugefügt.
Tanja