Centrer page web

Fermé

Manue - Modifié par Manue le 3/09/2012 à 11:15
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

A voir également:

Centrer page web
Traduire une page web - Guide
Supprimer une page word - Guide
Web office - Guide
Capture page web - Guide
Adresse web - Guide

3 réponses

Réponse 1 / 3

dinnozoanthony Messages postés 10 Date d'inscription dimanche 2 septembre 2012 Statut Membre Dernière intervention 17 septembre 2012
3 sept. 2012 à 11:16

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 lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 768
3 sept. 2012 à 12:12

Bonjour,

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

Manue
Modifié par Manue le 3/09/2012 à 12:17

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
3 sept. 2012 à 12:19

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 lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 768
3 sept. 2012 à 13:08

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
Modifié par Manue le 3/09/2012 à 14:37

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 lundi 25 juin 2012 Statut Membre Dernière intervention 7 août 2014 1 768
3 sept. 2012 à 14:41

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 lundi 6 août 2012 Statut Membre Dernière intervention 23 septembre 2012 4
3 sept. 2012 à 11:20

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
3 sept. 2012 à 11:28

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 dimanche 2 septembre 2012 Statut Membre Dernière intervention 17 septembre 2012
3 sept. 2012 à 11:36

Ca marche toujours pas ?

Manue
3 sept. 2012 à 11:51

Non toujours pas

Manue
3 sept. 2012 à 12:09

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.

Discussions similaires

connection ok mais aucune page ne s'affiche