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

**pp51** · 24/11/2005, 22h57

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
#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://www.princessedunjour.com

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

Merci pour vos conseils !

Voici mon html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
</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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
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;
 
}

**tfe** · 24/11/2005, 23h45

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

width: 800px;

ne pas utiliser de taille fixe, mais preferer les % si tu le veux vraiment

**Perceval** · 25/11/2005, 09h35

Un des problème, c'est que d'un coté tu as ton bloc page qui est en pourcentage alors que ton bloc de navigation est fixe. Tu l'as mis à 800px. Normal qu'en plus de l'image, ta barre de navigation dépasse.

Il faudrait en 1er lieu que tu réduises la taille du width

**Space Cowboy** · 25/11/2005, 15h39

Faut choisir ... taille fixe et ton site seras en visible au minimum dans une certaines résolution ou % et ton site seras quand même visible dans une résolution miminum, mais en agrandissant il se déformera pour afficher plus de chose.

**Dayom** · 25/11/2005, 15h49

Pour centrer mon site, j'ai fais comme toi un bloc contenant toute ma page, je lui ai donné une dimension en pixel, et j'ai utilisé une petite astuce :

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div id="page">
   La page
</div>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#page {
position:absolute;
width:800px;
left:50%;
margin-left:-400px
}

Et après, tout les éléments dedans sont positionables en absolute ou en relative.

**pp51** · 25/11/2005, 19h05

Merci pour toutes vos réponses

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
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

**Space Cowboy** · 25/11/2005, 20h08

Si la taille du menu + la taille du logo fait plus de 720 tu ne pourra jamais afficher le menu en 800*600.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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;
}
#nav {
position: absolute;
/* width: 40%; */ 
height: 15px;
top: 30px;
left: 275px;
}
#menu_haut {
margin: 8px 0px 8px 0px;
padding: 0px;
letter-spacing: 0.2em;
list-style-type: none;
font: 9px Arial, Times, serif;;
}
 
#menu_haut li {
display: inline;
}
#menu_haut a {
color: #999999;
text-decoration: none;
}
#menu_haut a:hover {
color: #000000;
}
.separation{
padding:0em 1em 0em 1em;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="page">
	<a id="logo" href="http://www.princessedunjour.com"><img src="logo.gif" alt="Princesse d'un Jour" /></a>
	<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>
			<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>

il n'y a pas de bordure par défaut, et tu la met a 0, donc tu peut virer tout les border de nav.

**vermo** · 27/12/2005, 15h24

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#page {
position:absolute;
width:800px;
left:50%;
margin-left:-400px
}

Et après, tout les éléments dedans sont positionables en absolute ou en relative.

excuse moi, mais cela, je pense pas que ca soit une bonne solution. Car, si l'utilisateur réduis la page vers la gauche, tu remarques que ton coté gauche devient invisible... c'est quand meme un peu génant.

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

Centrer un élément en CSS

Discussions similaires

Partager

Partager