Moving the legend in a fieldset lower in the form

Question

In a classical form, we have the legend tag on the same line of the top border like showed below.

enter image description here

The code is:

...
<fieldset>
    <legend>Connexion</legend>
    ...
</fieldset>

Is it possible to move this legend lower in the formular like showed below?

enter image description here

Any idea what is the CSS ?

Thanks.

UPDATE

Below is the result after applying the following CSS:

fieldset { 
    position:relative;   
}    

legend { 
    top:20px; 
    position:absolute; 
    font-size:20px; 
    font-weight:bold    
}

enter image description here

How to add more space after the legend 'Connexion' ?

score 5 · Accepted Answer · answered Mar 02 '12 at 16:24

5

You sure can do this with CSS. Without using absolute positioning you end up with a big gap in the fieldset border.

fieldset {
    position:relative;  
}   

legend {
    top:50px;
    position:absolute;
    font-size:20px;
    font-weight:bold   
}

answered Mar 02 '12 at 16:24

Thanks. I updated my question to show the result. Now I need more space after the legend 'Connexion'. Any idea? – Bronzato Mar 02 '12 at 16:35
1

Change to: fieldset { position:relative; padding-top:30px } – Diodeus - James MacFarlane Mar 02 '12 at 16:46
It works with IE, Chrome, Safari but not in Firefox ! – Bronzato Mar 02 '12 at 17:03
Post your code on jsfiddle.net and I'll take a look. Send me the url. – Diodeus - James MacFarlane Mar 02 '12 at 18:52
I finally succeed with your solution after some css adjustemnts. Thanks. – Bronzato Mar 03 '12 at 08:48

1 Answers1