Page 1 sur 1
centrer un div verticalement
Posté : 07 oct. 2006, 16:09
par dark_vidor
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 
Re: centrer un div verticalement
Posté : 07 oct. 2006, 16:43
par Cyrano
...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.
Posté : 07 oct. 2006, 16:47
par dark_vidor
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 </option>
<option>Règles du Jeu </option>
<option>FAQ </option>
<option>Forum </option>
<option>Achats </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">© La Derniè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>
Posté : 07 oct. 2006, 16:54
par Cyrano
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.
Posté : 07 oct. 2006, 17:04
par dark_vidor
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?
Posté : 07 oct. 2006, 20:24
par Cyrano
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.
Posté : 07 oct. 2006, 23:34
par dark_vidor
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 </option>
<option>Règles du Jeu </option>
<option>FAQ </option>
<option>Forum </option>
<option>Achats </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">© La Derniè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>
Posté : 08 oct. 2006, 21:29
par artotal
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
Posté : 09 oct. 2006, 11:06
par SAEVEAS
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.
Posté : 09 oct. 2006, 19:59
par dark_vidor
sauf que ça fonctionne pas sous mozilla j'ai essayer deja
