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 :

[HTML] Positionnement des élements d'un formulaire


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Février 2004
    Messages
    39
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 39
    Par défaut [HTML] Positionnement des élements d'un formulaire
    bonjour,

    lorsque je développais des applications web, j'avais toujours pour habitude de positionné les éléments de mes formulaires à l'aide de tableau, les colonnes me servait pour le positionnement :p

    J'ai cru comprendre que ce n'était pas réellement du XHTML ou du moins que ça n'était pas propre, qu'il vallait mieux utiliser les div.

    J'ai donc fait l'essai, et voilà ce que ça donne : http://img507.imageshack.us/img507/9...ntfinalqs8.jpg

    Mais au final, je me demande si c'est réellement mieux car cela simplifie peut etre la page html, mais ça complique le css, voici mon exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
     #milieu_long_centre
    {
    width : 794px;
    padding: 5px;
    background-color: #948BDF;
    margin-bottom: 20px;
    text-align:center;
    }
     
    #milieu_long
    {
    width : 794px;
    padding: 5px;
    background-color: #948BDF;
    margin-bottom: 20px;
    text-align:left;
    }
     
    #milieu_court
    {
    width : 300px;
    padding: 5px;
    background-color: #948BDF;
    margin: 0px 0px 20px 250px;
    text-align:center;
    }
     
    #gauche
    {
    width : 100px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: #948BDF;
    text-align:center;
    float:left;
    }
     
    #gauche_milieu
    {
    width : 100px;
    margin: 0px 80px 20px 0px;
    padding: 5px;
    background-color: #948BDF;
    text-align:center;
    float:left;
    }
     
    #droite
    {
    width : 100px;
    margin-left: 494px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: #948BDF;
    text-align:center;
    float:right;
    }
     
    #droite_milieu
    {
    width : 100px;
    margin-left: 600px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: #948BDF;
    text-align:center;
    float:right;
    }
    et c'est une version simplifié parce que si je voulais avoir des "droite" d'une autre taille, aligné différement... ça impliquerait plus de balises

    Donc ma question est : faut il abandonné la mise en forme tableau pour la version div? Parce que la version DIV me semble un peu fastidieuse, il est bien plus simple d'appliqué un propriété à un élément d'un formulaire directement dans le formulaire

    o_O

  2. #2
    Membre éprouvé Avatar de lodan
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    2 064
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 064
    Par défaut
    C'est un choix en fait et surtout quelles infos mets-tu dedans.

    Nous avons traité le sujet ici
    et aussi ici

  3. #3
    Membre averti
    Inscrit en
    Février 2004
    Messages
    39
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 39
    Par défaut
    Merci pour ces informations.

    Je vais donc me lancer dans une présentation de type div mais avec les valeurs de type "tab" de la propriété "display", puis je me ferais un avis ensuite.


  4. #4
    Membre éprouvé Avatar de lodan
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    2 064
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 064
    Par défaut
    Explique "tab" "display"

    C'est quoi ?

    CSS ?

  5. #5
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    Display c'est une propriété de style qui permet de positionner l'élément.
    Par exemple display: none n'affiche rien, inline affiche tout sur la même ligne et il y a plein d'autre...Pour en savoir plus google

  6. #6
    Membre chevronné Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Par défaut
    Pour des formulaires disposé en css, je te propose ce tuto. Il est plutot bien fait .

Discussions similaires

  1. Injecter du HTML avec des champs dans un formulaire
    Par Ceubex dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/12/2012, 17h55
  2. Problème de positionnement des composants dans un formulaire
    Par cyberdevelopment dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/08/2011, 10h13
  3. Réponses: 1
    Dernier message: 20/04/2010, 09h55
  4. [HTML] Evolution des objets de formulaire ?
    Par Psykocrash dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 27/08/2007, 15h30
  5. Positionner des éléments dans un formulaire
    Par Choupinou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 20/07/2006, 16h36

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