inline elemente in span

Luziefer · 04.02.2011

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

<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

.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ß

cebito · 04.02.2011

AW: inline elemente in span

Warum steht hier nicht dabei, das du es hier infobox w3c conform - XHTMLforum auch schon gefragt hast? Und ehrlich gesagt, werd ich über dein Vorhaben nicht schlau. Stell mal online, was du dir vorstellst und wie es für dich richtig aussieht, wir sagen dir dann, was du ändern musst um W3C-konform zu bleiben.

Luziefer · 04.02.2011

AW: inline elemente in span

@ cebito, geh einfach auf und zieh die maus auf beschreibung. da geht dann die info box auf. aber da sie nicht w3c conform ist kommt es eben zu einem fehler den ich gerne weg haben möchte.
Im XHTML Forum hat sich keiner wegen dem Teil gemeldet, also hier nochmal versuchen.
gruß

cebito · 04.02.2011

AW: inline elemente in span

Luziefer schrieb:
Im XHTML Forum hat sich keiner wegen dem Teil gemeldet, also hier nochmal versuchen.
gruß

Geduld ist eine Tugend, der Thread ist grad 4 Stunden alt. Und ich möchte, das du auch dort nach hier verlinkst, denn es wäre ziemlich egoistisch hier oder auch dort hilfsbereite Leute nach einer Lösung suchen zu lassen, die du vielleicht in diesem Moment in einem dritten Forum schon bekommst.
Und jetzt schau ich's mir mal an...

Luziefer · 04.02.2011

AW: inline elemente in span

das ist nur die fehlermeldung die ich immer bekomme.

Das Tag: "div" ist in "span" nicht zulässig. Es ist nur in applet, blockquote, body, button, center, dd, del, div, fieldset, form, iframe, ins, li, map, noframes, noscript, object, td, th zulässig.

unteranderem auch dort angefragt infobox w3c conform - XHTMLforum

hoffe das ist besser nun

sokie · 05.02.2011

AW: inline elemente in span

andersherum ist es einfacher und klarer: inlineelemente wie span dürfen keine blockelemente beinhalten. Ist eigentlich ganz einfach.
Die Frage ist eigentlich, warum das Hüllelement ein span sein muss...?!

Luziefer · 05.02.2011

AW: inline elemente in span

hallo soki,

ich weiß nicht was sonst ausser <span> noch geht für eine aufklapp box, infobox
bei anderen befehlen ist die box dann immer sichtbar nur bei span ist sie eben solange verborgen bis du mit der maus drauf gehst, erst dann ist sie sichtbar.
Ausser unter Crome derzeit. da ist diese stelle derzeit immer sichtbar, warum weiß ich nicht. da ich ausser den punkt Beschreibung noch einen punkt habe der Maine Coon Kurzinfo heißt, genauso aufgebaut ist aber dieser ist unter Crome richtig in der Darstellung.
Obwohl bei beide beim Textfeld davor und dahinter ein <p> ........ </p> ist. und nur unter Beschreibung wird mir das nicht richtig dargestellt, aber es wird kein Fehler angezeigt.
also unter beiden sachen lautet es
<p> text <a> kurzinfo </a> <span> <div> text </div> </span> <a/> </p> wenn du crome hast scha es dir dann einmal darunter an da ist zu sehen was ich meine.
aber das eigendliche Problem ist mit den Inline Element, habe da schon die meisten probiert, aber dadurch wird die darstellung komplett zerstört und eben nicht wie eine tabelle angezeigt.

Doitsu · 05.02.2011

AW: inline elemente in span

Code:

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

Deswegen sind span Elemente nur sichtbar, wenn du mit der Maus drauf bist.
Aender die zeilen von span auf div, dann sind nur Container sichtbar.
Fur naehere Informationen:
CSS 4 You - The Finest in Stylesheets

Luziefer · 05.02.2011

AW: inline elemente in span

es geht mit div, aber dann habe ich wieder das problem mit dem a tag, da <div> in <a> nicht möglich ist und somit wieder einen fehler bringt.

sokie · 05.02.2011

AW: inline elemente in span

Doitsu meine nur die Spans die du als Hüllelement benutzt auf div zu ändern. Innerhalb der a-Elemente müssen es natürlich span sein:

Code:

<div class="date"><a class="infobox_">Maine-Coon   Kurzinfo:<img src="../images/date_02.png" alt="anfrage" width="14"   height="11" style=" border: 0px;" />
<[B][COLOR=Red]span[/COLOR][/B]><!--<< hier statt span ein div--><br />

diesen natürlich wieder als </div> schliessen

Luziefer · 05.02.2011

AW: inline elemente in span

Habe das ganze auf eine neue Seite gebracht, war die einfachste und schnellste lösung.
Schaut auch hoffe ich besser so aus als mit den etwas zu großem Fenster.

gruß