Centrer un calque/design

hananedesign, le mercredi 20 février 2008 à 15:33:06

Bonjour,

je voudrai centrer mon design qui est constitué d'un calque de fond et de plusieurs autres alignés au dessus de ce calque.
J'ai essayé de rajouter margin:auto dans le body mais ça ne marche pas. please quelqu'un peut m'aider je débute dans la conception de site !

Voici mon code CSS :
<style type="text/css">

</style>
</head>

------------------------------------

et maintenant le code HTML :

<body>
<div id="fond"></div>
<div id="haut"><img src="Images/Interface-vert_01.jpg" width="631" height="129" longdesc="Images/Interface-vert_01.jpg" /></div>
<div id="gauche"><img src="Images/Interface-vert_02.jpg" width="126" height="345" longdesc="Images/Interface-vert_02.jpg" /></div>
<div id="centre"><img src="Images/Interface-vert_03.jpg" width="326" height="345" border="0" longdesc="Images/Interface-vert_04.jpg" /></div>
<div id="droite"><img src="Images/Interface-vert_04.jpg" width="180" height="345" border="0" usemap="#MapMapMap" longdesc="Images/Interface-vert_03.jpg" />
<map name="MapMapMap" id="MapMapMap">
<area shape="rect" coords="50,101,109,150" href="hdsiteportfolio.html" />
<area shape="circle" coords="84,202,34" href="hdsitestaff.html" />
<area shape="rect" coords="63,266,91,283" href="mailto:BLABLA@free.fr" />
</map>
</div>
<div id="contenu">
<p align="center" class="Style1"><img src="Images/Accueil.jpg" width="102" height="37" /></p>
<p align="left" class="Style12"><span class="Style13"><span class="Style15"><span class="Style16"><strong>TITRE</strong> BLABLABLABLABLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA .BLABLA </span></span></span></p>
<p align="left" class="Style17">BLABBLABLA LABLABLA BLABLA BLABLABLABLA BLABLA BLABLA </p>
<p align="left" class="Style17">BLABLA BLABLABLA BLA BLABLA BLABLA BBLABLA BLABLA BLABLA LABLA </p>
</div>
<p> </p>
</body>
</html>

MERCI D'AVANCE !

Configuration: Windows XP
Firefox 2.0.0.12

Répondre à hananedesign Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Darkito, le mercredi 20 février 2008 à 15:40:42

Bonjour,
tu peux créer un style #site par exemple avec les attributs

#site {
margin-left :auto;
margin-right:auto;
}

enuuite, tu mets tout ton code dans cette div

<body>
<div id="site">
....
</div>
</body>

Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?

Répondre à Darkito

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

hananedesign, le mercredi 20 février 2008 à 15:58:25

darkito à la place de #site j'ai reprise #fonds, j'ai rajouté les attributs que tu m'as donné, ensuite ds le body j'ai déplacé le </div> de #fonds et je l'ai mis à la fin avant le dernier </div>.

Résultat : le design s'est déplacé vers la droite mais il n'est tjrs pas centré.

Y-a-t-il un autre moyen pour centrer complètement le design horizontalement et verticalement pour que chaque internautes de résolution différente le lis au centre??

merci de m'avoir renseigné

Répondre à hananedesign

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Darkito, le mercredi 20 février 2008 à 16:04:45

Tu as toujours les indication sur la position pour fonds ? Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?

Répondre à Darkito

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

hananedesign, le mercredi 20 février 2008 à 16:07:31

oui
position:absolute;
left:65px;
top:16px;
width:638px;
height:484px;
z-index:0;
margin-left :auto;
margin-right:auto;

il faut peut être utiliser les % pour que ça soit centrer de la meme maniere sur les differentes resolutions nan???

Répondre à hananedesign

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Darkito, le mercredi 20 février 2008 à 16:14:01

Pour le centrage, les% ne servent pas je crois.
Essaie avec la solution que je t'avais donné au début.
le margin dans une div globale.
Je pense que position absolute et marge auto ne font pas bon ménage. Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?

Répondre à Darkito

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

hananedesign, le mercredi 20 février 2008 à 17:43:58

j'ai fais ce que tu m'as dit au début avec #site.
J'ai rajouté ceci dans body :
<div align="center" id="site" style="position:relative; left:auto; height:500px; top:40px; left:-60px">

RESULTAT : ça marche !!! c'est bien centré horizontalement et verticalement sur firefox et IE sur une résolution écran de 1024X768.

MAIS pour les autres résolutions c'est centré horizontalement seulement. Je vais essayer de trouver une solution pour centrer verticalement sinon c'est pas très important je trouve.

Répondre à hananedesign

Posez votre question Répondre