Aller au contenu

Centrer correctement un site horizontalement et verticalement

djpiga

Par djpiga
dans Les langages du Net

 Partager

Sujets conseillés

djpiga

djpiga

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
dayassine

dayassine

Posté
Posté

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;

}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...