Centrer un calque/design
Résolu
hananedesign
Messages postés
26
Date d'inscription
Statut
Membre
Dernière intervention
-
hananedesign Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
hananedesign Messages postés 26 Date d'inscription Statut Membre Dernière intervention -
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 !
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 !
A voir également:
- Centrer un calque/design
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Javascript
- Memup feel design - Forum Matériel & Système
- Centrer le nom des dossier ✓ - Forum Windows 10
- Mon pc ne reconner pas memup feel design - Forum Disque dur / SSD
- Fusionner et centrer excel grisé ✓ - Forum Excel
6 réponses
Bonjour,
tu peux créer un style #site par exemple avec les attributs
enuuite, tu mets tout ton code dans cette div
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>
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é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é
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???
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???
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
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.
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.
