Schorn: Breite Fieldset

Hey,

wie kann ich die Breite von <fieldset> so angeben, dass sie nur genau die benötigte Breite des Formulars einnimmt - zzgl. Abständen?

Danke an alle - ich komme hier echt nicht weiter.

LG

  1. Hey,

    wie kann ich die Breite von <fieldset> so angeben, dass sie nur genau die benötigte Breite des Formulars einnimmt - zzgl. Abständen?

    Danke an alle - ich komme hier echt nicht weiter.

    LG

      
    fieldset{  
    width: auto;  
    padding: 10px;  
    }  
    
    
    1. fieldset{
      width: auto;
      padding: 10px;
      }

        
      Das jetzt noch jemand wach ist! ;-)  
        
      Super, danke für die schnelle Antwort!  
        
      Leider bleibt das Element fieldset so breit wie das Elternelement:  
        
      ~~~css
        
      #text {  
        margin: 0  0px 0 188px;  
        padding: 10px 10px 0 10px;  
        border-left: 1px solid #153B63;  
      
      
      1. Hi,

        Leider bleibt das Element fieldset so breit wie das Elternelement

        Das ist ja für ein block-Element bei width:auto auch normal.

        Lasse es inline darstellen, oder floate es.

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
        1. Lasse es inline darstellen, oder floate es.

          Inline ist super. Wäre es entgegen aller Regeln, wenn ich um das fieldset noch ein Blockelement setze, damit diese untereinander stehen? Oder wie bekomme ich es sonst sauber hin?

          Danke für Eiure Hilfe!!!

          1. Hi,

            Lasse es inline darstellen, oder floate es.

            Inline ist super. Wäre es entgegen aller Regeln, wenn ich um das fieldset noch ein Blockelement setze, damit diese untereinander stehen?

            Zusätzliche Elemente einzufügen, die der Strukturierung des Inhaltes keinen Mehrwert bringen, und nur der Darstellung dienen, *sollten* wenn möglich vermieden werden.

            Oder wie bekomme ich es sonst sauber hin?

            Per float und clear.

            MfG ChrisB

            --
            Light travels faster than sound - that's why most people appear bright until you hear them speak.
            1. Per float und clear.

              Beim floaten, wie beim definieren als inline-Element werden dann meine labels nicht mehr richtig gefloatet...

                
                
              label {  
              	float: left;  
              	margin: 0 20px 0 10px;  
              	width: 13em;  
              	text-align: left;  
              	color: #153B63; }  
                
              input, textarea {  
                display: block;  
                margin-bottom: 10px;  
                border: 1px solid #153B63; }
              
              1. Beim floaten, wie beim definieren als inline-Element werden dann meine labels nicht mehr richtig gefloatet...

                label {
                float: left;
                margin: 0 20px 0 10px;
                width: 13em;
                text-align: left;
                color: #153B63; }

                input, textarea {
                  display: block;
                  margin-bottom: 10px;
                  border: 1px solid #153B63; }

                  
                Eine Struktur mit fieldset/legend und label/input Paare als Inhalte würde ich vermutlich ohne float, dafür mit inline-block formatieren.  
                  
                Damit umgehst du diverse clearing Bugs bei MSIE. Auch kannst du die horizontale Ausrichtung zwischen label und input durch vertical-align definieren.  
                  
                mfg Beat
                
                -- 
                
                ><o(((°>           ><o(((°>  
                
                   <°)))o><                     ><o(((°>o  
                Der Valigator leibt diese Fische
                
                1. Eine Struktur mit fieldset/legend und label/input Paare als Inhalte würde ich vermutlich ohne float, dafür mit inline-block formatieren.

                  Damit umgehst du diverse clearing Bugs bei MSIE. Auch kannst du die horizontale Ausrichtung zwischen label und input durch vertical-align definieren.

                  Hey,

                  könntest du mir vllt. ein kleines BSP geben? Das wäre super, ich komme hier gerade nicht weiter...

                  Danke an alle!!

                  LG

                  1. könntest du mir vllt. ein kleines BSP geben? Das wäre super, ich komme hier gerade nicht weiter...

                    Danke an alle!!

                      
                    <!DOCTYPE BEAT>  
                    <html>  
                    <head>  
                    <title>Untitled</title>  
                    <style type="text/css">  
                    input[type=text],  
                    textarea  
                      { font-size: 16px;}  
                    label.textlabel  
                      { display:inline-block; min-width:8em; padding-right:1em;  
                        text-align:right; vertical-align:text-top; }  
                    label.textlabel:after  
                      { content: ': '; }  
                    input[type=text]  
                      { display:inline-block; width:20em;  
                        vertical-align:tex-top; }  
                    label.checklabel  
                      { padding-left:1em; }  
                    textarea  
                      { display:inline-block; width: 20em; height:10em; vertical-align:text-top;}  
                    </style>  
                    </head>  
                    <body>  
                    <form action="">  
                    <fieldset><legend>Legende</legend>  
                    <label class=textlabel for=someid>Ein Label</label><input type=text id=someid><br>  
                    <input type=checkbox id=check1><label class=checklabel for=check1>Checklabel</label><br>  
                    <label class=textlabel for=someid>Ein Label</label><textarea cols=20 rows=10></textarea><br>  
                    </fieldset>  
                    </form>  
                    </body>  
                    </html>
                    

                    Copyright beachten!

                    mfg Beat

                    --
                    ><o(((°>           ><o(((°>
                       <°)))o><                     ><o(((°>o
                    Der Valigator leibt diese Fische
                    1. @@Beat:

                      nuqneH

                      <!DOCTYPE BEAT>
                      <html>

                      Fehler. ;-)

                      Qapla'

                      --
                      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                    2. Hey,

                      danke für das BSP - aber auch dabei ist das Element fieldset immer so lang, wie es das Fenster bzw. das übergeordnete Element zulässt...

                      1. danke für das BSP - aber auch dabei ist das Element fieldset immer so lang, wie es das Fenster bzw. das übergeordnete Element zulässt...

                        OK, dann geh in dich, ganz tief, und konzeptualisiere, was display:inline-block veranstaltet. Verallgemeinere diese Veranstaltung und wende sie auf den gewünschten Kontext an.

                        PS: für ein paar alte Browserkameraden schadet es nicht, wenn man jeweils schreibt:
                        selector{ display:inline; display-inline-block; }

                        mfg Beat

                        --
                        ><o(((°>           ><o(((°>
                           <°)))o><                     ><o(((°>o
                        Der Valigator leibt diese Fische
                        1. @@Beat:

                          nuqneH

                          PS: für ein paar alte Browserkameraden schadet es nicht, wenn man jeweils schreibt:
                          selector{ display:inline; display-inline-block; }

                          Und dann geh in dich, ganz tief, und finde den Tippfehler!

                          Und nicht "selector" schreiben!

                          Und für einen alten Browserkameraden (Firefox 2) schadet es nicht, 'display: -moz-inline-grid' anzugeben. [INLINE-BLOCK]

                          Qapla'

                          --
                          Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                        2. Danke Euch allen für die Hilfe!!

                          LG