centrer un div verticalement

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

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

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

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

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>

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.

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

es ce qu'un calcul des marges dynamiquement (php) règlerais le problème ? comment l'effectuer?

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.

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>

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

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.

09 oct. 2006, 19:59

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

centrer un div verticalement

Qui est en ligne