18041 sujets

Questions générales et questions de débutants

Comment centrer ces éléments ?

Bonjour à tous,

Je rencontre actuellement un petit problème de "centrage" horizontal sur un formulaire. En effet, je ne vois pas trop comment faire avec le CSS pour arranger cela. Voici donc mon code source (X)HTML (cette page est inclue, donc ne vous en faites pas pour le Doctype, il est bien déclaré)



<div id="container">
<p class="error"><?php if(!empty($message)) : ?>
      <?php echo $message; ?>
<?php endif; ?></p>
<form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES); ?>" method="post" class="niceform">

	<fieldset>

    	<legend>Niveau 1</legend>

        <dl>

        	<dd><label for="mess">Décodez le message suivant:</label></dd>
        	
            <dd>
                    
                    <div class="message">
                    	
                    	Lorem Ipsum
                   		Sit Dolor
                   		Amet
                    </div>
                    
                    
              </dd>

        </dl>
        

    </fieldset>

   

    <fieldset class="action">
    <dl>        
       
     
// J'aimerai centrer cet élément
     <dd><input type="text" name="reponse" id="reponse" size="32" maxlength="32" /></dd>
     
   
// Et centrer celui là sur une autre ligne
   	 <dd><input type="submit" name="submit" id="submit" value="Valider" /></dd>
  
   	 
     </dl>
    	

    </fieldset>
 
    
    
    

</form>
</div>


J'aimerai connaître la CSS à appliquer pour centrer mon champs de réponse et mettre en dessous, toujours en centré, le bouton valider.

Voici pour vous aider mon CSS actuel: 

body {font:12px/17px Arial, Helvetica, sans-serif; color:#333; background:#ccc; }

fieldset {background:#f2f2e6; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; width:600px; }

input, textarea, select {font:12px/12px Arial, Helvetica, sans-serif; padding:0;}

fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-40px;}

legend {background:#9EB3B7; color:#fff; font:17px/21px Calibri, Arial, Helvetica, sans-serif; padding:0 10px; margin:-26px 0 0 -11px; font-weight:bold; border:1px solid #fff; border-color:#e5e5c3 #505014 #505014 #e5e5c3; }

label {font-size:11px; font-weight:bold; color:#666;}

label.opt {font-weight:normal;}



dl {clear:both;}

dt {float:left; text-align:right; width:90px; line-height:25px; margin:0 10px 10px 0;}

dd {float:left; width:475px; line-height:25px; margin:0 0 10px 0;}



.error{color:red;}

#container {width:700px; margin:0 auto;  padding:40px 20px 20px 20px;}

.message{width:600px; background-color:#ebebdb; margin:auto; text-align:center; margin-bottom:50px; border:1px dashed #b6b6b6; font-family:Courier; }


Voici le résultat actuel:
http://img22.imageshack.us/img22/4328/image2de.png


Merci d'avance et très bonne journée
Modifié par PHPnewb (12 Aug 2010 - 13:46)
Administrateur
PHPnewb a écrit :
Oui j'ai déjà dévoré toutes les pages de cet excellent site, cependant là je sèche.

Hello,

Du coup je ne comprends pas, le tutoriel sur le centrage des éléments ne t'a pas aidé ?
A quel endroit cela ne fonctionne pas ?
Qu'as-tu testé ?
J'ai essayé énormément de chose, j'ai essayé d'appliquer un margin:auto sur les éléments input du fieldset action, un peu comme ça:

fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-40px; width:600px; }


.action input{margin-left:auto; margin-right:auto; width:100px; }


Mais ça ne change rien... J'ai également essayé de travailler avec les positions relatives et absolues, mais non, ça ne veut pas se centrer, je me demande ce que je fais de mal...
Administrateur
PHPnewb a écrit :
J'ai essayé énormément de chose, j'ai essayé d'appliquer un margin:auto sur les éléments input du fieldset action

Les éléments input sont des éléments inline donc ne seront pas affectés par ces propriétés.

PHPnewb a écrit :
J'ai également essayé de travailler avec les positions relatives et absolues, mais non, ça ne veut pas se centrer, je me demande ce que je fais de mal...

Houla, tu vas chercher vraiment très compliqué.
En fait, puisque ce sont des éléments de type inline, il te suffit d'indiquer un "text-align: center" sur le bloc parent :


fieldset {text-align: center}
Hello,

J'ai cru voir une classe "niceform"..., j'en conclus que tu dois utiliser le JavaScript proposé par emblematiq cela doit donc se jouer au niveau de la feuille de styles intitulée "niceforms-default.css"...
Il n'est pas toujours simple de modifier ce genre de chose, le module Firebug pour Firefox (ou tout autre add-on du même acabit pour divers navigateurs) pourrait très certainement t'être d'une aide précieuse, une page en ligne de ton formulaire pourrait également nous aider à te venir en aide Smiley cligne

Bon courage,
Cdt,
Sylvain
J'étais en train de me pencher dessus justement, mais je n'obtiens pas un alignement "parfait", voyez plutôt:

http://img37.imageshack.us/img37/8915/image3fl.png


J'ai juste fait un align center, voici le CSS:



body {font:12px/17px Arial, Helvetica, sans-serif; color:#333; background:#ccc; }

fieldset {background:#f2f2e6; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; width:600px; }

input, textarea, select {font:12px/12px Arial, Helvetica, sans-serif; padding:0;}

fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-40px; width:600px; text-align:center; }




legend {background:#9EB3B7; color:#fff; font:17px/21px Calibri, Arial, Helvetica, sans-serif; padding:0 10px; margin:-26px 0 0 -11px; font-weight:bold; border:1px solid #fff; border-color:#e5e5c3 #505014 #505014 #e5e5c3; }

label {font-size:11px; font-weight:bold; color:#666;}

label.opt {font-weight:normal;}



dl {clear:both;}

dt {float:left; text-align:right; width:90px; line-height:25px; margin:0 10px 10px 0;}

dd {float:left; width:475px; line-height:25px; margin:0 0 10px 0;}

#footer {font-size:11px;}

.error{color:red;}

#container {width:700px; margin:0 auto;  padding:40px 20px 20px 20px;}

.message{width:600px; background-color:#ebebdb; margin:auto; text-align:center; margin-bottom:50px; border:1px dashed #b6b6b6; font-family:Courier; }




select, input, textarea, button {outline:none; resize:none;}


*{margin:0; padding:0;}


EDIT: Exact 6l20, j'utilise ce script car je trouve leur bouton et leurs champs de textes plutôt sympa, mais de là venait les problèmes aussi... Quand je jouais sur les marges, mon bouton se divisait en 3 parties etc, c'était galère. Donc cf. le dernier screen, j'ai viré tout le design du bouton et du champs de texte. Je vais maintenant me pencher sur le fichier CSS dont tu parles.
Modifié par PHPnewb (12 Aug 2010 - 15:57)
Sujet clos
Aller à