Centrer un site Dreamweaver

[anuska]

Bonjour à tous,

Je cherche à centrer mon site sous dreamweaver. J'ai réussi centrer le fond mais il n'y a que l'image de fond qui se centre ! (apDiv3) Et pas moyen de faire suivre les autres calques avec du texte et des images qui se trouvent à l'intérieur de ce fond. Des idées?

Je viens de passer un petit moment sans y parvenir...

Merci beaucoup!!

Anuska

Voila le code css des calques :

body {
background-color: #FFCC99;
}
#apDiv3 {
position:absolute;
left:50%;
top:50%;
width:1100px;
height:650px;
z-index:1;
margin-top: -325px;
margin-left: -550px;
right: auto;
bottom: auto;
background-color: #3F3151;
}
#apDiv1 {
position:absolute;
left:482px;
top:267px;
width:435px;
height:291px;
z-index:2;
}
.Style2 {
font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
font-size: 12pt;
color: #FFFFFF;
}
.Style3 {
font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
font-size: 16pt;
color: #FFCC99;
font-weight: normal;
}
.Style5 {
font-family: Calibri, "Calibri Bold", "Calibri Bold Italic", "Calibri Italic";
font-size: 14px;
color: #FFCC99;
}
#apDiv4 {
position:absolute;
left:482px;
top:238px;
width:486px;
height:38px;
z-index:3;
}
#apDiv5 {
position:absolute;
left:300px;
top:212px;
width:436px;
height:655px;
z-index:4;
}
#apDiv6 {
position:absolute;
left:263px;
top:242px;
width:197px;
height:302px;
z-index:4;
}
#apDiv7 {
position:absolute;
left:551px;
top:163px;
width:480px;
height:618px;
z-index:5;
}
#apDiv8 {
position:absolute;
left:484px;
top:759px;
width:568px;
height:18px;
z-index:6;
}
-->
</style>
</head>

 

[adrienrn]

Je n'ai pas lu avec attention ton code (en partie à cause de l'indentation ) mais je peux te donner un petit exemple :

Tu dois englober tes sections dans une globale appelée ici, "main"

div#main {
     margin:auto;
     width:70%;
}

La div#main sera centrée ainsi que son contenu.

J'espère que ceci pourra t'être utile

 

[anuska]

Dans mon cas la main c'est "apDiv", donc si je fais comme tu me dis...

#apDiv3 {
position:absolute;
width:70%;
height:650px;
z-index:1;
margin-top: auto;
margin-left: auto;
background-color: #3F3151;

Par contre, je me demande si elle d'adapte a toutes les écrans après? Mon but c'est vraiment qu'il soit centrer ainsi que tout son contenu dans n'importe quel écran. Merci

D'ailleurs, quel est la différence entre une position absolue et une relative?

 

[adrienrn]

Le fait que tu es mis un attribut "position" à tes divisions me semble problématique !

Cet attribut est un positionnement manuel. Dans le cas "absolute", la division n'est plus affecté par le positionnement des autres divisions. C'est-à-dire que tu es obligé de placer tout à la main, je te conseille d'enlever cet attribut.

Lecture sur le cas :
- http://openweb.eu.org/articles/initiation_flux
- http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html

 

[Johannès]

il faut mettre une largeur à la page (70% est une largeur)

ensuite il faut mettre aussi des marges cohérentes. Des marges automatiques, oui, mais de chaque côté. Si tu mets une largeur en %tage, bien préciser dans le css que

html, body { width : 100%; }

exemple :

#ma_largeur {
   width: 70%;
   margin-left: auto;
   margin-right: auto;
}

---------- Nouveau message ajouté à 12h22 ---------- Le message précédent a été envoyé à 12h16 ----------

Dans mon cas la main c'est "apDiv", donc si je fais comme tu me dis...

#apDiv3 {
position:absolute;
width:70%;
height:650px;
z-index:1;
margin-top: auto;
margin-left: auto;
background-color: #3F3151;

Par contre, je me demande si elle d'adapte a toutes les écrans après? Mon but c'est vraiment qu'il soit centrer ainsi que tout son contenu dans n'importe quel écran. Merci

D'ailleurs, quel est la différence entre une position absolue et une relative?

donc en gros ce qui manque ici c'est margin-right: auto;

 

[anuska]

Je suis ok jusqu'à là mais par contre, comment faire pour centrer toutes mes valises Div à l'intérieur de la Div principal? pour que le tout soit un bloc qui se se centre sur la page principal.

#apDiv3 {
position:absolute;
width:70%;
height:650px;
z-index:1;
margin-top: auto;
margin-left: auto;
margin-right:auto;
background-color: #3F3151;
}
#apDiv1 {
position:absolute;
left:481px;
top:310px;
width:435px;
height:291px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:482px;
top:281px;
width:486px;
height:38px;
z-index:3;
}

 

[lautrejojo]

Quelle que soit ta div, tu peux la centrer horizontalement par rapport à son conteneur en lui donnant une largeur, puis en fixant tes marges gauches et droite en auto.

.div
{
    margin: x auto;
    width: x%; /*ou xpx ou xpt ou ce que tu veux qui fixe une taille à un instant t */
}

Donc pour tes apDiv1 et 4, même combat que pour ta div principale : supprime le positionnement absolu (ou au moins tes left et top), applique les marges auto à gauche et à droite.

 

[anuska]

Quelle que soit ta div, tu peux la centrer horizontalement par rapport à son conteneur en lui donnant une largeur, puis en fixant tes marges gauches et droite en auto.

.div
{
    margin: x auto;
    width: x%; /*ou xpx ou xpt ou ce que tu veux qui fixe une taille à un instant t */
}

Donc pour tes apDiv1 et 4, même combat que pour ta div principale : supprime le positionnement absolu (ou au moins tes left et top), applique les marges auto à gauche et à droite.

Voici ce que j'ai fait:

#apDiv3 {
position:relative;
margin: 0 auto;
width:960px;
height: 650px;
z-index:1;
background-color: #3F3151;
}
#apDiv1 {
margin: auto;
width:40%;
z-index:2;

Le problème ce que la div 1 n'est toujours pas à l'intérieur de la div 3 sinon en dessus....

 

[Johannès]

essaye en enlevant position:relative

 

[lautrejojo]

Voici ce que j'ai fait:

#apDiv3 {
position:relative;
margin: 0 auto;
width:960px;
height: 650px;
z-index:1;
background-color: #3F3151;
}
#apDiv1 {
margin: auto;
width:40%;
z-index:2;

Le problème ce que la div 1 n'est toujours pas à l'intérieur de la div 3 sinon en dessus....

Alors, oui, tu peux ôter position:relative qui, il me semble, ne t'es pas utile dans ce cas.
"Position" n'est pas nécessairement utilisé pour toutes tes div, que çà soit en "absolute" ou en "relative". Je te conseille de prendre le reflex de ne pas t'en servir, sauf à vouloir faire quelque chose de bien précis.

D'autre part, tu peux aussi ôter tes z-index, qui ne s'appliquent qu'aux éléments positionnés (( Voir ce qu'explique la W3C ).

 

[anuska]

Merci!!

Je n'ai pas tout a fait réussi à faire ce que je cherche encore, pourtant ce n'est pas si compliqué. Je vais essayer aujourd'hui encore une fois...

Merci pour ton aide ;