Problème de saut de ligne

Marsh Posté le 15-08-2006 à 10:34:50

Je suis entrain de me mettre en page un formulaire via css.
J'ai donc fait mon p'tit code html:

Code :

<form action="index.php?page=contacts.php" method="post">
<div class="formulaire_titre">Nom*</div><div class="formulaire_champs"><input type="text" name="nom" size="45" maxlength="20" /></div>
<div class="formulaire_titre">Prenom*</div><div class="formulaire_champs"><input type="text" name="prenom" size="45" maxlength="20" /></div>
<div class="formulaire_titre">Société*</div><div class="formulaire_champs"><input type="text" name="societe" size="45" maxlength="20" /></div>
<div class="formulaire_titre">Adresse*</div><div class="formulaire_champs"><input type="text" name="adresse" size="45" maxlength="100" /></div>
<div class="formulaire_titre">Code postal</div><div class="formulaire_champs"><input type="text" name="zip" size="25" maxlength="20" /></div>
<div class="formulaire_titre">Ville*</div><div class="formulaire_champs"><input type="text" name="ville" size="45" maxlength="20" /></div>
<div class="formulaire_titre">Pays*</div><div class="formulaire_champs"><input type="text" name="pays" size="45" maxlength="20" /></div>
<div class="formulaire_titre">Téléphone</div><div class="formulaire_champs"><input type="text" name="tel" size="25" maxlength="40" /></div>
<div class="formulaire_titre">Email*</div><div class="formulaire_champs"><input type="text" name="mail" size="45" maxlength="40" /></div>
<div class="formulaire_titre">Votre Commentaire*</div><div class="formulaire_champs"><textarea name="commentaire" rows="10" cols="34" ></textarea></div>
<input type="submit" name="submit" value="Envoyer" class="bouton" />
</form>

mon p'tit code css:

Code :

.formulaire_titre
{
padding-left:2px;
margin-bottom:2px;
width:180px;
height:20px;
position:relative;
left:20px;
top:0px;
background-color:#898a6c;
color:white;
font:12px, Century Gothic;
}
.formulaire_champs
{
position:relative;
top:-22px;
left:210px;
padding:0px;
margin-top:0px;
width:100px;
background-color:red;
color:black;
font:12px, Century Gothic;
}

et voila le résultat:

(ne pas faire attention au bouton, c'est provisoire...)

On voit donc qu'il y a un saut de ligne indésirable, dont je n'explique pas la présence. auriez vous une idée pourle faire disparaître? Merci d'avance :jap:

Reply

Marsh Posté le 15-08-2006 à 10:34:50

Reply

Marsh Posté le 15-08-2006 à 11:01:24

il faut prendre les bonnes habitudes des le départ :
-mettre un label autour du texte, et l'associé à son input :
ex : <label for="nom">nom</label><input id="nom">
je ne les ai pas mis dans ton code car j'ai la flème
-Eviter les div, c'est bien les div, mais trop de div, tu les divs. Ya largement assez d'éléments en HTML pour faire mumuse et eviter les Div, utilise les Div pour faire des encadrement de boite ou autre
-evite d'utiliser les position :relative pour du positionnement comme ça, un positionnement flottant suffit largement

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style>
form.inscription {}
form.inscription label {
background-color:#898a6c;
color:white;
font:12px, Century Gothic;
float:left;
width:180px;
padding:1px 5px;
margin-top:2px;
}
form.inscription input,form.inscription textarea {
width:250px;
color:black;
font:12px, Century Gothic;
border:1px solid gray;
vertical-align:top;
margin-left:5px;
}
form.inscription textarea {
height:100px;
}
form.inscription p.button {text-align:center; margin:0}
form.inscription p.button input {
color:black;
background:#898a6c;
font-weight:bold;
width:auto;
height:auto;
margin:0 auto;
}
form.inscription br {clear:both;}
</style>
</head>
<body>
<form class="inscription" action="index.php?page=contacts.php" method="post">
<label>Nom*</label><input type="text" name="nom" /><br />
<label>Prenom*</label><input type="text" name="prenom" /><br />
<label>Société*</label><input type="text" name="societe" /><br />
<label>Adresse*</label><input type="text" name="adresse" /><br />
<label>Code postal</label><input type="text" name="zip" maxlength="20" /><br />
<label>Ville*</label><input type="text" name="ville" /><br />
<label>Pays*</label><input type="text" name="pays" /><br />
<label>Téléphone</label><input type="text" name="tel" /><br />
<label>Email*</label><input type="text" name="mail" /><br />
<label>Votre Commentaire*</label><textarea name="commentaire"></textarea><br />
<p class="button">
<input type="submit" name="submit" value="Envoyer" />
</p>
</form>
</body>
</html>

Reply

Marsh Posté le 15-08-2006 à 11:31:01

Ah tiens, j'avais jamais entendu parler de ce "label".
Je viens de regarder dans un livre sur l'html, l'auteur ferme le </label> après la balise <input>, c'est une erreur, ou bien cela n'a pas d'importance?

En tous cas la mise en page fonctionne bien mieux comme ça, merci beaucoup! :jap:

Message édité par Aquineas2 le 15-08-2006 à 11:31:12

Reply

Marsh Posté le 15-08-2006 à 11:57:23

le label permet d'associer un texte à un input.

parfois on met l'input dans le label parfois non
moi je ne le met pas, mais ça peut être une erreur, car en pensant en terme de bloc, le texte est séparé de son input.

parfois il vaut mieux faire ceci :
<label><span>texte</span><input type="text"></label>

Ca permet d'avoir plus de pouvoir sur la mise en page

Reply

Marsh Posté le 15-08-2006 à 12:07:08

Merci pour ce complément!

Reply

Problème de saut de ligne

Sujets relatifs:

Leave a Replay