Alignement label et textarea

Résolu

santiago69 -

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

--

Il y a 10 types de personnes dans le monde
Ceux qui comprennent le binaire et les autres.

Configuration: Windows XP
Internet Explorer 7.0

Afficher la suite

A voir également

Alignement label et textarea
Label printer logiciel - Télécharger - Outils professionnels
Ronyasoft cd dvd label maker - Télécharger - Photo & Graphisme
Cd label designer - Télécharger - Impression
Label jam dymo - Forum Matériel & Système
Supprimer alignement cartouche hp - Forum Imprimante

3 réponses

Réponse 1 / 3 - Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
BertrandBC
Salut,

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.
9

Réagir
Réponse 2 / 3
santiago69 Auteur
C'est parfait.
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.
1

Réagir

Gihef Contributeur

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

<!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>&nbsp;</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>&nbsp;</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>&nbsp;</p>

  </div>
</body>
</html>

Alignement label et textarea

3 réponses

Discussions similaires

Newsletters