IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

aligner les input !


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    débutant SAP BO
    Inscrit en
    Avril 2005
    Messages
    228
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France

    Informations professionnelles :
    Activité : débutant SAP BO

    Informations forums :
    Inscription : Avril 2005
    Messages : 228
    Par défaut
    euh oui, je le vois mais je ne comprend pas trop ce que je devrais y voir !

  2. #2
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    hum... ok:
    Il faut savoir que les styles s'héritent. Un élément contenu dans un autre héritera des styles de son conteneur. Sauf si l'élément a un style défini qui écrase celui du conteneur. Sachant ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #corpForm label {
       float: left;
       width:150px;
       text-align: right;
     
    }
    Tous les labels contenus dans corpForm ont une taille de 150px, sont alignés à droite et, le plus important, ils flottent tous à gauche. C'est à dire que le flux HTML normal coule à droite de chaque label.
    Ensuite on écrase et ajoute des styles dans l'élément label contenu dans contexte :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #contexte label {
    clear: left;
    text-align: left;
    }
    Au lieu d'aligner à droite comme le début du formulaire on place le texte à gauche du label. Ensuite le clear dit que le coté gauche du label ne doit pas toucher de boîte flottante. Pourquoi? Apparemment, les checkbox sont des élements plus petits que les autres inputs donc les labels seraient censés couler à droite de chaque label précédent.
    Ce n'est pas forcément clair mais pour illustrer, remplace le style #contexte label actuel par :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #contexte label {
    border: solid 1px red;
    text-align: left;
    }
    Et on comprend tout de suite mieux l'intérêt du clear (un bout de chaque label touche le label précédent en bas à droite).
    En fait, les champs du formulaires coulent à droite des labels grâce à #corpForm label, le clear: left n'est qu'une mise au point.

    Clair?

  3. #3
    Membre confirmé
    Homme Profil pro
    débutant SAP BO
    Inscrit en
    Avril 2005
    Messages
    228
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France

    Informations professionnelles :
    Activité : débutant SAP BO

    Informations forums :
    Inscription : Avril 2005
    Messages : 228
    Par défaut
    ah oui tres clair, mais en fait tu vois ce que tu nommes contexte, est un nom généré automatiquement depuis une table de ma base et qui change selon les tables, donc le nom n'est pas fixe, on ne peux pas rajouter une balise d'un nom different pour que cela fonctionne ?

  4. #4
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Ben mets un id en dur.
    html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <fieldset id="sousForm">
    css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #sousForm label{
    clear: left;
    text-align: left; 
    }

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Differencier les input
    Par topolino dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 07/05/2005, 20h35
  2. [DOM IE]:recuperer tous les input de type checkbox
    Par sleepy2002 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 09/12/2004, 18h38
  3. Mettre les <input> en disabled
    Par Oberown dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 05/10/2004, 15h59
  4. [MFC][Toolbar] Aligner les toolbars
    Par 6psyk9 dans le forum MFC
    Réponses: 3
    Dernier message: 17/05/2004, 21h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo