width für span?

[lina-]

moin liebes Forum :)

Ich hänge mal wieder an meinem Lieblingsthema CSS fest.
Ich habe ein tabellenähnliches Gebilde (es ist aber keine - und darf auch keine sein - darüber bitte keine Diskussion!).

-------------------------
|Bild | Bereich2 | Text |
-------------------------

Im ersten Drittel ist _immer_ ein Bild, Der zweite Bereich enthält optional ein Bild, dass immer 16 Pixel breit ist und der Text ist auch _immer_ vorhanden.

Wenn nun der Bereich2 leer ist, sieht es (natürlich) folgendermaßen aus:

---------------
|Bild || Text |
---------------

Genau das möchte ich verhindern. Folgendes möchte ich haben, wenn das Bild fehlt:

-------------------------
|Bild |          | Text |
-------------------------

Nun habe ich mir gedacht, dass ich einfach ein leeres <span> mit der CSS-Eigenschaft width=16px einfügen könnte. Leider hat die Breitenangabe aber überhaupt keine Auswirkung.
Wenn ich statt des span ein div nehme, funktioniert die Breitenangabe - aber dann habe ich natürlich auch den Zeilenumbruch weil div ein Blockelement ist.
Schlau wie ich bin, hab ich dem Block-Element vorgekaukelt, es sei ein Inline-Element (display:inline). Das hat es mir sogar geglaubt - mit allen Konsequenzen *G* Jaja - die Breitenangabe wurde wieder ignoriert ;)

Lange Rede kurzer Sinn:
1. Gilt die CSS-Eigenschaft tatsächlich nur für Block-Elemente? .OO(und hab ich das in der Doku nur überlesen?)
2. Weiss jemand Abhilfe für mein Problem?

liebe Grüße aus Berlin
lina-

[wahsaga]

hi,

Nun habe ich mir gedacht, dass ich einfach ein leeres <span> mit der CSS-Eigenschaft width=16px einfügen könnte. Leider hat die Breitenangabe aber überhaupt keine Auswirkung.

Zum Glück hat sie keine, sonst wäre dein browser defekt.

Wenn ich statt des span ein div nehme, funktioniert die Breitenangabe - aber dann habe ich natürlich auch den Zeilenumbruch weil div ein Blockelement ist.

Aber immerhin funktioniert schon mal die Breitenangabe - _weil_ Div von Natur aus display:block "besitzt".
Hättest du dem span display:block "verpasst" - hätte sie bei ihm auch gewirkt.

Schlau wie ich bin, hab ich dem Block-Element vorgekaukelt, es sei ein Inline-Element (display:inline). Das hat es mir sogar geglaubt - mit allen Konsequenzen *G* Jaja - die Breitenangabe wurde wieder ignoriert ;)

Natürlich.

Weiss jemand Abhilfe für mein Problem?

Du könntest das Element beispielsweise floaten lassen oder absolut positionieren.
Eigentlich würdest du vermutlich am liebsten display:inline-block haben - aber da sind die dämlichen Geckos m.W. immer noch zu blöd für.

gruß,
wahsaga

[lina-]

moin wahsaga, Blaubart :)

Vielen Dank :) floaten ist natürlich eine sehr nette Idee! Wieso komm ich nur auf so einfache Dinge nicht?

liebe Grüße aus Berlin
lina-

[Biesterfeld]

Hej,

ich klink mich mal an dieser Stelle ein, weil ich just in diesem Moment das gleiche Problem hatte.

Weiss jemand Abhilfe für mein Problem?

Du könntest das Element beispielsweise floaten lassen oder absolut positionieren.

<p class="x">  
  <span>A</span>  
  <span>B</span>  
  <span>C</span>  
<p>  
  
<p> Hier kommt etwas mehr text</p>

.x span {  
  float:left;  
  width:10%;  
  display:block;  
}  
  
.x + p {  
  clear:left;  
}  
  
.x {  
  background-color:#000000;  
  margin-bottm:2em;  
}

Soweit sieht es aus wie ich das möchte, aber nun werden die Einstellungen für die Klasse .x nicht mehr übernommen. Was den margin angeht könnte ich mir noch vorstellen, dass es an dem float liegt, aber warum wird denn der Hintergrund nicht mehr gesetzt? Jemand einen Tip?

Beste Grüße
Biesterfeld

[wahsaga]

hi,

Soweit sieht es aus wie ich das möchte, aber nun werden die Einstellungen für die Klasse .x nicht mehr übernommen. Was den margin angeht könnte ich mir noch vorstellen, dass es an dem float liegt, aber warum wird denn der Hintergrund nicht mehr gesetzt?

Wird er, aber du siehst ihn nicht - wie hoch ist dein P, in dem du _alle_ Nachfahrenelemente per float aus dem Fluss genommen hast? Genau ...

gruß,
wahsaga

[Biesterfeld]

Moin,

Wird er, aber du siehst ihn nicht - wie hoch ist dein P, in dem du _alle_ Nachfahrenelemente per float aus dem Fluss genommen hast? Genau ...

In der Tat, eine explizite Zuweisung der Höhe brachte das gewünschte Ergebnis. Bin so früh am morgen zwar noch nicht in der Lage nachzuvollziehen, warum das jetzt so ist, aber Dank dir herzlich.

Beste Grüße
Biesterfeld

[Blaubart]

Hallo lina.

1. Gilt die CSS-Eigenschaft tatsächlich nur für Block-Elemente? .OO(und hab ich das in der Doku nur überlesen?)

Nein, nicht ganz.

Die Doku sagt zu width: "Applies to: all elements but non-replaced inline elements, table rows, and row groups".

2. Weiss jemand Abhilfe für mein Problem?

Entweder floatest du deine Elemente nach links, wobei diese dann auch empfänglich für Breitenangaben sind... oder du benutzt absolute Positionierung.

[Hansapils]

Entweder floatest du deine Elemente nach links, wobei diese dann auch empfänglich für Breitenangaben sind... oder du benutzt absolute Positionierung.

Nich das es jemanden hier vermutlich interessiert, aber das ist genau das was ich bei CSS blöd finde. Denn mit der Floaterei holt man sich einen ganzen Zoo an Problemen den man nicht hätte wenn Inline-Elemente Höhe und Breite haben könnten.

Ich sehe auch den Vorteil nicht.

[wahsaga]

hi,

Nich das es jemanden hier vermutlich interessiert, aber das ist genau das was ich bei CSS blöd finde.

Du möchtest dich informieren, denn dann musst du nicht mehr CSS blödfinden, sondern nur noch Browser.

Denn mit der Floaterei holt man sich einen ganzen Zoo an Problemen den man nicht hätte wenn Inline-Elemente Höhe und Breite haben könnten.

Man könnte schlicht und einfach inline-block verwenden - wenn die Geckos das langsam mal kapieren würden.

gruß,
wahsaga

[Fucks]

Inline-Elemente möchten keine Breite haben.

Was du machen könntest

Bild A (wenn Bild B vorhanden) | Bild B | Text

Bild A (wenn Bild B nicht vorhanden mit magin so breit wie Bild B) | Text

[lina-]

moin Fucks :)

Was du machen könntest

Bild A (wenn Bild B vorhanden) | Bild B | Text

Bild A (wenn Bild B nicht vorhanden mit magin so breit wie Bild B) | Text

An und für sich eine sehr gute Idee - lässt sich aber in meiner JSP-Logic:equals-Wirrwarr-Umgebung nicht so einfach umsetzen ;)

liebe Grüße aus Berlin
lina-

[Fucks]

An und für sich eine sehr gute Idee - lässt sich aber in meiner JSP-Logic:equals-Wirrwarr-Umgebung nicht so einfach umsetzen ;)

Ja, sobald es dynamisch wird serverseitig ist es nicht einfach.

Aber vielleicht ist das was Du darstellst eine zufällig doch Tabelle?

[lina-]

moin Fucks :)

Aber vielleicht ist das was Du darstellst eine zufällig doch Tabelle?

:P nein. Es ist eine Nebeneiander-Anordnung von 2 Bildern und einem Text in einem Baum.

liebe Grüße aus Berlin
lina-

[Sven Rautenberg]

Moin!

Im ersten Drittel ist _immer_ ein Bild, Der zweite Bereich enthält optional ein Bild, dass immer 16 Pixel breit ist und der Text ist auch _immer_ vorhanden.

Folgendes möchte ich haben, wenn das Bild fehlt:

---

|Bild |          | Text |

Da du ja sowieso unterscheiden mußt zwischen "ich habe ein Bild" und "ich habe kein Bild" - was spricht dagegen, im Falle von "ich habe KEIN Bild" einfach den berühmten transparenten GIF-Pixel als Bild einzubinden?

- Sven Rautenberg

[lina-]

moin Sven :)

Da du ja sowieso unterscheiden mußt zwischen "ich habe ein Bild" und "ich habe kein Bild" - was spricht dagegen, im Falle von "ich habe KEIN Bild" einfach den berühmten transparenten GIF-Pixel als Bild einzubinden?

Du wirst lachen - das habe ich überlegt ;)
Aber - auch wenn ich CSS _hasse_ - ich werde es irgendwann bezwingen ;) und hey - es gibt ja tatsächlich ne Lösung dank floating *G* Das funktioniert ganz wunderbar.

liebe Grüße aus Berlin
lina-

[Gunnar Bittersmann]

Hello out there!

was spricht dagegen, im Falle von "ich habe KEIN Bild" einfach den berühmten transparenten GIF-Pixel als Bild einzubinden?

Der Ekel vor diesem.

See ya up the road,
Gunnar

[Gernot Back]

Hallo lina,

versuch es doch mal mit display:inline-table und verschachtelten SPAN-Elementen, denen du display:table-row und display:table-cell verpasst. Das funktioniert im IE dánn allerdings nur im Quirks-Modus.

Vielleicht kannst du den bei Gunnar bestimmt auch darüber aufkommenden Ekel mindern, indem du diesen über einen XML-Vorspann vor dem DOCTYPE triggerst, sodass dieser _nur im IE auftritt.

Gruß Gernot