Alignement label et textarea

Résolu

santiago69 Messages postés 477 Date d'inscription Statut Membre Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention - 20 nov. 2007 à 14:08

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

A voir également:

Label 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
Barcode Label Printing Software TFORMER - Télécharger - Bureautique
Label maker - Télécharger - Photo & Graphisme

3 réponses

Réponse 1 / 3

BertrandBC Messages postés 81 Date d'inscription Statut Membre Dernière intervention 15

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.

Réponse 2 / 3

santiago69 Messages postés 477 Date d'inscription Statut Membre Dernière intervention 209

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.

Réponse 3 / 3

Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention 2 779

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>

Discussions similaires

Perte de fichiers

Tape Jam

Votre réponse

Discussions similaires