<legend> im Fieldset nicht rechts sondern links?

[Felix Riesterer]

Liebe CSS-Spezialisten,

ich probiere gerade erfolglos ein <legend>-Element (welches sich innerhalb eines <fieldset>s befindet) auszurichten. Damit meine ich nicht den Textinhalt innerhalb der "Box", sondern die "Box" selbst.

Die Default-Einstellungen des Browsers (IE, FF, Opera) lassen es in etwa so aussehen:

+-- LEGEND ------------+
|(content)             |
|...                   |
+----------------------+

Wenn ich dem Legend nun einen Border von 1px solid black verpasse, dann sieht es in etwa (bitte das anscheinende Padding ignorieren!) so aus:

+--------+
+--+ LEGEND +----------+
|. +--------+          |
|(content)             |
|...                   |
+----------------------+

Ich habe es nun mit float:right, mit position:(absolute|relative) in Verbindung mit right:0px bzw. left: 90% und mit display:(inline|block) probiert, aber irgendwie war die Darstellung immer dieselbe...

Dabei möchte ich doch nur folgende Darstellung erzielen:

+--------+
+----------+ LEGEND +--+
|.         +--------+  |
|(content)             |
|...                   |
+----------------------+

Reizen würde mich auch der Versuch folgende Darstellungen zu bewirken:

+----------------------+
|(content)             |
|...                   |
|. +--------+          |
+--+ LEGEND +----------+
   +--------+

+----------------------+
|(content)             |
|...                   |
|.         +--------+  |
+----------+ LEGEND +--+
           +--------+

Ein Blick in den DOM-Inspektor des FF zeigte bei den CSS-Rules etwas von caption-side, was ich nun überhaupt nicht verstehe!

Wer hat dieses Rätsel schon einmal erfolgreich gelöst?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ashura]

Hallo Felix.

Dabei möchte ich doch nur folgende Darstellung erzielen:

+--------+
+----------+ LEGEND +--+
|.         +--------+  |
|(content)             |
|...                   |
+----------------------+

Dies könntest du folgendermaßen erreichen:

fielset legend {  
  margin-left:auto;  
  margin-right:0; /* Oder beliebiger Wert */  
}

Funktioniert aber nur im Opera.

Reizen würde mich auch der Versuch folgende Darstellungen zu bewirken:

+----------------------+
|(content)             |
|...                   |
|. +--------+          |
+--+ LEGEND +----------+
   +--------+

Ein Ansatz:

fieldset legend {  
  float:left;  
  margin-bottom:-0.5em;  
  margin-top:1em;  
}

Funktioniert teilweise im Opera und Konqueror.

+----------------------+
|(content)             |
|...                   |
|.         +--------+  |
+----------+ LEGEND +--+
           +--------+

Entsprechend obiges mit float:right.

Im Firefox und IE sieht es schlecht aus, sorry.

Einen schönen Sonntag noch.

Gruß, Ashura

[Ashura]

Hallo Ingrid.

+--------+
+----------+ LEGEND +--+
|.         +--------+  |
|(content)             |
|...                   |
+----------------------+

Dies könntest du folgendermaßen erreichen:

[…]

Alternativer Lösungsansatz:

fieldset {  
  margin-top:0.5em;  
  position:relative;  
}  
fieldset legend {  
  right:0;  
  position:absolute;  
  margin-top:-0.5em;  
}

Funktioniert in Opera, Firefox und IE, aber nicht im Konqueror.
Letzterer scheint irgendwie die position-Werte fehlzuinterpretieren, denn in diesem sieht es wie in einer deiner anderen Vorstellungen aus:

+----------------------+
|(content)             |
|...                   |
|.         +--------+  |
+----------+ LEGEND +--+
           +--------+

Um dies in den anderen Browsern zu bewerkstelligen, könnte folgendes weiterhelfen:

fieldset legend { /* In Kombination mit obigem Regelsatz zu fieldset */  
  right:0;  
  position:absolute;  
  bottom:-0.5em;  
}

Funktioniert in Opera, Firefox, IE und Konqueror gleichermaßen. Eventuelles Problem hierbei: der IE lässt das gesamte fieldset-Element passend zum Wert der bottom-Eigenschaft schrumpfen.

Reizen würde mich auch der Versuch folgende Darstellungen zu bewirken:

+----------------------+
|(content)             |
|...                   |
|. +--------+          |
+--+ LEGEND +----------+
   +--------+

Ein Ansatz:

[…]

Dem entsprechend hier nun auch ein weiterer:

fieldset {  
  padding-bottom:1em;  
  position:relative;  
}  
fieldset legend {  
  left:0;  
  position:absolute;  
  bottom:-0.5em;  
}

Funktioniert im Opera, IE und Konqueror. Im Firefox wird das legend-Element über den Inhalt des fieldset-Elementes gezogen.

Einen schönen Sonntag noch.

Gruß, Ashura

[Felix Riesterer]

Lieber Ashura,

vielen herzlichen Dank für Deine Lösungsansätze! Ich werde sie morgen eingehender studieren. Aber es scheint schon jetzt so, als ob man immer auf mindestens einen Browser dabei verzichten müsste, da immer einer aus der Reihe tanzt.

Also vielen Dank jedenfalls!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[wahsaga]

hi,

Ein Blick in den DOM-Inspektor des FF zeigte bei den CSS-Rules etwas von caption-side, was ich nun überhaupt nicht verstehe!

Nun, caption-side sollte wohl eigentlich bei Tabellen die Position einer Überschrift bestimmen - über oder unter der Tabellen-Box. (Caption kann übrigens neben Überschrift u.a. auch noch (Film-)Untertitel bedeuten.)

Und was spricht dagegen, ein Legend als vom display-Typ table-caption seiend zu betrachten ...?

(Dass caption-side captiot-side heißt, und dabei die Werte top und bottom annehmen kann, finde ich viel unverständlicher. Unten und oben als "Seiten" ...?)

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Und was spricht dagegen, ein Legend als vom display-Typ table-caption seiend zu betrachten ...?

Dass Browser (getestet mit Firefox) das legend-Element nicht dorthin setzen, wo man es mit solchen CSS-Angaben erwarten würde. Der Firefox zeigt sich ziemlich unbeeindruckt von vielen Eigenschaften bezüglich lengend.

See ya up the road,
Gunnar

[Tim Tepaße]

Hallo,

Dass Browser (getestet mit Firefox) das legend-Element nicht dorthin setzen, wo man es mit solchen CSS-Angaben erwarten würde. Der Firefox zeigt sich ziemlich unbeeindruckt von vielen Eigenschaften bezüglich lengend.

Weil fieldset/legend in Gecko immer noch ein replaced Element statt normaler CSS Boxen zu sein scheinen. Meinen damaligen Bug scheint sich niemand krallen zu wollen.

Tim