28220 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page d'un formulaire

Bonjour tout le monde !!!!

J'aurais besoin de votre aide !! j'arrive pas à mettre en page mon formulaire correctement... ma page

mon code html : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>Ecole de Musique de Rolle et Environs</title>
  <link rel="stylesheet" type="text/css" href="../css/config.css" />
  <link rel="stylesheet" type="text/css" href="../css/menu.css"/>
 <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />



</head>




<body>
                  <div class="tete">
                  </div>

                  <div id="espace_menu">          <?php include "../menu/menu.php"; ?>
                  </div>

                  <div class="arrondi">
                       <br/><br/><br/>
                       <form method="post" action="formliens_php.php">

                              <p>
                                 <label>Société :</label>
                                 <input class='#' name="societe" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Lieu, Région :</label>
                                 <input class='#' name="lieu" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Canton :</label>
                                 <input class='#' name="canton" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Pays :</label>
                                 <input class='#' name="pays" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Site internet :</label>
                                 <input class='#' name="site" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Webmaster :</label>
                                 <input class='#' name="webmaster" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Adresse email :</label>
                                 <input class='#' name="email" type="text" size="35"/>
                              </p>

                              <p>
                                 <label>Commentaire :</label>
                                <textarea class='#' name="commentaire" rows="5" cols="34">
                                </textarea>
                              </p>

                              <p>
                               <input class='Button' type="submit" value="Ajouter le lien">
                               <input class='Button' type="reset" value="Recommencer">
                      </p>

                      </form>
            </div>
</body>

</html>


le bout de CSS concerné : 

/*Formulaire*/

form {
background-color: #99CC99;
width:400px;
border: thin solid #000000;
margin: 0 auto;

}
label {
font-family: Comic Sans MS;
font-weight:bold
display: inline;


}

input {
border:1px solid black;
background-color:#DADADA;
font-family: Comic Sans MS;
color:black;
float: right;
margin-right: 75px;
width: 170px;

}
select, option {
background-color: #DADADA;
color:black;

}
textarea {
border:1px solid black;
background-color: #DADADA;
font-family: Comic Sans MS;
color:black;
}


J'ai essayé toute sorte de variantes trouvées dans des tutoriels mais je suis arrivée à aucun résultat acceptable... et pourtant c'est basique Smiley fache
Modifié par p_tite_jo (08 Sep 2005 - 22:34)
Salut,

Non non rien n'est basique dans les formulaires...creuse un peu tu verras c'est un sujet plus complexe qu'il n'y paraît

Bon ben pour le tien encore faudrait-il que tu nous expliques ce que tu veux faire Smiley cligne mais basiquement je te propose de changer ta css comme ci dessous, ça sera un bon début:

label {
float: left;
margin-left: 10px;
font-family: Comic Sans MS;
font-weight:bold
display: block;
clear: both;

}
p {
margin: 3px 0 3px 0; 
padding: 0;
}


Essayé uniquement sous IE6 et FF vite fait sur le gaz... sous FF les boutons en bas sortent de la boite formulaire, va falloir optimiser un peu!
Tiens d'ailleurs pourquoi ne pas supprimer le bouton recommencer, je ne trouve pas ça très utile!
Bonne continuation
Modifié par zanzibar (08 Sep 2005 - 17:29)
Merci c'est déjà mieux... tu peux m'expliquer ce que tu m'a proposé ? c'est le 
display: block;
qui permet d'aligné le tout ? et le 
clear: both;
il sert à quoi ? comment je fais pour que mon bouton rentre dans ma div sous FF ? (j'avais déjà relevé le problème Smiley ohwell )
et quelles sont toutes ces valeurs que tu donnes au margin de p ?? (sorry j débute Smiley ohwell )
Modifié par p_tite_jo (08 Sep 2005 - 17:31)
Le 
display: block;
qui pourrait à priori aussi être un 
display: inline;
comme tu avais fait au début permet de passer le label suivant à la ligne sans venir prendre la place du input et le clear annule l'effet des float et permet de recommencer une ligne d'éléments flottants en dessous sans interagir avec la précédente.

Pour les boutons basiquement je dirais jouer sur le padding-bottom du form mais il faut plutôt chercher pourquoi ça se comporte différemment sur les 2 navigateurs pour le traiter correctement...désolé pas le temps de faire mieux Smiley smile

Pour le margin j'ai fait ça un peu rapidement:
en fait tu peux donner les 4 valeurs de marges en une seule ligne avec la syntaxe 
margin: haut droite bas gauche;

C'est équivalent à
 
margin-top: haut;
margin-right: droite;
margin-bottom: bas;
margin-left: gauche


dans lesquelles haut bas droite et gauche sont les valeurs de tes marges en px par exemple. Cette forme de contraction de commande marche pour beaucoup d'autres propriétés css et économise quelques lignes de code Smiley biggrin Ca s'appelle la notation raccourcie.
Modifié par zanzibar (08 Sep 2005 - 17:57)
J'ai réussi à résoudre quelques soucis de mise en page grâce à l'aide de zanzibar mais je ne suis pas au bout de mes peines...
1) Zanzibar a dit:
a écrit :
Pour les boutons basiquement je dirais jouer sur le padding-bottom du form mais il faut plutôt chercher pourquoi ça se comporte différemment sur les 2 navigateurs pour le traiter correctement...
En effet, ça résout le problème sous firefox, mais ça rajoute aussi une marge sous IE qui n'est pas très esthétique... quel est le moyen pour arriver au même résultat sur les deux navigateurs...
2) les input sont collés sous firefox et sur IE ils sont bien disposés tant qu'on n' agrandit pas la taille de la police de la page! De quelle(s) façon(s) peut-on les espacer de manière régulière sur firefox et sur IE quand on aggrandit la taille de la police ?
3) toujours quand on agrandit la taille de la police de la page, le textarea sort du cadre vert (sous firefox). comment remédier à cela ?

Voilà je crois que j'ai fait le tour de mes soucis... je vous donne encore mes codes...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>Ecole de Musique de Rolle et Environs</title>
  <link rel="stylesheet" type="text/css" href="../css/config.css" />
  <link rel="stylesheet" type="text/css" href="../css/menu.css"/>
 <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />



</head>




<body>
                  <div class="tete">
                  </div>

                  <div id="espace_menu">          <?php include "../menu/menu.php"; ?>
                  </div>

                  <div class="arrondi">
                       <br/><br/><br/>
                       <form method="post" action="formliens_php.php">

                              <p class="formulaire">
                                 <label>Société :</label>
                                 <input name="societe" type="text" size="35"/>
                              </p>

                              <p class="formulaire">
                                 <label>Lieu, Région :</label>
                                 <input name="lieu" type="text" size="35"/>
                              </p>

                              <p class="formulaire">
                                 <label>Canton :</label>
                                 <input name="canton" type="text" size="35"/>
                              </p>

                             <p class="formulaire">
                                 <label>Pays :</label>
                                 <input name="pays" type="text" size="35"/>
                              </p>

                              <p class="formulaire">
                                 <label>Site internet :</label>
                                 <input name="site" type="text" size="35"/>
                              </p>

                             <p class="formulaire">
                                 <label>Webmaster :</label>
                                 <input name="webmaster" type="text" size="35"/>
                              </p>

                             <p class="formulaire">
                                 <label>Adresse email :</label>
                                 <input name="email" type="text" size="35"/>
                              </p>

                              <p class="formulaire">
                                 <label>Commentaire :</label>
                                <textarea name="commentaire" rows="5" cols="35">
                                </textarea>
                              </p>

                             <p class="formulaire">
                               <input type="submit" value="Ajouter le lien">
                      </p>

                      </form>
            </div>
</body>

</html>


CSS 

form {
position: relative;
background-color: #99CC99;
width:400px;
border: thin solid #000000;
margin: 0 auto;


}
label {
float: left;
margin-left: 10px;
font-family: Comic Sans MS;
font-weight:bold
display: block; /*permet de passer le label suivant à la ligne sans venir prendre la place du input*/
clear: both; /*le clear annule l'effet des float et permet de recommencer une ligne d'éléments flottants en dessous sans interagir avec la précédente*/
}

input {
border:1px solid black;
background-color:#DADADA;
font-family: Comic Sans MS;
color:black;
float: right;
margin-right: 75px;
width: 170px;

}
select, option {
background-color: #DADADA;
color:black;

}
textarea {
border:1px solid black;
background-color: #DADADA;
font-family: Comic Sans MS;
color:black;
}
p.formulaire {
margin: 10px 0 10px 0;
padding: 0;
}
Oui, merci j'ai vu ce sujet tout à l'heure quand j'ai refait une recherche sur le forum... tes liens m'ont d'ailleurs permis de résoudre mes problèmes. Merci
Sinon perso j'utilise plutot cette syntaxe :


<div>
<label for="commentaire">Commentaire :</label>
<textearea name="commentaire" id="commentaire" rows="5" cols="10"></textarea>
</div>


D'abord je penses que la balise <p> n'est pas appropriée. Ce n'est finalement pas un paragraphe avec du texte. Donc un div neutre va pas mal Smiley cligne

Et l'utilisation de for= en rapport à l'id du champs pour avoir plus de contrôle niveau CSS si besoin plus tard...

Avec un float:left sur les label çà le fait..
Modifié par ernstein (08 Sep 2005 - 23:03)
Sujet clos
Aller à