Sujet Précédent Sujet Suivant

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:

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

1
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 775
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>

--
-1

Discussions similaires

[VBA] Afficher une variable dans un label
JC_56 -
JC_56 -

4 réponses
textarea avec php
laurent75014 -
muco45 -

14 réponses
Perte de fichiers
MmeRC -
fermiparadoxx -

3 réponses
Vous connaissez un site fiable de maillot foot pas cher ?
nsmb -
Utilisateur anonyme -

1 réponse
Affiche une image dans Label Tkinter
easyGroupe -
mamiemando -

3 réponses