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