[Résolu] Finesse dans le CSS de Formbuilder!

[jpg]

Bonjour,

Malgré les géniales explications de http://www.sitepoint.com/article/fancy-form-design-css/, je ne parviens pas à trouver la solution dans le CSS de Formbuilder pour éviter un décalage des boutons radios en mettant le float:left . Quelqu'un a-t-il une idée, ce serait bien aimable!

SANS LE FLOAT LEFT
[img]httP://www.gsbernard.net/uploads/images ... lignés.jpg[/img]

AVEC LE FLOAT LEFT
[img]httP://www.gsbernard.net/uploads/images ... écalés.jpg[/img]

Mon CSS étant le suivant:

---

/* Sample FormBuilder CSS base */
form {margin-top:0}
form, td, th, li { font-size: 100%}

form {margin-top:0}

fieldset div {
margin-bottom:0.5em;
margin-left:1em;
}
fieldset div div {
margin-top:0.5em;
margin-left:2em
}
fieldset {
margin-bottom:1em;
        border:1px solid #F60;
        padding:0.5em
}


fieldset label {
float: left;
width: 13em;
margin-right: 1em;
}


legend {
color:#FFF;
background:#F60;
font-style:italic;
font-size:1.2em;
margin-bottom:0.5em;
padding:0.2em;
width:auto;
border:1px solid #CCC
}
textarea {
margin: 0.5em 0;
width:98%;
height: 3em
}

/* Apply this class to text/select input fields with shorter labels to help alignment */
        .short-label label {
         float:none;
         display: block;
         padding: 0;
         margin: 0 0 5px 142px;
         text-align: left;
}
.short-label fieldset div input,
        .short-label filedset div select [width:16em}



/* Pretty up your Captcha image output */
.captcha {
margin:0.5em 0;
width:200px;
text-align:center
}
.captcha img {border:1px solid #F60; margin-bottom:0.5em}
.captcha input {width:196px; margin-top:0.5em}

/* Just a bit more room for the Submit button */
.submit {margin-top:0.5em
display: block;
float: right;
}

---

Merci d'avance    jpg

[Lionel]

Bonjour,

Votre site est en ligne ? Si oui peut-on avoir l'adresse ?

[jpg]

Tout à fait http://www.gsbernard.net/index.php?page=vacances-en-famille

Merci! 

[Lionel]

Bon voici une solution...

Vous ajoutez cela:

fieldset input[type="text"] {
float:right;
margin-right:200px;
}

et vous supprimez le float:left; de fieldset label

Salutations

[jpg]

Fallait y penser! Bravo!!

C'est beaucoup mieux, MAIS il y a un nouveau problème.
Les champs ne sont plus en face des labels (décalage vers le bas)

Y a-t-il une parade?

a+

[jpg]

J'ai trouvé une parade un peu "bricolée"!
Mais le pire, c'est que ça marche!!!

J'ai simplement ajouté à votre bout de code un margin-top: -1.5em

Si vous avez mieux, merci de me le faire savoir!

Merci pour tout      jpg

[Pierre M.]

Bonjour,

petit grain de sel à deux balles (car je ne connais que peu CSS) : je préfèrerais avoir 2 div, un pour les champs et un pour les boutons radio (et donc pouvoir faire un CSS spécifique à chaque). Mais je suppose que FB ne permet pas une telle section de sa liste.

Pierre