[HTML & CSS] div centrés en hauteur ?

Discussion dans 'Administration d'un site Web' créé par Didier_S, 6 Février 2005.

  1. Didier_S
    Didier_S WRInaute occasionnel
    Inscrit:
    24 Août 2004
    Messages:
    470
    J'aime reçus:
    2
    Bonjour,

    je dois réaliser un site de hauteur et de largeur fixe (admettons 500 sur 400), et il faut que ce site soit "centré" au milieu de la fenêtre du navigateur...

    je peux le faire en <table>, mais j'aimerais utiliser des <div>...

    j'ai donc créé un <div> "principal", height:100%; width:100%, et à l'intérieur de celui-ci un autre <div> "contenu", height:500px; width:400px
    malheureusement, j'ai beau mettre des vertical-align:middle de partout, rien ne marche, et je commence à me dire que rien ne vaut mes bons vieux <table>...

    des idées ?
    merci d'avance
     
  2. pc07
    pc07 WRInaute discret
    Inscrit:
    10 Août 2004
    Messages:
    66
    J'aime reçus:
    0
    salut,

    le vertical-align n'est pas vraiment reconnu avec les css en tout cas ne fonctionne pas vraiment. Tu peux aller faire un tour sur -http://www.alsacreations.com ou -http://openweb.eu.org , ces deux sites parlent des css. Sur le premier il y a un forum dont la communauté est assez active. Tu y trouveras une solution.
     
  3. Cartapus
    Cartapus WRInaute occasionnel
    Inscrit:
    18 Juin 2004
    Messages:
    385
    J'aime reçus:
    0
    Salut, étant donné que la hauteur moyenne d'un écran est 760px, un margin-top:180px ([760-400]/2) devrait aller. mais c'est à proprement dit pas centré.
     
  4. Didier_S
    Didier_S WRInaute occasionnel
    Inscrit:
    24 Août 2004
    Messages:
    470
    J'aime reçus:
    2
    j'y avais pensé, mais avec une haute résolution (genre 1600x1024), le rendu est carrément horrible.
     
  5. Didier_S
    Didier_S WRInaute occasionnel
    Inscrit:
    24 Août 2004
    Messages:
    470
    J'aime reçus:
    2
    Code:
    #global {
         position:absolute;
         left: 50%; 
         top: 50%;
         width: 700px;
         height: 400px;
         margin-top: -200px; 
         margin-left: -350px; 
         border: 1px solid red;
         }
    
    la technique des marges négatives marche à merveille :D
     
  6. shrom
    shrom WRInaute impliqué
    Inscrit:
    5 Juillet 2004
    Messages:
    781
    J'aime reçus:
    0
  7. Cartapus
    Cartapus WRInaute occasionnel
    Inscrit:
    18 Juin 2004
    Messages:
    385
    J'aime reçus:
    0
    A mettre en favoris ce thread :wink:
     
  8. Hearty
    Hearty WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    118
    J'aime reçus:
    0
    soit dit au passage, le vertical-align en css ne centre pas un element par rapport a son conteneur, mais par rapport aux autres elements du meme conteneur :)
     
Chargement...
Similar Threads - [HTML CSS] div Forum Date
[HTML/CSS] Problème DIV Développement d'un site Web ou d'une appli mobile 21 Juillet 2011
[HTML/CSS] Conflit de noms : ids et classes uniques Développement d'un site Web ou d'une appli mobile 17 Mars 2011
[HTML5] Attribut HIDDEN, qui a testé ? Des retours ? Débuter en référencement 7 Novembre 2011
[HTML/JS] Enable/Disable un groupe de radios Développement d'un site Web ou d'une appli mobile 23 Octobre 2010
probleme BBCode [html] html_entity_decode Développement d'un site Web ou d'une appli mobile 28 Juin 2009
[HTML] Rendre cliquable une ligne <TR> entière Développement d'un site Web ou d'une appli mobile 23 Juin 2006
[HTML] Normes W3C Administration d'un site Web 20 Mai 2005
[HTML] Retour à la ligne pour une url trop longue Le café de WebRankInfo 27 Février 2005
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[Cheat css] Est-ce que Magento triche ? Débuter en référencement 3 Mai 2012
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009