Sujet Précédent Sujet Suivant

Centrer un calque/design

Résolu/Fermé
hananedesign Messages postés 26 Date d'inscription samedi 2 février 2008 Statut Membre Dernière intervention 12 août 2008 - 20 févr. 2008 à 15:33
hananedesign Messages postés 26 Date d'inscription samedi 2 février 2008 Statut Membre Dernière intervention 12 août 2008 - 20 févr. 2008 à 17:43
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">
<!--
body {
background-image: url(Images/images/rayures%20oranges%20fonds.jpg);
}
.Style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10;
color: #A05000;
}
body,td,th {
font-size: 11px;
} h1 {
font-size: 11px;
}
.Style12 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #A05000; }
.Style13 {font-size: 10px}
.Style15 {font-size: 12px}
.Style16 {font-size: 11px}
.Style17 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #A05000; }

#fond {
position:absolute;
left:65px;
top:16px;
width:638px;
height:484px;
z-index:0;
}
#haut {
position:absolute;
left:65px;
top:15px;
width:632px;
height:129px;
z-index:6;
}
#gauche {
position:absolute;
left:65px;
top:143px;
width:126px;
height:345px;
z-index:7;
}
#centre {
position:absolute;
left:191px;
top:143px;
width:326px;
height:345px;
z-index:8;
}
#droite {
position:absolute;
left:516px;
top:143px;
width:180px;
height:345px;
z-index:9;
}
#contenu {
position:absolute;
left:227px;
top:170px;
width:260px;
height:187px;
z-index:10;
}
-->
</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 !

6 réponses

Réponse 1 / 6
Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
20 févr. 2008 à 15:40
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>
0
Réponse 2 / 6
hananedesign Messages postés 26 Date d'inscription samedi 2 février 2008 Statut Membre Dernière intervention 12 août 2008
20 févr. 2008 à 15:58
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é
0
Réponse 3 / 6
Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
20 févr. 2008 à 16:04
Tu as toujours les indication sur la position pour fonds ?
0
Réponse 4 / 6
hananedesign Messages postés 26 Date d'inscription samedi 2 février 2008 Statut Membre Dernière intervention 12 août 2008
20 févr. 2008 à 16:07
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???
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Darkito Messages postés 1191 Date d'inscription vendredi 7 décembre 2007 Statut Membre Dernière intervention 26 mai 2010 545
20 févr. 2008 à 16:14
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.
0
Réponse 6 / 6
hananedesign Messages postés 26 Date d'inscription samedi 2 février 2008 Statut Membre Dernière intervention 12 août 2008
20 févr. 2008 à 17:43
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.


0

Discussions similaires

Avis site azura home design / Azurahomedesign
sandra -
Zaza -

6 réponses
Utilisation des méthodes de manipulations du DOM
SelOua_2617 -
SelOua_2617 -

5 réponses
sharp aquos + prise HDMI
gainsborough -
Olomonke -

6 réponses
Masque rouge de selection
Agrafx -
Agrafx -

2 réponses
faire pivoter un calque/image dans photoshop
h-78 -
spikz -

3 réponses