28172 sujets

CSS et mise en forme, CSS3

Formulaire en display table et centrage du submit

Bonjour,
J'essaie de coder un formulaire avec les contraintes suivantes :
- largeur qui s'adapte au contenu
- bouton de soumission centré sur le formulaire
Je suis donc parti sur du display table-*.
Mon souci, c'est pour le bouton de soumission. Comme son conteneur définit une cellule à lui tout seul, impossible de le centrer sur toute la largeur du form.
J'ai trouvé une solution avec display: table-caption et un span en display block centré, mais ça le fait "sortir" du formulaire (si je mets une bordure, forcément le bouton sera à l'extérieur).
Voyez-vous une autre manière de procéder ?

Mon code actuel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
    <title>Formulaire</title>
    <style type="text/css">
    #f {
        display: table;
        border-spacing: 4px 8px;
        border: 1px dashed #666;
        background: #edf;
    }
    #f p {
        display: table-row;
    }
    #f label, #f span {
        display: table-cell;
        vertical-align: top;
    }
    #f input[type=text], #f select, #f textarea {
        width: 220px;
    }
    #f .soumission {
        display: table-caption;
        caption-side: bottom;
    }
    #f .soumission span {
        display: block;
        text-align: center;
    }
    </style>
</head>
<body>
    <div id="page">
        <form id="f" action="#">
            <p>
                <label for="f-ch1">Champ 1</label>
                <span><input type="text" id="f-ch1" name="ch1" value="" /></span>
            </p>
            <p>
                <label for="f-ch2">Champ 2 bla bla</label>
                <span><input type="text" id="f-ch2" name="ch2" value="" /></span>
            </p>
            <!-- les autres champs avec la même structure p > label + span > input -->
            <p class="soumission">
                <span><input type="submit" value="Envoyer" /></span>
            </p>
        </form>
    </div>
</body>
</html>

Merci
Bonjour Seven tears,

J'ai peut être un début solution qui évite l'utilisation de tableau.

....
<title>Formulaire</title> 
    <style type="text/css"> 
    #f {
        border: 1px dashed #666; 
        background: #edf; 
    }
	#f label {
		float: left;
		clear: left;
	}
    #f input[type=text], #f select, #f textarea { 
        width: 220px; 
    }
    #soumission {
		width: 100%;
        text-align: center; 
    }
    </style> 
</head> 
<body> 
    <div id="page"> 
        <form id="f" action="#">
        	<dl>
            	<dt><label for="f-ch1">Champ 1</label></dt>
				<dd><input type="text" id="f-ch1" name="ch1" value="" /></dd>
	        	<dt><label for="f-ch2">Champ 2 bla</label></dt>
            	<dd><input type="text" id="f-ch2" name="ch2" value="" /></dd>
            </dl>
            <!-- les autres champs avec la même structure p > label + span > input --> 
            <input id="soumission" type="submit" value="Envoyer" />
        </form> 
    </div> 
</body> 
</html>
Bonsoir Majimerse,
Je sais comment faire avec float, même code HTML mais CSS suivante :
    #f label {
        float: left;
        width: 80px;
    }
    #f input[type=text], #f select, #f textarea {
        width: 220px;
    }
    #f span {
        display: block;
        margin-left: 90px;
    }

(et sans dl dt dd qui n'apportent rien de plus au formulaire).

Au mieux, à partir de là, je peux passer le form en display table pour l'adaptation en largeur, et surcharger margin et text-align de p.soumission span.
Le problème, c'est que pour obtenir un aspect grille, il faut fixer une largeur aux labels, chose que je voudrais éviter. D'où la tentative d'un display table-cell.

Merci tout de même Smiley cligne
Sujet clos
Aller à