Alignement label et textarea
Résolu
santiago69
Messages postés
485
Statut
Membre
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
salut a tous,
je commence a apprendre le html, css, php.
j'ai un formulaire dans une page php tout bete.
pas encore de mise en forme css.
mon probleme est que les label des textarea sont alignes en bas.
est il possible, en html ou css de les aligner en haut ou au millieu. De la meme maniere qu'on aligne une image.
Vous pouvez voir un exemple du probleme a l'adresse suivante : http://santiago.news.free.fr
on constate que le textarea est toujours aligne en bas par rapport au texte alors qu'on peut choisir d'aligner l'image en haut ou en bas.
Merci de votre aide
Santiago
je commence a apprendre le html, css, php.
j'ai un formulaire dans une page php tout bete.
pas encore de mise en forme css.
mon probleme est que les label des textarea sont alignes en bas.
est il possible, en html ou css de les aligner en haut ou au millieu. De la meme maniere qu'on aligne une image.
Vous pouvez voir un exemple du probleme a l'adresse suivante : http://santiago.news.free.fr
on constate que le textarea est toujours aligne en bas par rapport au texte alors qu'on peut choisir d'aligner l'image en haut ou en bas.
Merci de votre aide
Santiago
A voir également:
- Label textarea
- Label printer logiciel - Télécharger - Outils professionnels
- Ronyasoft cd dvd label maker - Télécharger - Photo & Graphisme
- Barcode Label Printing Software TFORMER - Télécharger - Bureautique
- Cd label designer - Télécharger - Impression
- Label maker - Télécharger - Photo & Graphisme
3 réponses
Salut,
Voilà un problème bien présenté !
Une propriété CSS permet de régler le problème :
J'ai vu que ça marche aussi en l'appliquant à textarea.
Selon tes besoins, pense à assigner une classe ou un nom aux labels que tu veux aligner en haut.
Méfie-toi aussi avec les propriétés utilisées. Cela peut parfois entraîner un comportement non désiré. M'enfin là, ça devrait marcher sans problème.
Voilà un problème bien présenté !
Une propriété CSS permet de régler le problème :
label {
vertical-align: top;
}
J'ai vu que ça marche aussi en l'appliquant à textarea.
Selon tes besoins, pense à assigner une classe ou un nom aux labels que tu veux aligner en haut.
Méfie-toi aussi avec les propriétés utilisées. Cela peut parfois entraîner un comportement non désiré. M'enfin là, ça devrait marcher sans problème.
C'est parfait.
Effectivement, ca marche aussi bien avec
qu'avec
Merci Bertrand. J'ai bien note ton conseil pour les classe que j'utilise deja mais j'avais allege au maximum mon code pour mettre en valeur le probleme specifique qui m'interessait.
Effectivement, ca marche aussi bien avec
label {
vertical-align: top;
}
qu'avec
textarea {
vertical-align: top;
}
Merci Bertrand. J'ai bien note ton conseil pour les classe que j'utilise deja mais j'avais allege au maximum mon code pour mettre en valeur le probleme specifique qui m'interessait.
Bonjour,
Tu peux aussi contrôler plus précisément les éléments.
Par CSS simplement.
Et/ou, comme tu sembles les utiliser, avec un tableau.
Un début de solution
--
Tu peux aussi contrôler plus précisément les éléments.
Par CSS simplement.
Et/ou, comme tu sembles les utiliser, avec un tableau.
Un début de solution
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Présenter un formulaire</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #b0c4de;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 760px;
text-align: left;
border : 1px solid #f0ffff;
background-color: #f0f8ff;
font-family: Verdana, sans-serif;
}
#f1 {
border : 1px dashed #f00;
}
#f1 span {
display : block;
}
#f1 label {
float : left;
width : 40%;
text-align : right;
padding-right : .3em;
}
#f2 {
border : 1px dashed #f0f;
}
#t2 td {
vertical-align : top;
}
#t2 .tdg {
text-align : right;
}
</style>
</head>
<body onload="document.getElementById('nom1').focus()">
<div id="conteneur">
<p> </p>
<form method="post" action="action.php" id="f1">
<span><label>Nom : </label>
<input type="text" id="nom1" /></span>
<span><label>Prénom : </label>
<input type="text" /></span>
<span><label>Adresse : </label>
<textarea></textarea></span>
<span><label>Image (alignement haut) : </label>
<img src="Picture.jpg" width="128" height="128" border="1"></span>
<span><label>Image (alignement bas) : </label>
<img src="Picture.jpg" width="128" height="128" border="1"></span>
</form>
<p> </p>
<form method="post" action="action.php" id="f2">
<table width="100%" id="t2">
<tr>
<td class="tdg" width="30%"><label>Nom : </label></td>
<td width="50%"><input type="text" /></td>
</tr>
<tr>
<td class="tdg"><label>Prénom : </label></td>
<td><input type="text" /></td>
</tr>
<tr>
<td class="tdg"><label>Adresse : </label></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td class="tdg"><label>Image (alignement haut) : </label></td>
<td><img src="Picture.jpg" width="128" height="128" border="1"></td>
</tr>
<tr>
<td class="tdg"><label>Image (alignement bas) : </label></td>
<td><img src="Picture.jpg" width="128" height="128" border="1"></td>
</tr>
</table>
</form>
<p> </p>
</div>
</body>
</html>
--
