HTML:
- ajout d'un span autour de Civilité pour pouvoir l'aligner
- correction des for/id pour les boutons radio
, l'input est mis DANS le label pour pouvoir le styler plus rapidement. Ça présente un petit défaut d'accessibilité du coup mais c'est vraiment plus rapide côté CSS ...
CSS:
- y a des commentaires dans le code
- et des couleurs de fond pour bien visualiser ce qui se passe
- pour les 4 champs de saisie, on fait flotter le paragraphe (il lui faut une largeur fixe, grosso modo la moitié de ton formulaire de 620px de large)
- on fait aussi flotter le label et l'input, la largeur est aussi fixée pour chacun et on rajoute des marges pour éviter que ça se touche en cas d'agrandissement des caractères.
- alignement à gauche du texte des label comme sur ton image
- line-height sur les paragraphes
- pour les boutons radio, on fait flotter à gauche span+label+label+label et la largeur (et marge à droite) du span est la même que celle des label ci-dessus: ça s'aligne. Ensuite on espace bien les
<label><input type="radio" />texte</label>
avec une marge et on fixe la largeur pour que ça contienne le mot le plus long, au moins.
- si tu veux virer le soulignement sous les abréviations, tu peux rajouter
abbr {
border-bottom: none;
}
Le code résultant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title>Formulaire d'inscription - Alsacréations</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
color: black;
background: white;
font: normal 62.5% Verdana, Arial, Sans-Serif; /* 1em équivalent à 10px */
}
#inscription {
width: 620px;
margin: 10px 0 0 16px;
}
fieldset {
border-color: #90CA40;
padding: 0 0 0 2px;
font-size: 1.4em; /* 14px pour les enfants legend, label et input */
}
legend {
color: #90CA40;
font-weight: bold;
padding: 0 15px 0 10px;
}
form p {
color: darkblue;
margin: 2px 0;
background-color: #afa;
}
/* = paragraphes flottants, 2 par ligne */
form p.saisie {
float: left;
width: 264px;
margin-right: 35px;
margin-bottom: 7px;
}
form p.saisie label{
float: left;
width: 80px;
margin-right: 16px;
text-align: left;
background-color: #fcc;
}
form p.saisie input {
float: left;
width: 160px;
padding: 2px 0 3px 0;
background-color: #ccf;
}
/* = paragraphes occupant toute une ligne, dont celui avec les boutons radio */
form p.ligne {
clear: both;
margin-bottom: 10px;
}
form p.ligne span { /* ajout d'un span autour du mot Civilité pour l'aligner avec les label */
/* pour les boutons radio */
display: block;
float: left;
width: 80px;
margin-right: 16px;
text-align: left;
background-color: #faa;
}
form p.ligne label {
/* pour les boutons radio */
float: left;
width: 60px;
margin-right: 10px;
background-color: #aaf;
}
/* = Bouton de soumission à la fin, stylage en cas d'absence de l'image */
form p.soumettre {
text-align: right;
margin: 0 20px 10px 0;
}
form p.soumettre input {
font-size: 1.4em;
background-color: aqua;
color: black;
}
abbr {
border-bottom: none;
}
</style>
</head>
<body>
<div class="totomachin">
<form action="traite.php" method="post" id="inscription">
<fieldset><legend>Inscription</legend>
<p class="ligne">Être informé chaque semaine par mail :</p>
<p class="saisie"><label for="email">Email*</label>
<input type="text" name="email" id="email" value="tayst" /></p>
<p class="saisie"><label for="prenom">Prénom*</label>
<input type="text" name="prenom" id="prenom"/></p>
<p class="saisie"><label for="nom">Nom*</label>
<input type="text" name="nom" id="nom" /></p>
<p class="saisie"><label for="num"><abbr title="Numéro">N°</abbr></label>
<input type="text" name="num" id="num" /></p>
<p class="ligne"><span>Civilité</span>
<label for="civilite_m"><input type="radio" name="civilite" id="civilite_m" value="m" /><abbr title="Monsieur">M.</abbr></label>
<label for="civilite_mme"><input type="radio" name="civilite" id="civilite_mme" value="mme" /><abbr title="Madame">Mme</abbr></label>
<label for="civilite_mlle"><input type="radio" name="civilite" id="civilite_mlle" value="mlle" /><abbr title="Mademoiselle">Mlle</abbr></label></p>
<p class="ligne">newsletter / alerte</p>
<p class="soumettre"><input type="image" src="images/sinscrire.png" name="soumission" id="soumission" alt="S'inscrire" /></p>
</fieldset>
</form>
</div>
</body>
</html>
EDIT: si mon code était valide, ce serait mieux. Zou, fait.
Modifié par Felipe (18 Jan 2009 - 12:28)
):
'tention y en a que ça énerve de voir figurer Mme et Mlle)
