Problème de saut de ligne

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème de saut de ligne

Aquineas2

Damoiseau

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:

Publicité

gatsu35

Blablaté par Harko

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>

Aquineas2

Damoiseau

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

gatsu35

Blablaté par Harko

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

Aquineas2

Damoiseau

Merci pour ce complément!

FORUM HardWare.fr

Programmation

HTML/CSS

Problème de saut de ligne

Sujets relatifs
[C]Problème d'inclusions imbriquées	[LINUX] Probleme de gcc sous le terminal
Problème de liens survolé	[sql/Excel] requête sql vers Excel : problème de saut de ligne ...
Probleme de saut de ligne	probleme de saut de ligne
Problème socket et saut de ligne [Résolu]	Saut de ligne dans un LAYOUT -> Probleme !
[ASP] Probléme pour le saut de ligne	[VB] problème de saut de ligne dans fichier
Plus de sujets relatifs à : Problème de saut de ligne

Page générée en 0.068 secondes