Dieter: legend in fieldset zentrieren

SELF-Forum

legend in fieldset zentrieren

Dieter
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. legend in fieldset zentrieren

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. legend in fieldset zentrieren

      Gernot Back Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo nochmal,

      [code lang=html]
        <legend align="center">hallo</legend>

      Ups, das hier^^^^^^^^^^^^^^
      sollte in der CSS-Variante gar nicht stehen.

      Gruß Gernot

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. legend in fieldset zentrieren

      Ashura Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      --
      Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
      30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
      Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
      [Deshalb frei! - Argumente pro freie Software]
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. legend in fieldset zentrieren

        Gernot Back Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. legend in fieldset zentrieren

          Ashura Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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/)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Nachtrag: legend in fieldset zentrieren

            Ashura Homepage des Autors
            +1 Informationen zu den Bewertungsregeln

            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/)
            Beitrag melden
            +1
            Informationen zu den Bewertungsregeln