Ashura: <legend> im Fieldset nicht rechts sondern links?

Beitrag lesen

SELF-Forum

<legend> im Fieldset nicht rechts sondern links?

Ashura Homepage des Autors
– Informationen zu den Bewertungsregeln

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

--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
Beitrag melden
–
Informationen zu den Bewertungsregeln