Alignement label et textarea

Résolu/Fermé

santiago69 Messages postés 477 Date d'inscription mercredi 7 mars 2001 Statut Membre Dernière intervention 12 septembre 2016 - 20 nov. 2007 à 12:18
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 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
Cd dvd label maker - Télécharger - Photo & Graphisme
Cd label designer - Télécharger - Impression
Label maker pc - Télécharger - Photo & Graphisme
Acoustica cd label maker - Télécharger - Gravure

3 réponses

Réponse 1 / 3

BertrandBC Messages postés 81 Date d'inscription jeudi 3 juin 2004 Statut Membre Dernière intervention 3 janvier 2009 15
20 nov. 2007 à 13:08

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 mercredi 7 mars 2001 Statut Membre Dernière intervention 12 septembre 2016 209
20 nov. 2007 à 13:21

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 mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 777
20 nov. 2007 à 14:08

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

[VBA] Afficher une variable dans un label

Affiche une image dans Label Tkinter

Tape Jam

textarea avec php