Forum Programmation.web Form & css

Posté par EppO (site web personnel) le 15 décembre 2004 à 15:43.

Étiquettes : aucune

déc.

2004

J'ai un petit souci de mise en forme d'une form (aucun jeu de mot là dedans je précise).

J'essaie de mettre une form dans un div qui prend toute la largeur de l'écran (le div pas la form), et je voudrais mettre la form au milieu horizontalement (text-align: center en gros).
Pour voir ce que ça donne: http://www.darox.net/~eppo/css.html(...)

Et ben ça donne le résultat voulu sous IE, mais pas sous FF: la form se situe dans la partie gauche du div au lieu de se placer au milieu. Dans ces cas là, je me dis souvent que ça doit pas être css compliant si cela passe pas sous FF, mais c'est tellement bidon (une form dans un div) que je vois pas du tout où est la faute de css.
Autre point, il y a un léger espace entre la form et le div en dessous de la form sous FF (pareil, rien de tout ça sous IE).

P.S.: j'ai mis une border au div pour bien montrer qu'il prend toute la width de la page alors que la form non.

# text-align : pour les éléments de type "inline"

Posté par Twidi (site web personnel) le 15 décembre 2004 à 15:52. Évalué à 4.

La propriété text-align ne s'applique qu'aux éléments de type "inline", or la balise "form" est de type bloc.

Pour la centrer du peux utiliser la valeur "auto" des marges gauches et droite :

form {
margin-left : auto;
margin-right : auto;
}

A voir :
http://www.yoyodesign.org/doc/w3c/css2/text.html#propdef-text-align(...)
et
http://www.yoyodesign.org/doc/w3c/css2/box.html#value-def-margin-wi(...)
- [^] # Re: text-align : pour les éléments de type "inline"
  
  Posté par EppO (site web personnel) le 15 décembre 2004 à 16:23. Évalué à 1.
  
  nikel en effet pour centrer la form. Je commence à comprendre la différence entre inline et bloc, ca vient :)
  sinon pour l'espace entre le bas de la form et le div, il existe une valeur par défaut du margin-bottom d'une form ?
  - [^] # Re: text-align : pour les éléments de type "inline"
    
    Posté par Twidi (site web personnel) le 15 décembre 2004 à 16:43. Évalué à 3.
    
    Oui je me souviens de l'époque ou je ne connaissais pas les css et où le seul moyen de ne pas avoir cet espace était d'imbriquer le form entre un tr et un td...
    
    aujourd'hui un simple
    
    form {
    margin-bottom : 0px;
    }
    
    suffit :)
    - [^] # Re: text-align : pour les éléments de type "inline"
      
      Posté par EppO (site web personnel) le 15 décembre 2004 à 17:09. Évalué à 1.
      
      C'est en mettant 0 à la margin-bottom que je me suis rendu compte qu'il y avait une valeur par défaut. Je ne comprends pas pourquoi ce n'est pas la même valeur que pour le margin-top...
      - [^] # Re: text-align : pour les éléments de type "inline"
        
        Posté par Twidi (site web personnel) le 15 décembre 2004 à 18:01. Évalué à 3.
        
        Tu peux voir les valeurs par défaut dans moz (enfin tout du moins dans Firefox) ici :
        
        resource://gre/res/html.css
        et
        resource://gre/res/forms.css
        
        C'est là que tu verras par exemple :
        
        form {
        display: block;
        margin: 0 0 1em 0;
        }
# centrage CSS sur openweb

Posté par Cali_Mero le 15 décembre 2004 à 15:53. Évalué à 4.

http://openweb.eu.org/articles/initiation_centrage/(...)
- [^] # Re: centrage CSS sur openweb
  
  Posté par Maxx le 15 décembre 2004 à 16:01. Évalué à 3.
  
  Et c'est là qu'on se dit... « pourquoi je ne lis toujours pas les exemples d'OpenWeb »... :p

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.