Centrer correctement un site horizontalement et verticalement

djpiga · 18 Février 2008

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" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=&quot;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)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
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[n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=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=&quot;http://www.rider-discount.com" class="style10">www.rider-discount.com</a> / <a href=&quot;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 : "rider-discount.com" et "lifestyle-shop.com".<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 · 18 Février 2008

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")

djpiga · 18 Février 2008

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 · 18 Février 2008

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

bon courage !

dayassine · 19 Février 2008

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" &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&quot;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 · 19 Février 2008

Merci beaucoup pour votre aide!

je m'y met cet après-midi, on verra bien si ça marche...

PhY · 19 Février 2008

Salut !

Sans quoi, utilise le code source de cet exemple.

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

Bon courage

Edit: je me suis inspiré de ce CSS pour la page d'accueil de mon site

Modifié 19 Février 2008 par PhY

djpiga · 19 Février 2008

Merci beaucoup, grâce a vous le problème est résolu.

site bientôt visible sur http://www.crystal-peer.com

Connexion

Centrer correctement un site horizontalement et verticalement

Sujets conseillés

djpiga

baulet

djpiga

baulet

dayassine

djpiga

PhY

djpiga

Veuillez vous connecter pour commenter

Parcourir

Activité