centrer un div verticalement

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : centrer un div verticalement

par dark_vidor » 09 oct. 2006, 19:59

sauf que ça fonctionne pas sous mozilla j'ai essayer deja :roll:

par SAEVEAS » 09 oct. 2006, 11:06

Pour centrer un élément j'utilises plutot

Code : Tout sélectionner

#global { /* centrage */ margin-left: auto; margin-right: auto; /* taille du block */ width:740px; }
Ca centre automatiquement. Il faut juste que ton élément est une taille fixe.

par artotal » 08 oct. 2006, 21:29

ce n'est pas comme sa qu'il faut faire pour centrer un conteneur :
donc

Code : Tout sélectionner

#global { position:absolute; left:50%; width:740px; margin-left:-370px; }
left:50%;
C'est à dire quele coté gauche de la boite se trouve sur la moitié de l'écran.

width:740px;
Largeur de la boite sans marge.

margin-left:-370px;
on réduit la boite de la moitié de sa largeur dans sa marge de gauche
et donc tu calcule :
740px / 2 = 370 px

par dark_vidor » 07 oct. 2006, 23:34

bon je suis passer par une solution barabare qui a l'air valide (on obtient quasi le meme résultat sous ie et mozilla)

http://test.derniere-bataille.net/1024x768/1024x768.php

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> html { padding:0px; margin:0px; } body { background-color: #333333; font-size: 12px; font-family: Verdana; color:#999999; padding:0px; margin:0px; } #body { font-size: 12px; font-family: Verdana; color:#999999; background-color: #510000; padding: 0px; margin: 0px auto; width: 990px; height: 636px; border: 1px solid #000000; } #header { text-align: right; height: 20px; width: auto; background-image: url(header.jpg); background-repeat: no-repeat; vertical-align: top; } #left{ float: left; width: 195px; } #middle{ height: 600px; margin: 0px 195px; border-right: 1px solid #000000; border-left: 1px solid #000000; position: relative; } #right{ float: right; width: 195px; } #footer { height: 16px; width: auto; clear: left; background-color: #000000; font-family: "Trebuchet MS"; font-size: 10px; color: #CCCCCC; font-weight: bold; vertical-align: top; position: static; visibility: visible; text-align: right; } .form_header{ border: 1px solid #000000; text-align: right; background-color: #000000; font-weight:bold; font-family: "Trebuchet MS"; color: #CCCCCC; font-size: 11px; padding: 0px; position: relative; top: -6px; } </style> </head> <body bgcolor="#333333"><table align="center" style="height: 100%"> <tr> <td align="center" valign="middle" > <div id="body"> <div id="header"> <select name="menu1" onChange="MM_jumpMenu('parent',this,0)" class="form_header"> <option>Acceuil&nbsp;&nbsp;</option> <option>Règles du Jeu&nbsp;&nbsp;</option> <option>FAQ&nbsp;&nbsp;</option> <option>Forum&nbsp;&nbsp;</option> <option>Achats&nbsp;&nbsp;</option> </select> <a href="#"><img src="login.jpg" alt="" name="" width="20" height="20" border="0"></a> </div> <div id="left">coucou ! left</div> <div id="right">coucou ! right</div> <div id="middle"> <center> <img src="fond_carte.jpg" width="600" height="600" border="0" > </center> </div> <div id="footer">&copy; La Derni&egrave;re Bataille - Optimisé pour une résolution de 1024x768px avec : <span style="vertical-align: middle;"><img src="firefox.jpg" width="80" height="16" alt="Firefox"></span> - Powered with : <span style="vertical-align: middle;"><img src="php.jpg" width="80" height="16" alt="PHP"></span> & <span style="vertical-align: middle;"><img src="mysql.jpg" width="80" height="16" alt="MySQL"></span></div> </div></td> </tr> </table> </body> </html>

par Cyrano » 07 oct. 2006, 20:24

en 800/600, tu auras de toutes façons un problème à cause des dimensions de l'image centrale dont la largeur additionnée aux largeurs respectives des menus de gauche et de droite excèdent largement 800px. Et la hauteur de l'image centrale dépasse la hauteur disponible à l'écran : à moins d'avoir une image plus petite pour cette définition, il n'y a pas de solution.

par dark_vidor » 07 oct. 2006, 17:04

800x600 : http://image-dream.com/membre/up/anonym ... dc9809.jpg

1440x900 : http://image-dream.com/membre/up/anonym ... 6ec2ec.jpg

1024x768 : http://image-dream.com/membre/up/anonym ... 4bea2f.jpg

comment faire pour qu'en 800x600 je n'ai pas ce phénomène :roll:
es ce qu'un calcul des marges dynamiquement (php) règlerais le problème ? comment l'effectuer?

par Cyrano » 07 oct. 2006, 16:54

Les liens vers les images sont mort, doit y avoir une erreur quelque part, donc je suis pas plus avancé.

Ce qui est sûr, c'est que si tu fixes les dimensions du contenu de ta page, tu ne pourras jamais satisfaire tout le monde.

par dark_vidor » 07 oct. 2006, 16:47

alors j'en suis arriver à ça :

en 1440x900 (mon ecran normal) :
http://www.image-dream.com/membre/up/mi ... 6ec2ec.jpg

en 1024x768 :
http://www.image-dream.com/membre/up/mi ... 4bea2f.jpg

en 800x600 :
http://www.image-dream.com/membre/up/mi ... dc9809.jpg

autant dire qu'en 800x600 les gens peuvent pas aller sur mon site convenablement

de plus sous IE ça marche moyen :?

voici ma source :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Document sans titre</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> html { padding:0px; margin:0px; } body { background-color: #333333; font-size: 12px; font-family: Verdana; color:#999999; padding:0px; margin:0px; } #body { position:absolute; left:50%; top:50%; width: 1012px; height: 634px; margin-top:-318px; /*La moitié de la hauteur du bloc+1 */ margin-left:-507px; /*la moitié de la largeur+1 */ background-color: #510000; border: 1px solid #000000; } #header { text-align: right; height: 20px; width: auto; background-image: url(header.jpg); background-repeat: no-repeat; vertical-align: top; } #left{ float: left; width: 207px; } #middle{ height: 598px; margin: 0px 206px; border-right: 1px solid #000000; border-left: 1px solid #000000; position: relative; } #right{ float: right; width: 207px; } #footer { height: 16px; width: auto; clear: left; background-color: #000000; font-family: "Trebuchet MS"; font-size: 10px; color: #CCCCCC; font-weight: bold; vertical-align: top; position: static; visibility: visible; text-align: right; } .form_header{ border: 1px solid #000000; text-align: right; background-color: #000000; font-weight:bold; font-family: "Trebuchet MS"; color: #CCCCCC; font-size: 11px; padding: 0px; position: relative; top: -6px; } </style> </head> <body bgcolor="#333333" style="height: 100%;"> <div id="body"> <div id="header"> <select name="menu1" onChange="MM_jumpMenu('parent',this,0)" class="form_header"> <option>Acceuil&nbsp;&nbsp;</option> <option>Règles du Jeu&nbsp;&nbsp;</option> <option>FAQ&nbsp;&nbsp;</option> <option>Forum&nbsp;&nbsp;</option> <option>Achats&nbsp;&nbsp;</option> </select> <a href="#"><img src="login.jpg" alt="" name="" width="20" height="20" border="0"></a> </div> <div id="left">coucou ! left<img name="" src="" width="205" height="32" alt=""></div> <div id="right">coucou ! right<img name="" src="" width="205" height="32" alt=""></div> <div id="middle"> <center> <img src="fond_carte.jpg" width="598" height="598" border="0" > </center> </div> <div id="footer">&copy; La Derni&egrave;re Bataille - Optimisé pour une résolution de 1024x768px avec : <span style="vertical-align: middle;"><img src="firefox.jpg" width="80" height="16" alt="Firefox"></span> - Powered with : <span style="vertical-align: middle;"><img src="php.jpg" width="80" height="16" alt="PHP"></span> & <span style="vertical-align: middle;"><img src="mysql.jpg" width="80" height="16" alt="MySQL"></span></div> </div> </body> </html>

Re: centrer un div verticalement

par Cyrano » 07 oct. 2006, 16:43

...pour ceux qui ont du 1024x768 ça fait bof
Comme précision sur la nature du problème, c'est pas particulièrement parlant :-k

Ça fonctionne, donc c'est toujours un point de gagné, mais je saisis mal ce qui ne foncitonne pas.

centrer un div verticalement

par dark_vidor » 07 oct. 2006, 16:09

je souhaite que mon site fonctionne en 1024x768

je suis en train d'essayer de faire une page type avec mes div :
www.derniere-bataille.net/test/1024x768/1024x768.php

le probleme pour ceux qui ont un ecran plus grand que 1024x768 : la page est collé en haut

aussi j'ai tenter de la centré mais voila ce que ça donne : www.derniere-bataille.net/test/1024x768/1024x768.htm
pour ceux qui ont du 1024x768 ça fait bof

pouriez vous m'aider :roll:


edit :
ce qui change entre les deux pages :

Code : Tout sélectionner

#body { background-color: #510000; width: 1014px; height: 636px; border: 1px solid #000000; position:absolute; top:50%; margin-top:-318px; /*La moitié de la hauteur du bloc */ left:50%; margin-left:-507px; /*la moitié de la largeur */ }
la deuxieme partie

inspirer de : http://css.alsacreations.com/Faire-une- ... web-en-CSS et l'exemple fonctionne : http://css.alsacreations.com/xmedia/exe ... entrer.htm :cry: