Version complète: sur le forum Webmaster Hub : Centrer correctement un site horizontalement et verticalement
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net
djpiga
lundi 18 février 2008 à 10:45
Bonjours, je fais appel a votre aide, je sait que ce sujet a été abordé de nombreuses fois, mais malgrès les divers tutos et conseils, je ne parviens toujours pas a centrer le site de ma société. pouvez vous m'indiquer la marche a suivre?

Language : PHP & CSS
Agencement : un tableau qui contient des calques
Problème: lorsque je fais "align=center" ou "margin-left:auto" & "margin-right:auto", mon tableau se centre correctement, mais les calques qui sont disposés a l'intérieur ne se centrent pas ... comme si ils n'étaient pas liés au tableau. De plus quand j'utilise la commande "Valign" le tableau ne se centre pas verticalement.

voici le code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Crystal Peer - L'Entreprise</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
table {
}
#apDiv1 {
position:absolute;
left:277px;
top:492px;
width:522px;
height:17px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:28px;
top:234px;
width:161px;
height:120px;
z-index:2;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #BDD304;
}
.style6 {font-size: 12px}
.style8 {font-size: 20px}
.style9 {font-family: "Britannic Bold"}
a:link {
color: #C3D719;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.style10 {
color: #BDD304
}
#apDiv3 {
position:absolute;
left:250px;
top:162px;
width:503px;
height:111px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:255px;
top:275px;
width:215px;
height:100px;
z-index:4;
}
-->
</style>
</head>

<body onload="MM_preloadImages('bouton5.jpg','bouton6.jpg','bouton7.jpg','bouton8.jpg')">
<div class="style1" id="apDiv1"> Site et contenu ©2008 www.crystalpeer.com / <a href="http://www.rider-discount.com" class="style10">www.rider-discount.com</a> / <a href="http://www.lifestyle-shop.com" class="style10">www.lifestyle-shop.com</a></div>
<div id="apDiv2">
<div align="center" class="style9"><span class="style8">SARL Crystal Peer</span><br />
<span class="style6">36 rue Maurice Couderchet 94120 Fontenay sous Bois<br />
<br />
Tel : 01 43 90 78 29<br />
Fax : 01 43 90 79 39<br />
<br />
RCS Creteil : 47799717500013</span></div>
</div>
<div id="apDiv3">
<div align="justify">Depuis 4 ans, la société Crystal Peer a imaginé et donné naissance à 2 sites Internet : &quot;rider-discount.com&quot; et &quot;lifestyle-shop.com&quot;.<br />
Ces sites web marchands font actuellement parti des leaders sur le marché des sports de glisse.<br />
Crystal Peer s'engage au jour le jour, pour offrir a ces clients et partenaires les meilleurs services et une grande réactivité.<br />
</div>
</div>
<div id="apDiv4"><img src="shemafonctionnement.jpg" width="500" height="200" /></div>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><img src="siteweb2_01.jpg" width="200" height="120" /></td>
<td width="146"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','bouton5.jpg',1)"><img src="siteweb2_02.jpg" name="Image2" width="146" height="120" border="0" id="Image2" /></a></td>
<td width="148"><a href="lessites.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','bouton6.jpg',1)"><img src="siteweb2_03.jpg" name="Image3" width="148" height="120" border="0" id="Image3" /></a></td>
<td width="148"><a href="lemagasin.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','bouton7.jpg',1)"><img src="siteweb2_04.jpg" name="Image4" width="148" height="120" border="0" id="Image4" /></a></td>
<td width="58"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','bouton8.jpg',1)"><img src="siteweb2_05.jpg" name="Image5" width="150" height="120" border="0" id="Image5" /></a></td>
</tr>
<tr>
<td><img src="fontleft.jpg" width="200" height="380" /></td>
<td colspan="4"><img src="fontright.jpg" width="592" height="380" /></td>
</tr>
</table>
</body>
</html>


Merci d'avance a ceux qui pourront m'aider.
baulet
lundi 18 février 2008 à 14:05
bonjour,

tu as une page de visible?

tes div sont en absolu, c'est normal qu'elles ne bougent pas (si c'est cela que tu appelle tes "calques")

wink.gif
djpiga
lundi 18 février 2008 à 19:25
Oui, voici une adresse provisoire : http://crystalpeer.ifrance.com/CrystalPeer/index.php

Et, oui, ce sont les "div" que j'appel calques.

merci de ton aide.
baulet
lundi 18 février 2008 à 19:55
il faut placer tes div dans une div conteneur, qui elle sera positionnée en relatif

avec margin : valeur-marge-haute auto valeur-marge-basse auto

ça devrait aller si j'ai bien compris wink.gif

bon courage !
dayassine
mardi 19 février 2008 à 10:57
inspire toi de cet exemple que j'ai fait vite fait.
ta page html

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="cadre">Placez ici le contenu de id "cadre"
<div id="milieu">milieu</div>
</div>

</body>
</html>


ton css qui se nomme style.css

CODE
body
{
height: 400px;
width: 300px;
left: 50%;
top: 50%;
background-color: #666666;
}

#cadre
{
background-color: #CC0000;
height: 300px;
width: 400px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -150px;
margin-left: -200px;
}

#milieu
{
background-color: #009999;
height: 60px;
width: 140px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -30px;
margin-left: -70px;
}
djpiga
mardi 19 février 2008 à 13:02
Merci beaucoup pour votre aide!
je m'y met cet après-midi, on verra bien si ça marche...
PhY
mardi 19 février 2008 à 13:34
Salut !

Sans quoi, utilise le code source de cet exemple.

D'autre templates dispo (flottants, fixes...) du même site ici smartass.gif

Bon courage

Edit: je me suis inspiré de ce CSS pour la page d'accueil de mon site wink.gif
djpiga
mardi 19 février 2008 à 16:26
Merci beaucoup, grâce a vous le problème est résolu.
site bientôt visible sur http://www.crystal-peer.com
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.