[CSS] Centrer les éléments ou un site web
Bonjour,
Je veux centrer horizontalement mon site, j'ai donc crée un bloc "Page"
Code:
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:
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:
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;
} |
centrage de site et des éléments à l'intérieur - suite
Merci pour toutes vos réponses :P
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:
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:
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
