Centrer page web

Manue -
Manue - 3 sept. 2012 à 14:44

Bonjour,

J'ai créée un site internet sur Dreamweaver CS5.5 à partir de rien car je n'ai aucune connaissance sur ce sujet, et je souhaiterais qu'il soit entièrement centrer, j'ai bien mon fond de centrer mais pas tout le reste c'est à dire mon menu, mes images ...
Si vous pouviez me donner des solutions facile ou du code en m'expliquant bien ou je dois le placer c'est la dernière chose qui me reste à faire avant de le mettre en ligne.

PS: mes balises sont en position absolute

Merci d'avance et bonne journée à tous

Manue

Afficher la suite

A voir également:

Centrer page web
Web office - Guide
Supprimer page word - Guide
Comment traduire une page web - Guide
Capture page web - Guide
Création page web - Guide

3 réponses

Réponse 1 / 3

dinnozoanthony Messages postés 10 Date d'inscription Statut Membre Dernière intervention

Il faut mettre pour ta balise <body></body> dans le css: margin:auto; tout en fixant une largeur (width)

body { margin:auto;width:800px;}

Réponse 2 / 3

lionel-DIL Messages postés 1222 Date d'inscription Statut Membre Dernière intervention 1 768

Bonjour,

Sans montrer le code déjà fait, ça sera difficile de faire quoi que ce soit.

Manue

Il est très long mais why not il est possible qu'il soit remplie de fautes c'est mon premier site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accueil</title>
<style type="text/css">
body {
background-image: url(images/accueil/fondaccueil.png);
background-repeat: no-repeat;
width: 800px;
margin: auto;
background-position: center top;
}
#accueil {
width: 3cm;
position: absolute;
left: 10px;
top: 266px;
height: 122px;
}
#societe {
width: 4cm;
position: absolute;
left: 53px;
top: 243px;
}
#solutions {
width: 4cm;
position: absolute;
left: 193px;
top: 236px;
}
#services {
width: 5cm;
position: absolute;
left: 346px;
top: 231px;
}
#references {
width: 5cm;
position: absolute;
left: 487px;
top: 234px;
}
#contact {
width: 4cm;
position: absolute;
left: 652px;
top: 234px;
}
#titre {
width: 23.892cm;
position: absolute;
left: 224px;
top: 319px;
font-family: Arial, Helvetica, sans-serif;
font-size: 36pt;
height: 171px;
color: #006;
font-weight: bold;
text-align: center;
line-height: 30px;
}
#winsup {
width: 10cm;
position: absolute;
left: 715px;
top: 553px;
}
#alphatec {
width: 5.477cm;
position: absolute;
left: 553px;
top: 694px;
height: 173px;
}
#websup {
width: 6cm;
position: absolute;
left: 325px;
top: 798px;
}
#manicour {
width: 6cm;
position: absolute;
left: 230px;
top: 611px;
}
#silouette {
width: 6.112cm;
position: absolute;
left: 27px;
top: 890px;
height: 453px;
}
#accueil1 {
width: 1cm;
position: absolute;
left: 503px;
top: 1632px;
}
#societe1 {
width: 2cm;
position: absolute;
left: 569px;
top: 1632px;
}
#solutions1 {
width: 2cm;
position: absolute;
left: 669px;
top: 1632px;
}
#service1 {
width: 2cm;
position: absolute;
left: 768px;
top: 1633px;
}
#refrence1 {
position: absolute;
left: 869px;
top: 1633px;
}
#contact1 {
width: 3cm;
position: absolute;
left: 980px;
top: 1634px;
}
#pubIphone {
width: 8cm;
position: absolute;
left: 1128px;
top: 618px;
}
</style>
<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>
</head>

<body background="images/accueil/fondaccueil.png" onload="MM_preloadImages('images/accueil/alphatec2.png','images/accueil/websup2.png','images/accueil/manicour2.png','images/accueil/winsup2.png','images/accueil/nos_solutions2.png','images/accueil/nos_services2.png','images/accueil/nos_references2.png','images/accueil/nous_contacter2.png','images/accueil/notre_societe2.png','images/accueil/accueil2.png')">
<div id="accueil"> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','images/accueil/accueil2.png',1)"><img src="images/accueil/accueil1.png" name="accueil" width="111" height="85" border="0" id="accueil2" /></a></div>
<div id="societe"><a href="notre_societe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('notre_societe','','images/accueil/notre_societe2.png',1)"><img src="images/accueil/notre_societe1.png" width="240" height="87" id="notre_societe" /></a></div>
<div id="solutions"><a href="winsup.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('solutions','','images/accueil/nos_solutions2.png',1)"><img src="images/accueil/nos_solutions1.png" name="solutions" width="260" height="79" border="0" id="solutions2" /></a></div>
<div id="services"><a href="etudes_projets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','images/accueil/nos_services2.png',1)"><img src="images/accueil/nos_services1.png" name="services" width="260" height="76" border="0" id="services2" /></a></div>
<div id="references"><a href="nos_references.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('references','','images/accueil/nos_references2.png',1)"><img src="images/accueil/nos_references1.png" name="references" width="260" height="71" border="0" id="references2" /></a></div>
<div id="contact"><a href="coordonnees.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacter','','images/accueil/nous_contacter2.png',1)"><img src="images/accueil/nous_contacter1.png" name="contacter" width="260" height="65" border="0" id="contacter" /></a></div>
<div id="titre"> Concepteur et éditeur de solutions intelligentes de Sécurité et de Sûreté</div>
<div id="pubplaquette"></div>
<div id="pubIphone"><img src="images/accueil/pub_iphone.png" width="291" height="262" alt="pubIphone" /></div>
<div id="winsup"><a href="winsup.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('winsup','','images/accueil/winsup2.png',1)"><img src="images/accueil/winsup1.png" name="winsup" width="354" height="191" border="0" id="winsup2" /></a></div>
<div id="alphatec"><a href="alphatec.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('alphatec','','images/accueil/alphatec2.png',1)"><img src="images/accueil/alphatec1.png" name="alphatec" width="215" height="184" border="0" id="alphatec2" /></a></div>
<div id="websup"><a href="websup.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('websup','','images/accueil/websup2.png',1)"><img src="images/accueil/websup1.png" name="websup" width="213" height="151" border="0" id="websup2" /></a></div>
<div id="manicour"><a href="manicour.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('manicour','','images/accueil/manicour2.png',1)"><img src="images/accueil/manicour1.png" name="manicour" width="208" height="191" border="0" id="manicour2" /></a></div>
<div id="solutions1"><a href="winsup.html"><img src="images/accueil/nos_solutions.png" width="84" height="11" alt="solutions" /></a></div>
<div id="service1"><a href="etudes_projets.html"><img src="images/accueil/nos_services.png" width="81" height="10" alt="service1" /></a></div>
<div id="refrence1"><a href="nos_references.html"><img src="images/accueil/nos_references.png" width="88" height="12" alt="reference1" /></a></div>
<div id="contact1"><a href="coordonnees.html"><img src="images/accueil/nous_contacter.png" width="97" height="12" alt="contacter" /></a></div>
<div id="societe1"><a href="notre_societe.html"><img src="images/accueil/notre_societe.png" width="75" height="10" alt="societe1" /></a></div>
<div id="accueil1"><a href="index.html"><img src="images/accueil/accueil.png" width="38" height="12" alt="accueil1" /></a></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

Manue

PS : j'ai fait mon site dans l'onglet création et le code c'est fait au fur et à mesure

lionel-DIL Messages postés 1222 Date d'inscription Statut Membre Dernière intervention 1 768

Le code n'est pas indenté.
Pour le coller sur CCM, utilise la balise Code située à droite.

Ca s'écrira alors comme ceci

Les <p> </p> vides ne servent à rien.
Le CSS est à externaliser.

Manue

C'est quoi CCM ?!

Une blise Code ?! je n'en trouve pas =s

Ok pour les <p> </p>

lionel-DIL Messages postés 1222 Date d'inscription Statut Membre Dernière intervention 1 768

CCM = le site où nous sommes. CommentCaMarche
La balise code se trouve lorsqu'on met un commentaire, en haut à droite de la boîte de texte.

Réponse 3 / 3

b-benoit92 Messages postés 69 Date d'inscription Statut Membre Dernière intervention 4

Bonjour, c'est du HTML ou du PHP ? La balise est <center>, après si tu veux centrer tous le site, je pense que tu peux les mettres juste après et avant tes balises <head>

Manue

C'est du HTML, j'ai fais ce que tu m'as dit mais sans résultats.

Il faut savoir que j'ai mit mon body en margin : auto , width : 90% et le background-repeat: no-repeat; background-position: center top;

Je suis vraiment débutante alors ne m'en voulais pas si je comprend pas tout car je fais vraiment de mon mieux =s

dinnozoanthony Messages postés 10 Date d'inscription Statut Membre Dernière intervention

Ca marche toujours pas ?

Manue

Non toujours pas

Manue

J'ai essayé de créer une balise qui contiendrait tout le site et le centrer mais je n'ai pas réussie, peut être bien que ce n'est pas possible.

Votre réponse