28172 sujets

CSS et mise en forme, CSS3

[Résolu] Knacss: centrer mon formulaire au milieu de la page web

Bonjour,

J'aimerais centrer mon formulaire en plein milieu de ma page web. Cependant, j'utilise le framework css knacss. Je voudrais savoir s' il existe une class de knacss qui fait cela?

Je vous remercie de votre aide.
Effectivement, j'ai essayé de centrer avec la classe .center mais ça ne fonctionne pas donc je vais essayer par mes propres connaissances en css.

J'aimerais savoir, si c'est mieux de récréer un fichier css lorsqu'on veut faire des modifs ou rajouter ces modifs dans le fichier knacss? Qu'est ce qui est le plus pratique lorsqu'il faudra revenir sur le code.

Je vous remercie.
Administrateur
Votre formulaire a-t-il bien une largeur définie ? (sans quoi, occupant toute la largeur, il ne peut effectivement pas être centré)

pour l'usage de KNACSS, cela dépend: généralement il est pratique de travailler sur plusieurs fichiers CSS en phase de développement, puis de concaténer l'ensemble en prod.
Si j'ai bien compris la philosophie de knacss, j'utilise les classes du css pour les implémenter dans mon html. Donc, concernant mon formulaire, j'ai utilisé la class .w30 pour lui donner une largeur. Pour comprendre concrêtement ce que j'ai effectué, vous retrouverez ci-dessous mon code.

Voici mon formulaire (HTML):


<form class="w30 center"id="authentification" method="post" action="verif_form.php">
         <fieldset>
	              <h1 id="titre-h1"class="txtcenter">Log in</h1>
				
			     <input class="w80 center mt2 biggest" id="utilisateur" type="text"
                              placeholder="Identifiant" autofocus required>          
				
			     <input class="w80 mt1 center biggest" id="motdepasse" type="password" 
                              placeholder="Password" required> 
	</fieldset>

			<input class="w70 mt2 center biggest" id="submit" type="submit"
                         value="connexion"> 
      
                         <a href="" class="txtcenter mtm">Vous avez oublié votre mot de passe?</a>
			 <a href="" class="txtcenter">Inscrivez-vous...</a>
</form>


Et voici la partie CSS concernant le formulaire:


form
{
  background-color: #2ECC71;
  height: 370px;
}



Merci de votre aide.
Je me suis peut être mal exprimé... Smiley smile Effectivement, il est centré horizontalement mais je souhaiterais qu'il soit centré, par la même occasion, verticalement.

Merci pour votre aide.
Administrateur
Ah oui, dans ce cas c'est un tout autre (vaste) sujet !

Il vaut mieux commencer par relire le tutoriel Alsacreations sur le centrage vertical Smiley smile
J'ai fait ça et ça fonctionne:



<form class="w30" id="authentification" method="post" action="verif_form.php">
      
			<fieldset>
			
				<h1 id="titre-h1"class="txtcenter">Log in</h1>
				
				<input class="w80 center mt2 biggest" id="utilisateur" type="text" placeholder="Identifiant" autofocus required>
				<input class="w80 mt1 center biggest" id="motdepasse" type="password" placeholder="Password" required>
			
			</fieldset>

			<input class="w70 mt2 center biggest" id="submit" type="submit" value="connexion">
      
			<a href="" class="txtcenter mtm">Vous avez oublié votre mot de passe?</a>
			<a href="" class="txtcenter">Inscrivez-vous...</a>
		
		</form>






#authentification
{
   position: absolute;
   left: 50%;
   top: 50%;
   width: 500px;
   margin-left: -250px;
   margin-top: -185px;
   background-color: #2ECC71;
}


Je vous remercie pour votre aide... Smiley cligne

Une dernière question (plutôt pour ma culture perso Smiley smile ): Lorsqu'on adapte le site aux différentes tailles d'écrans peut on parler de responsive design?
Administrateur
Attention, cette technique de centrage est risquée voire déconseillée : elle ne fonctionne plus si le contenu du formulaire change ou si l'utilisateur modifie sa taille de police.

pour répondre à ta question : cela peut être du responsive, du fluide ou du adaptive : http://liquidapsive.com
Modifié par Raphael (24 Feb 2014 - 20:12)
Sujet clos
Aller à