IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Centrer le contenu d'un formulaire


Sujet :

Centrer un élément en CSS

  1. #1
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut Centrer le contenu d'un formulaire
    Bonsoir,

    Voilà je souhaite centrer verticalement une partie d'un formulaire (le bloc rouge) par rapport au bloc bleu (fieldset) comment faire ?

    Actuellement voici mon code html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <form action='traitement.php' name='choix' class='cmxformR' id='frm_rech' method='post'>
    			<fieldset>
    				<legend>Recherche rapide par nom ou adresse </legend>
    				<p>
    					<input type='radio' name='choixRech' value='Nom' checked='checked'>
    					<label for='nom'>Nom</label>
    					<select name='nom[]' id='nom' size='4' multiple>
    						<option value='2510'>2510</option>
    						<option value='2610'>2610</option>
    						<option value='2510'>2512</option>
    						<option value='2510'>2524</option>
    						<option value='2510'>2312</option>
    						<option value='2510'>2324</option>
    					</select>
    				</p>
    				<p>
    					<input type="radio" name='choixRech' value='ip'>
    					<label for='ip'>Adresse IP</label>
    					<select name='ip[]' id='ip'size='4' multiple class="required">
    						<option value='10.0.0.0'>10.0.0.0</option>
    						<option value='10.0.0.2'>10.0.0.2</option>
    						<option value='10.0.0.5'>10.0.0.5</option>
    						<option value='10.0.0.7'>10.0.0.7</option>
    						<option value='10.0.0.9'>10.0.0.9</option>
    						<option value='10.0.0.11'>10.0.0.11</option>
    						<option value='10.0.0.15'>10.0.0.15</option>
    					</select>
    				</p>
    				<p>
    					<input class='submit' type='submit' value='Afficher'>
    				</p>
    			</fieldset>
    		</form>
    et mon css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    html, body {
    	font-family: ARIAL,GENEVA,VERDANA;
    	width: 100%;
    	height: 100%;
    }
    form.cmxformR {
    	padding: 10px;
    	width: 400px;
    	font-size: 1.0em;
    	color: #333;
    	margin: auto;
    }
    form.cmxformR fieldset {
    	border: 1px solid #377ca5;
    	border-radius: 5px;
    	padding: 5px;
    	margin: 5px;
    }
    form.cmxformR fieldset p {
    	padding: 5px 10px 1px 15px;
    }
    form.cmxformR legend {
    	font-weight:bold;
    }
    form.cmxformR select {
    	vertical-align:middle;
    	display: block;
    	width: 250px;
    }
    input { 
    	background:#FFF;
    	vertical-align:middle;
    }
    input[type=submit], input[type=reset] {
    	border:1px solid;
    	font-weight:bold;
    	cursor:pointer;
    }
    input[type=submit]:hover, input[type=reset]:hover {
    	background-color:#377ca5;
    }
    input[type=submit]:active, input[type=reset]:active {
    	background-color:#000;
    	color:white;
    }
    option,select {
    	background-color:#ffffff;
    }
    option,select:hover{
    	background-color:#e3f9ff;
    }
    Résultat actuel :


    Résultat souhaité :

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 102
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 102
    Points : 44 883
    Points
    44 883
    Par défaut
    Bonsoir,
    tu n'as qu'à jouer avec le padding (marge intérieure) du FIELDSET
    • FIELDSET width de 400px
    • SELECT width de 250px
    • (400-250)/2 = 75px
    • FIELDSET padding = 75px

  3. #3
    Membre régulier
    Inscrit en
    Avril 2009
    Messages
    177
    Détails du profil
    Informations forums :
    Inscription : Avril 2009
    Messages : 177
    Points : 78
    Points
    78
    Par défaut
    Merci.
    Je ne sais pas pourquoi je n'y ai pas pensé.
    Bonne journée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2010] Centrer le contenu d'un formulaire maximisé
    Par docjo dans le forum IHM
    Réponses: 2
    Dernier message: 15/02/2012, 10h59
  2. Centrer le contenu d'un formulaire
    Par bobosh dans le forum IHM
    Réponses: 1
    Dernier message: 06/09/2008, 07h01
  3. [CSS] Centrer le contenu d'une Div
    Par bolo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/03/2006, 19h18
  4. Réponses: 5
    Dernier message: 31/01/2006, 14h54
  5. Affihage du contenu d'un formulaire dans un popup
    Par BernardT dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/12/2005, 19h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo