Problème centrage et div

25 nov. 2005, 00:22

Bonjour,

Je veux centrer horizontalement mon site, j'ai donc crée un bloc "Page"

#page {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
background-color: #FFFFFF;
}

Mes éléments internes sont positionnés en "position: absolute" ou "position: relative"

Ma question:
Le bloc "global" est centré, mais comment faire pour que mes autres blocs ne dépassent pas du bloc "Global" selon la résolution de l'écran ?

Mon exemple est ici: http://princessedunjour.com/

Voyez le problème de mon menu notamment , Résultat catastrophique en 800x600 !

Merci pour vos conseils !

Voici mon html

Code : Tout sélectionner

</head>

<body>

<div id="page">

<div id="logo">

<a href="http://www.princessedunjour.com">

<img id="logo" src="logo.gif" alt="Princesse d'un Jour" /></a>

</div>

<div id="nav">

<ul id="menu_haut">

<li><a id="menu1" title="Colliers mariage" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li><span class="separation">|</span>

<li><a id="menu2" title="Bracelets mariage" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li><span class="separation">|</span>

<li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li><span class="separation">|</span>

<li><a id="menu4" title="Boucles d'oreilles mariage" href="accessoires-boucles-doreilles.htm">DESIGN</a></li><span class="separation">|</span>

<li><a id="menu5" title="Tiares mariage" href="accessoires-mariage-tiares.htm">A PROPOS</a></li><span class="separation">|</span>

<li><a id="menu6" title="Princesse d'un Jour" href="index_eng.htm">CONTACT</a></li><span class="separation">|</span>

<li><a id="menu6" title="Princesse d'un Jour" href="index_eng.htm">ESPACE PRO</a></li>

</ul>

</div>

</div>

</body>

</html>

et mon css

Code : Tout sélectionner


body {

margin: 0; /* pour éviter les marges */

text-align: center; /* pour corriger le bug de centrage IE */

background-color: #DEDEDE;}

img {

border-width: 0;

border-style: none;

}

#page {

     position: relative; /* on positionne le conteneur */

     margin-left: auto;

     margin-right: auto;

     width: 80%;

     text-align: left;

    background-color: #FFFFFF;

     }

div#nav {

position: relative;

width: 800px;

height: 15px;

top: -33px;

left: 300px;

border-style: solid;

border-width: 0;

border-color: #CCCCCC;

}

25 nov. 2005, 09:30

salut
bon apparement tu a mal compris les positionement (dans le flux,en relatif,absolue...)
je te propose cette metode

Code : Tout sélectionner

body {
padding:0;

margin: auto;; /* on le met au centre */

width: 80%;/*on donne une taille au body pour pouvoir le positionner*/
text-align: center; /* pour corriger le bug de centrage IE */

background-color: #DEDEDE;}

img {

border-width: 0;
float:left;
border-style: none;

}

/*on suprime page, body sera sont remplacent*/
div#nav {
height: 15px;
margin-left: 300px;

border-style: solid;

border-width: 0;

border-color: #CCCCCC;

}

je me suis pas trop ocuppé de l'image par contre
fait un essai

http://css.alsacreations.com/
http://openweb.eu.org/

25 nov. 2005, 20:15

Merci

J'ai donc mis mon menu en %, et maintenant il ne dépasse plus de mon bloc "Page", c'est déjà bien...

voici la page en ligne: http://princessedunjour.com/nouveau.htm

Maintenant, un autre problème: mon menu s'affiche sur 2 lignes en conf 800x600.

Existe t'il un moyen de le faire repasser sur 1 ligne (réduction taille de police en 800x600, ou dire que le menu doit automatiquement prendre toute la place en sein du div#nav)?

Je vous reposte les codes de ma page actualisée

Code : Tout sélectionner

<div id="page">
<div id="logo">
<a href="http://www.princessedunjour.com">
<img id="logo" src="logo.gif" alt="Princesse d'un Jour" /></a>
</div>
<div id="nav">
<ul id="menu_haut">
<li><a id="menu1" title="Colliers mariage" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li><span class="separation">|</span>
      <li><a id="menu2" title="Bracelets mariage" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li><span class="separation">|</span>
      <li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li><span class="separation">|</span>
      <li><a id="menu4" title="Boucles d'oreilles mariage" href="accessoires-boucles-doreilles.htm">DESIGN</a></li><span class="separation">|</span>
      <li><a id="menu5" title="Tiares mariage" href="accessoires-mariage-tiares.htm">A PROPOS</a></li><span class="separation">|</span>
          <li><a id="menu6" title="Princesse d'un Jour" href="index_eng.htm">ESPACE PRO</a></li>
</ul>
</div>
</div>
</body>
</html>

Code : Tout sélectionner


body {
margin: 5px;
text-align: center; /* pour corriger le bug de centrage IE */
background-color: #DEDEDE;}
img {
border-width: 0;
border-style: none;
}
#page {
     position: relative; /* on positionne le conteneur */
     margin-left: auto;
     margin-right: auto;
     width: 90%;
     text-align: left;
    background-color: #FFFFFF;
     }
div#nav {
position: absolute;
width: 40%x;
height: 15px;
top: 33px;
left: 275px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 9px;
margin: 5px 0;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 4px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: center;
}
#menu_haut a:hover {
color: #000000;
}
.class="separation" {
padding-left:1em;
padding-right:1em;
}

Merci d'avance

Problème centrage et div

Qui est en ligne