SPAN soll eine gewisse Breite haben

[Andreas NEU]

Ich möchte meine Ausgabe formatieren:

<span style="width:100px; font-weight:bold;">Preis:</span>

aber die Breite wird nicht angezeigt?

Kann mir da jemand auf die Sprünge helfen?

Andreas

[Der Martin]

Hallo,

<span style="width:100px; font-weight:bold;">Preis:</span>
aber die Breite wird nicht angezeigt?

das ist richtig so.
Die width-Eigenschaft ist nur bei Blocklevel-Elementen wirksam, nicht aber bei inline-Elementen.

Formatiere also das span-Element zu einem Blockelement um, oder -noch besser- überlege, ob ein anderes Element die Bedeutung nicht noch besser wiedergibt. Womöglich eines, das "von Natur aus" schon ein Blockelement ist.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Die width-Eigenschaft ist nur bei Blocklevel-Elementen wirksam

Nein, auch bei etlichen anderen …

nicht aber bei inline-Elementen.

… sogar bei gewissen Inlinelevel-Elementen.

“'width' […] Applies to: all elements but non-replaced inline elements, table rows, and row groups” [CSS21 §10.2]

Die Eigenschaft wirkt bspw. auch auf Elemente, deren 'display'-Eigenschaft den Wert "inline-block", "table-column" oder "table-cell" hat, sowie auf ersetzte Inlinelevel-Elemente ('img', 'object', 'input').

Qapla'

[Der Martin]

Hallo,

Die width-Eigenschaft ist nur bei Blocklevel-Elementen wirksam
Die Eigenschaft wirkt bspw. auch auf Elemente, deren 'display'-Eigenschaft den Wert "inline-block", "table-column" oder "table-cell" hat, ...

das sind ja dann auch Blocklevel-Elemente. Ich habe bewusst den Ausdruck "Blockelemente" vermieden, um nicht exklusiv diejenigen mit display="block" anzusprechen, sondern auch sinnverwandte.

sowie auf ersetzte Inlinelevel-Elemente ('img', 'object', 'input').

Die hatte ich in der Tat nicht bedacht, danke für die Ergänzung.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Die Eigenschaft wirkt bspw. auch auf Elemente, deren 'display'-Eigenschaft den Wert "inline-block", "table-column" oder "table-cell" hat, ...

das sind ja dann auch Blocklevel-Elemente.

Nö. [CSS21 §9.2.1]

Qapla'

[Klawischnigg]

Hi there,

Ich möchte meine Ausgabe formatieren:

<span style="width:100px; font-weight:bold;">Preis:</span>

aber die Breite wird nicht angezeigt?

Wenn Du zu den Stylesheetanweisungen noch ein display:block hinzufügst, wirds funktionieren. Das kann aber unter Umständen dann auch ungewünschte Nebeneffekte haben. Möglicherweise ist <span> einfach das falsche Auszeichnungselement...

[Gunnar Bittersmann]

@@Klawischnigg:

nuqneH

Wenn Du zu den Stylesheetanweisungen noch ein display:block hinzufügst, wirds funktionieren.

Bei 'display: inline-block' auch …

Das kann aber unter Umständen dann auch ungewünschte Nebeneffekte haben.

… und das evtl. ohne ungewünschte Nebeneffekte.

Möglicherweise ist <span> einfach das falsche Auszeichnungselement...

Falls du darauf hinauswolltest, ein Element zur Auszeichnung zu verwenden, das per Default 'display: block' ist, dann hätte dies dieselben Nebeneffekte wie ein 'span' auf "block" zu setzen.

Und ja, möglicherweise wäre hier 'th' das richtige Auszeichnungselement.

Qapla'

[Felix Riesterer]

Lieber Andreas NEU,

<span style="width:100px; font-weight:bold;">Preis:</span>

das <span>-Element ist in seiner Voreinstellung als display:inline definiert. Mit display:inline-block solltest Du bessere Chancen haben:

<span style="display:inline-block;width:100px; font-weight:bold;">Preis:</span>

Aber davon einmal abgesehen liegt Dein eigentliches Problem ganz sicher woanders. Warum sonst solltest Du inline-Styles verwenden??

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Andreas NEU:

nuqneH

Ich möchte meine Ausgabe formatieren:
<span style="width:100px; font-weight:bold;">Preis:</span>

Aber bitte nicht inline (@style-Attribut), sondern im Stylesheet!

Und warum soll das Ding eine feste Breite haben? Oder möchtest du einen Abstand ('margin', 'padding') zum nächsten Element?

Qapla'