centrer un div verticalement

par **dark_vidor** » 09 oct. 2006, 19:59

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

par **SAEVEAS** » 09 oct. 2006, 11:06

Pour centrer un élément j'utilises plutot

#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

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>

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

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

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

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

centrer un div verticalement

Répondre

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

Re: centrer un div verticalement

centrer un div verticalement