inline-elementen breite zuweisen

[steffenb]

hallo!

ich möchte, wie viele andere, von meinem tabellenlayout zum div-layout wechseln. nur stoße ich bereits bei der ersten zeile auf probleme.

der tabellencode lautet:

<table cellpadding="0" cellspacing="0" style="background:#444444;font-size:7pt;font-weight:bold;width:950px;border:2px solid #444444;border-bottom:none;padding:2px">
      <tr>
        <td style="width:33%;text-align:left;">alternativ</td>

<td style="width:33%;text-align:center;">informativ</td>

<td style="width:33%;text-align:right;">unabhängig</span></td>
</table>

dies wollte ich so umschreiben:

<div id="#firstrow">
   <span style="text-align:left">alternativ</span>
   <span style="text-align:center">informativ</span>
   <span style="text-align:right">unabhängig</span>
</div>

css dazu:
#firstrow {margin-left:auto;margin-right:auto;width:950px;background:#444444;font-weight:bold;font-size:10px;}

#firstrow span {width:33%}

im ie gibt es da ja keine probleme, aber im ff, opera und bei netscape. in diesen browsern lassen sich inline-elemente keine breitenangaben zuweisen. setze ich "#firstrow span" auf "display:block" funktioniert es, mit dem problem das jeder span-tag in einer neuen zeile angezeigt wird.

weiß jemand, wie ich das umgehen kann?

mfg,
steffenb

[Ingo Turski]

Hi,

ich möchte, wie viele andere, von meinem tabellenlayout zum div-layout wechseln. nur stoße ich bereits bei der ersten zeile auf probleme.

und machst bereits den ersten Denkfehler: Das HTML-Element DIV hat nichts mit einem CSS-basiertem Layout zu tun.

dies wollte ich so umschreiben:

<div id="#firstrow">
   <span style="text-align:left">alternativ</span>
   <span style="text-align:center">informativ</span>
   <span style="text-align:right">unabhängig</span>
</div>

Warum SPANs? Dies sind inline-Elemente, die ihrerseits nur inline-Elemente enthalten dürfen. Und was soll dort hinein? Daran sollte sich entscheiden, a) welche Elemente verwendet werden und b) ob es sinnvoll wäre, hier DIVs zur Gruppierung zu verwenden.

setze ich "#firstrow span" auf "display:block" funktioniert es, mit dem problem das jeder span-tag in einer neuen zeile angezeigt wird.

Lies bitte http://de.selfhtml.org/css/layouts/ hierzu.

freundliche Grüße
Ingo

[Mathias Brodala]

Hallo steffenb.

ich möchte, wie viele andere, von meinem tabellenlayout zum div-layout wechseln. nur stoße ich bereits bei der ersten zeile auf probleme.

Und genau deshalb solltest du hier parallel mitlesen.

#firstrow span {width:33%}

im ie gibt es da ja keine probleme, aber im ff, opera und bei netscape. in diesen browsern lassen sich inline-elemente keine breitenangaben zuweisen.

Dein IE befindet sich im Quirksmodus oder ist älter als Version 6. Wäre dem nicht so, würde auch er die Breitenangabe ignorieren, welche bei Inlineelementen, wie span es eines ist, nicht gelten dürfen:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

Einen schönen Freitag noch.

Gruß, Mathias