legend in fieldset zentrieren
Dieter
- css
Hallo,
ihr kennt ja bestimmt den Befehl fieldset, wo man mit legend eine Legende angeben kann.
Jetzt hätte ich es gerne, dass diese Legende zentriert über dem Block steht.
Text-align etc. bringt nichts.
Weiß jmd. weiter?
Grüße
Dieter
Hallo Dieter,
Jetzt hätte ich es gerne, dass diese Legende zentriert über dem Block steht.
Text-align etc. bringt nichts.
Weiß jmd. weiter?
Ich kann dir in dem Fall nur raten, beim guten alten HTML-Attribut <legend align="center">
zu bleiben.
Mit CSS kannst du zwar auch ein bisschen was positionieren, je nach Länge des Legend-Textes ist das aber auch nicht genau, läuft nicht in Mozilla/Firefox und warum das BODY-Element im IE hier der Eigenschaft margin:auto
bedarf, weiß ich auch nicht, ist aber so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Legende zentrieren</title>
<style type="text/css">
[code lang=css]
body {
margin:auto;
}
legend {
position:relative;
left:50%;
}
</style>
</head>
<body >
<form action="">
<fieldset>
<legend align="center">hallo</legend>
<input type="Checkbox" name="" value="v">
<input type="Checkbox" name="" value="v">
<input type="Checkbox" name="" value="v">
</fieldset>
</form>
</body>
</html>[/code]
Vielleicht hat aber jemand anders noch eine andere Idee, die dir mit CSS zur strikteren Trennung von Inhalt und Gestaltung verhilft.
Gruß Gernot
Hallo nochmal,
[code lang=html]
<legend align="center">hallo</legend>
Ups, das hier^^^^^^^^^^^^^^
sollte in der CSS-Variante gar nicht stehen.
Gruß Gernot
Hallo Gernot.
Vielleicht hat aber jemand anders noch eine andere Idee, die dir mit CSS zur strikteren Trennung von Inhalt und Gestaltung verhilft.
Funktioniert nur im Opera und IE, leider nicht in den Geckos:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Legende zentrieren</title>
<style type="text/css">
[code lang=css]legend{margin:auto;}
* html legend{display:block;text-align:center;}
</style>
</head>
<body >
<form action="">
<fieldset>
<legend>hallo</legend>
<input type="Checkbox" name="" value="v">
<input type="Checkbox" name="" value="v">
<input type="Checkbox" name="" value="v">
</fieldset>
</form>
</body>
</html>[/code]
Einen schönen Montag noch.
Gruß, Ashura
Hallo Ashura,
~~~css
legend{margin:auto;}
* html legend{display:block;text-align:center;}
Damit \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_^^^^^^^^^^^^^^ überdeckt das LEGEND-Element im IE aber auch den oberen Rahmen des FIELDSET-Elements
> > <input type="Checkbox" name="" value="v">
Davor brauchen wir auch noch einen Slash \_\_\_\_\_^
im gegebenen XHTML-DOCTYPE, den Fehler hatte ich auch schon drin.
Gruß Gernot
Hallo Gernot.
Hallo Ashura,
~~~css
legend{margin:auto;}
* html legend{display:block;text-align:center;}
> Damit \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_^^^^^^^^^^^^^^ überdeckt das LEGEND-Element im IE aber auch den oberen Rahmen des FIELDSET-Elements
Ja, leider. Das ist der Preis für die Zentrierung.
> > > <input type="Checkbox" name="" value="v">
> Davor brauchen wir auch noch einen Slash \_\_\_\_\_^
> im gegebenen XHTML-DOCTYPE, den Fehler hatte ich auch schon drin.
Man merkt wieder einmal, dass Copy and Paste nie gut ist.
Einen schönen Montag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Opera Mini on Treo](http://operalover.tntluoma.com/8/opera_mini_on_treo)
Meine Browser: [Opera 8.02](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
Hallo.
~~~css
legend{margin:auto;}
* html legend{display:block;text-align:center;}
> > Damit \_\_\_\_\_\_\_\_\_\_\_\_\_\_\_^^^^^^^^^^^^^^ überdeckt das LEGEND-Element im IE aber auch den oberen Rahmen des FIELDSET-Elements
>
> Ja, leider. Das ist der Preis für die Zentrierung.
Ein width:0; schafft hier aber Abhilfe. (Ggf. auch einen großeren Wert angeben.)
Einen schönen Montag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Opera Mini on Treo](http://operalover.tntluoma.com/8/opera_mini_on_treo)
Meine Browser: [Opera 8.02](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)