infobox w3c conform

Luziefer · #1 (**permalink**) 04.02.2011, 19:06

hallo,

ich habe ein klitzekleines Problem bei dem ich bald am Verzweifeln bin

Ich habe eine Infobox wo ich ein Tabellen layaut verwenden müsste, aber w3c
sagt mir immer das table in span nicht möglich ist, nun habe ich es mit zur besseren ansicht mit div gemacht, da ich mit diesen Inline befehlen nicht ganz zu recht komme.
Ich suche eine möglich das so darzustellen das es wie eine Tabelle auschaut aber innerhalt des <span> w3c conform bleibt.

Kann mir da einer helfen und mir vieleicht in einem 3 zeiler ne lösung mitteilen?

hier mal der code mit der css dazu

Zitat:

<div class="date"><a class="infobox_">Maine-Coon Kurzinfo:<img src="../images/date_02.png" alt="anfrage" width="14" height="11" style=" border: 0px;" /><span><br />
<div class="info_div">
<div class="td"><strong>Maine-Coon</strong></div>
<div class="info_left">Schulterhöhe</div>
<div class="info_right">bis 40 cm</div>
<div class="info_left">Länge</div>
<div class="info_right">100 - 120 cm (Nase bis Schwanz)</div>
<div class="info_left">Gewicht</div>
<div class="info_right">Kater: 6,5 - 9 kg<br />
Katze: 5 - 6,5 kg</div>
<div class="info_left">erlaubte Farben</div>
<div class="info_right">Schwarzserie B<br />
Rotserie O<br />
Verdünnung D<br />
Silber I<br />
Piebald-Scheckung S<br />
epistatisches Weiß W</div>
<div class="info_left">nicht erlaubte Farben</div>
<div class="info_right">Braunserien bb,<br />
Verdünnungsmodifizierer dmdm<br />
Maskenfaktoren</div>
<div class="info_left">erlaubte Fellzeichnung</div>
<div class="info_right">gestromt (blotched, classic)<br />
getigert (mackerel)<br />
zeichnungsfrei (non-agouti)</div>
<div class="info_left">nicht erlaubte Fellzeichnung</div>
<div class="info_right">getupft (spotted)<br />
getickt</div>
</div>
</span>
</a>
</div>

und die Css

Zitat:

.date{
height:27px;
padding-top:
10px;z-index:10;
width:320px;
}

.info_div{
display:inline-block;
border:thin solid #FEFEFC;
width:313px;
}
a.infobox_{
color:#000066;
text-decoration:underline;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;font-weight:bold;
}

a.infobox_:hover{
cursor:help;
color:#0033CC;
}

a.infobox_ span{
display:none;
position:absolute;
}

a.infobox_:hover span,a.infobox:focus span,a.infobox:active span{
display:block;
color:#000;
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:12px;text-align:left;
background-color:#59C1DE;
border:thin solid #000;
text-decoration:none;
padding:10px;
z-index:30;
width:320px;
}

.info_left{
width:112px;
float:right;
border-top-width:thin;
border-top-style:solid;
border-top-color:#FFFFFF;
}

.info_right{
width:200px;
border-top-width:thin;
border-right-width:thin;
border-top-style:solid;
border-right-style:solid;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
}

vieleicht habe ich ja was übersehen. Über eine Hilfe würde ich mich freuen

gruß

verlinkung
http://www.psd-tutorials.de/forum/46...ml#post1695684

TanjaP. · #2 (**permalink**) 05.02.2011, 16:31

Schau mal bei mir auf die Hundeseite, da habe ich auch Infoboxen mit span drin und ein tabellenähnliches Konstrukt, evtl. hilft es Dir weiter!

Tanja

Luziefer · #3 (**permalink**) 05.02.2011, 19:09

es geht, aber das bringt nicht den efeckt den ich anstrebe, das ist ja das kleine problem.

ich wollte das schon so dargestellt bekommen als wenn ich eine tabelle habe.
da ich links den begriff und rechts dazu die erklärung brauche.

ich habe es auch schon mit dl, dt und dd versucht, aber das ergebniss ist nicht so wie es sein soll da angezeigt wird

Text:
Erklärung
Text
Erklärung

es aber

begriff: erklärung

begriff: erklärung

sein sollte.
Ich sag mal wenns nicht weiter stört kann ich mit diesen 2 fehlern bei w3c leben, aber wollte es lieber conform haben nun.

Aber Danke für dein Tipp und das Beispiel zum anschauen

Manfred62 · #4 (**permalink**) 05.02.2011, 20:02

Zitat:

Zitat von Luziefer

ich habe es auch schon mit dl, dt und dd versucht, aber das ergebniss ist nicht so wie es sein soll da angezeigt wird

Text:
Erklärung
Text
Erklärung

es aber

begriff: erklärung

begriff: erklärung

das geht schon --> http://www.dyingeyes.de/2008/04/01/d...-buche-stehen/

Ansonsten: Popups, welche so groß sind wie die eigentliche Webseite??
Muss das sein? Das guckt sich doch keiner an, viel zu lang zum lesen.
Zudem Probleme in diversen Browsern (IE6/7, Webkit..)

Die Grafik date_02.png gehört ins css (.infobox) nicht ins html.

Wenn diese Popups sein müssen, dann nur kleine. Ansonsten extra Seite.
Eventuell kannst sowas auch mit js machen.

Manfred

(BTW: Meinung zu Crossposts ist ja bekannt..?)

Luziefer · #5 (**permalink**) 05.02.2011, 21:20

hallo Manfred,

habe es auf eine Extra Seite nun gemacht. Somit ist auch der Fehler weg nun.
halt klicken angesagt nun an dieser stelle.

gruß

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Infobox Positionierung	designxx	CSS	10	30.12.2008 16:38
Infobox soll sichtbar bleiben	Joki	CSS	1	05.12.2008 14:20
W3C Validator Fehlermeldungen	5enses	(X)HTML	5	05.06.2007 15:54
fragen zu w3 conform	dr4g0n	CSS	9	06.07.2006 21:33