18073 sujets

Questions générales et questions de débutants

[résolu] Centrer les éléments ou un site web en CSS

Bonjour,

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

#page {
position: relative;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}

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

Ma question:
OK le bloc "global sera 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.

Voyez le problème de mon menu notamment

J'ai beau essayé divers trucs, float, etc, j'ai toujours le même problème Smiley fache Smiley confus
Modifié par pp51 (24 Nov 2008 - 14:03)
Administrateur
Salut Smiley smile

Voudrais-tu bien marquer les codes correctement, comme demandé dans les Règles ?
Merci d'avance Smiley cligne
Bonjour Raphael,

J'espère que mon code est plus présentable maintenant.

Une idée sur ma question ?

Merci
Administrateur
pp51 a écrit :
J'espère que mon code est plus présentable maintenant.
En fait, je ne vois aucune différence, il n'y a toujours pas les éléments de [ code] Smiley decu

pp51 a écrit :

Ma question:
OK le bloc "global sera 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.

Voyez le problème de mon menu notamment

Tous les éléments vont rester affichés dans ton bloc #page (puisqu'il est positionné), sauf bien-sûr si leur largeur dépasse celle du conteneur.
Le problème est que la largeur de ton menu est plus grande que la largeur de #page, donc il est normal qu'il dépasse.
merci, je vais essayer de réduire la width de mon menu pour qu'il ne dépasse pas (je le mets en % ou en px ?)

Question subsidiaire: en passant sur du 800x600, le menu restera t'il dans le bloc "Page" ?

Pour l'affichage du code, tu voulais le c/c de mon code html et css ?

En tout cas le bouquin Pratique du design web est très bien fait Smiley cligne
Raphael et à tous les autres,

Je reviens à la charge, car malheureusement depuis 5 jours, je tourne en rond !

Voir sur la page www.princessedunjour.com/
Résultat catastrophique en 800x600 !

Help, pourtant mon div "nav" ne dépasse plus du div "page". Je n'y comprends plus rien....

Voici mon html

</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

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;
}

Modifié par pp51 (24 Nov 2008 - 14:04)
Administrateur
pp51 a écrit :
Raphael et à tous les autres,

Je reviens à la charge

Moi aussi. Pour la deuxième fois, merci de bien vouloir afficher ton code comme le demandent les Règles du forum, c'est à dire avec le bouton [ code] Smiley ohwell
Bonjour à tous,

Pouvez-vous éclairer ma lanterne qui est bien éteinte Smiley decu sur ce problème...

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

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://www.princessedunjour.com/

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


<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>






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
Modifié par pp51 (24 Nov 2008 - 14:05)
Sujet clos
Aller à