Centrer un site avec dreamweaver

Centrer un site avec dreamweaver - HTML/CSS - Programmation

Marsh Posté le 14-01-2007 à 11:08:47    

Bonjour à tous,
Je voulais me débrouiller, mais étant donné que je viens de passer la nuit dessus sans y parvenir, je demande de l'aide avant de rentrer en longue dépression  :ouch:  
Je cherche à centrer mon site sous dreamweaver, et j'ai suivi pas à pas ce tutorial :
http://www.kachouri.com/tuto/tuto- [...] n-css.html
Seulement voilà, il n'y a que l'image de fond qui se centre ! Et pas moyen de faire suivre les autres calques !
Voila le code css des calques :
<!--
 
body {
   background-color: #000000;
}
#fond {
   position:relative;
   width:1000px;
   height:700px;
   z-index:5;
   margin-right: auto;
   margin-left: auto;
   left: 0px;
   top: 0px;
   visibility: visible;
}
#logo {
   position:absolute;
   width:106px;
   height:95px;
   z-index:6;
   left: 61px;
   top: 121px;
   visibility: visible;
}
#titre1 {
   position:absolute;
   width:516px;
   height:171px;
   z-index:7;
   left: 276px;
   top: 2px;
   visibility: visible;
}
#titre2 {
   position:absolute;
   width:587px;
   height:192px;
   z-index:4;
   left: 247px;
   top: 605px;
   visibility: visible;
}
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
}
#compteur {
   position:absolute;
   width:111px;
   height:50px;
   z-index:9;
   left: 48px;
   top: 36px;
   visibility: visible;
}
a:link {
   color: #336699;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #666666;
}
a:hover {
   text-decoration: underline;
   color: #663399;
}
a:active {
   text-decoration: none;
   color: #663399;
 
}
#actu1 {
   position:absolute;
   width:143px;
   height:20px;
   z-index:19;
   left: 68px;
   top: 225px;
   visibility: visible;
}
#fleches {
   position:absolute;
   width:77px;
   height:291px;
   z-index:18;
   left: 97px;
   top: 245px;
   visibility: visible;
}
#photos2 {
   position:absolute;
   width:60px;
   height:38px;
   z-index:8;
   left: 73px;
   top: 263px;
   visibility: visible;
}
#videos3 {
   position:absolute;
   width:72px;
   height:35px;
   z-index:10;
   left: 147px;
   top: 292px;
   visibility: visible;
}
#radio4 {
   position:absolute;
   width:102px;
   height:40px;
   z-index:12;
   left: 56px;
   top: 324px;
   visibility: visible;
}
#gazette8 {
   position:absolute;
   width:128px;
   height:42px;
   z-index:13;
   left: 18px;
   top: 438px;
   visibility: visible;
}
#chat6 {
   position:absolute;
   width:96px;
   height:49px;
   z-index:14;
   left: 34px;
   top: 372px;
   visibility: visible;
}
#upload10 {
   position:absolute;
   width:74px;
   height:20px;
   z-index:15;
   left: 79px;
   top: 497px;
   visibility: visible;
}
#ecrivez11 {
   position:absolute;
   width:138px;
   height:64px;
   z-index:16;
   left: 113px;
   top: 495px;
   visibility: visible;
}
#forum5 {
   position:absolute;
   width:72px;
   height:24px;
   z-index:17;
   left: 163px;
   top: 362px;
   visibility: visible;
}
#signature {
   position:absolute;
   width:150px;
   height:64px;
   z-index:11;
   left: 851px;
   top: 698px;
   visibility: visible;
}
a {
   font-weight: bold;
}
 
-->
Merci pour votre aide !

Reply

Marsh Posté le 14-01-2007 à 11:08:47   

Reply

Marsh Posté le 14-01-2007 à 11:43:19    

Avec un conteneur qui fait 1000 pixels de large, c'est pas étonnant...
 
Et pis tout tout tout en position absolue, c'est vraiment pas top :(

Reply

Marsh Posté le 14-01-2007 à 12:22:08    

C'est trop 1000 pix ? Je savais pô que ça pouvait influer ? Faudrait que je le mette à combien à ton avis ?
Je sais bien que beaucoup disent que c'est pas top la position absolue, mais j'ai suivi le tuto et je sais pô comment faire autrement.
Tu ferais comment toi ?

Reply

Marsh Posté le 14-01-2007 à 13:55:17    

C'est bon j'ai trouvé !
Pff, le coup du calque global, c'est vachement bien, mais faut penser avant à le definir en calque "parent", et donc à imbriquer les autres calques dedans !
Pour ce faire, dans la fenêtre des calques (dans Dreamweaver), on fait glisser le calque à imbriquer en maintenant ctrl vers le calque global (parent).
On défini ensuite le calque global en position relative comme ça :
 
#global {       /*calque parent */
 position:relative;
 width:1000px;
 height:781px;
 z-index:0;
 margin-right: auto;
 margin-left: auto;
 visibility: visible;
 left: auto;
 top: auto;
 
et tous les autres calques comme ça :
#calque {     /*calque imbriqué*/
 position:absolute;
 width:1000px;
 height:781px;
 z-index:02;
 left: 0px;
 top: 0px;
 visibility: visible;
 
Et voilà, le centrage de ouf !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed