High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

Alignement label et textarea

Dernière réponse le 20 nov 2007 à 14:08:04 santiago69, le 20 nov 2007 à 12:18:02 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « alignement label et textarea » dans :
[CSS] alignement label/input (Résolu) Voir
Aligner verticalement radio et textarea Voir
Télécharger CD Label Designer Voir Si vous avez des fichiers MP3 que vous ne savez plus quoi en faire, alors mettez les sur Cd et créer leur des pochettes. CD Label Designer est une application de conception et d’impression de couvertures pour boites de CD, ainsi que des...
Modifier le label (nom) des partitions. VoirToutes les commandes données ici doivent être effectuées par l'administrateur (en mode root). Donnez des noms les plus simples possibles à vos partitions (si possible seulement des caractères alphanumériques (a...z et 0...9) ainsi que - et _. Ces...
Import CSV: Mauvais alignement des dates VoirVous avez ouvert un fichier CSV avec Excel contenant une colonne de dates et ces dernières sont mal alignées. Elles sont par exemple tantôt alignées à droite, tantôt à gauche. A vrai dire, il se peut que votre problème soit plus grave que vous ne...
MPLS - MultiProtocol Label Switching VoirNotion de qualité de service Le terme MPLS (acronyme de « MultiProtocol Label Switching », en français « Qualité de Service ») représente un ensemble de spécifications définies par l'IETF (Internet Engineering TaskForce) consistant à doter les...
Posez votre question Répondre

1

BertrandBC, le 20 nov 2007 à 13:08:56

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

   
Répondre à BertrandBC

2

santiago69, le 20 nov 2007 à 13:21:38

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.


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

   
Répondre à santiago69

3

 Gihef, le 20 nov 2007 à 14:08:04

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>

--

   
Répondre à Gihef
Posez votre question Répondre
Ils ont besoin de votre aide