menu ul horizontal: comment le centrer et rendre chaque li superposable?

**misterZ** · 03/10/2009, 15h10

Bonjour!
Le titre parle tout seul...
Voici mon css (extrait):

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
div#tupperware{
margin:0 -1% auto;
padding:0.5%;
position:relative;
width:98.5%;
height:97%;
background-color:#FFCC33;
border-left:2px solid #FFFF00;
border-right:2px solid #FFFF00;
border-bottom:2px solid #FFFF00;
}
div#menu{
position:relative;
margin:0%; /*pas touche sinon décalage haut*/
padding:0.5%;
height:24px;
background-color:#663300;
}
#menu ul{margin:0%;padding:0%;list-style-type:none; /*p.t margin sinon décal.---- padding=hauteur du menu boutons*/
}
#menu li{margin:0%;padding-right:2%;float:left;
}
#menu ul li a{
width:138px;
height:24px;
background-color:#FFCC33;
font:160% Arial, Helvetica, sans-serif;
color:#FFCC33;
background:#996600 url(image/bouton1.png) repeat-x;
text-align:center;
float:left;
}
#menu ul li a:hover{
background:#996600 url(image/bouton2.png) repeat-x;color:#66FF66;
}
 
div#contenu{
width:100%;
height:70%;
background-color:#FFCC33;
}
#contenu p{
margin:0% 1%;
}
#contenu h1{
height:20px;margin:0 50%;padding:0;
div#piedpage{
width:100%;
height:1%;
background-color:#FFCC33;
text-align:center;
}
div#gauche{
margin:3% 0.5%;
width:120px;
height:92;
color:#993300;
font:75%/1.4 Arial, Helvetica, sans-serif;
text-align:center;
float:left;
}
div#droite{
margin:3% 0.5%;
width:80px;
height:92;
color:#993300;
font:75%/1.4 Arial, Helvetica, sans-serif;
text-align:center;
float:right;
}

et 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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>pou&ecirc;t</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("pouet.css");
-->
</style>
</head>
 
<body>
<div id="ombretupp"> 
  <div id="tupperware"> 
    <div id="menu"> 
      <ul style="center">
        <li><a href="l'atelier.html">L'atelier</a></li>
        <li><a href="sanzas.html">Les sanzas</a></li>
        <li><a href="documentation.html">Documentation</a></li>
        <li><a href="plateaux.html">Plateau</a></li>
        <li><a href="liens.html">Liens</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <div id="gauche"><img src="image/dublin.jpg" width="120" height="80">image</div>
    <div id="droite"><img src="image/francisbebey2.jpg" width="80" height="80">hello</div>
    <div id="contenu3"> </div>
    <div id="piedpage">bloublou</div>
  </div>
</div>
 
</body>
</html>

Et ce que ça donne:
http://fiddledrone.free.fr/index2.html

Je voudrais qu'en redimensionnant la fenêtre de navigateur:
1)- le menu soit toujours centré au milieu de mon div#menu (c'est à dire toujours la même distance des bords à droite ou à gauche),
2)- que les li puissent se superposer (lors d'une réduction totale de la fenêtre),
3)- comment faire pour que les li s'allongent avec l'agrandissement de la fenêtre? J'ai essayé de mettre leur taille en pourcentage (#menu ul li a): ça marche, mais hélas ça les remet aussi en liste verticale...

Merci pour votre aide! J'ai déjà essayé plein de choses, mais là je sèche...

**Erwan31** · 03/10/2009, 22h15

Bonjour,
commence par remplacer ta déclaration de Doctype (qui fait basculer les navigateurs dans un mode de rendu non conforme appelé le plus souvent mode Quirks, faire une recherche pour les détails) par une déclaration complète:

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Et pour cenrter horizontalement ton bloc c'est pas margin:0 -1% auto; qu'il faut déclarer mais margin: 0 auto -1%, la valeur centrale valant pour la gauche et la droite

menu ul horizontal: comment le centrer et rendre chaque li superposable?

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager