HTML CSS problème de résolution

**poupouny** · 17/07/2006, 17h21

bonjour à tous

voila je réalise actuellement un site en HTML CSS mais j'ai un soucis d'affichage.
Quand on est en résolution de 1024 tout se passe bien mais avec une resolution inferieur ou superieur mon menu est décalé. Pour le moment j'ai partiellement regler le probleme en permettant au menu de se mettre sur un colonne mais j'aimerai que ce soit une ligne qui reste en place quelque soit la resolution
voici les code

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
#fond {
margin: 0;
padding: 0;
background: black;
font: 80% Tahoma;
background-image: url(graph.jpg);
background-repeat: no-repeat;
background-position:center;
 
 
height:600px;
width:800px;
position:relative;
}
 
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu {
display:inline;
position:absolute;
top:150px;
left:120px;
float:left;
text-align:left;
/*left: 50%;
top: 50%;
width: 800px;
height: 200px;
margin-top:-140px;
margin-left:-385px*/
 
}
 
#menu dl {
float: left;
width:110px;
 
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #BD1F1F;
border: 1px solid white;
margin: 1px;
}
#menu dd {
display: none;
color:#FF3333;
border: 1px solid red;
}
#menu li {
text-align: center;
background-color:#EE7777;
}
#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background-color:#888888;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>vip-attitude Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href= "style2.css">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
 
//-->
</script>
</head>
 
<body bgcolor="#000000" style="font-family:Tahoma; font-size:80%; background-position:top;">
	<center><div align="left" id="fond"></div>
	  <div id="menu" style="background-position:top; ">
        <dl>
          <dt onMouseOver="javascript:montre('smenu1');"><a href="" title="1">Le produit</a></dt>
          <dd id="smenu1" onMouseOver="javascript:montre('smenu1');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 1.1</a></li>
              <li><a href="#">Sous-Menu 1.2</a></li>
              <li><a href="#">Sous-Menu 1.3</a></li>
              <li><a href="#">Sous-Menu 1.4</a></li>
              <li><a href="#">Sous-Menu 1.5</a></li>
              <li><a href="#">Sous-Menu 1.6</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu2');"><a href="" title="2">Loisirs</a></dt>
          <dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 2.1</a></li>
              <li><a href="#">Sous-Menu 2.2</a></li>
              <li><a href="#">Sous-Menu 2.3</a></li>
              <li><a href="#">Sous-Menu 2.4</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu3');"><a href="" title="3">Service</a></dt>
          <dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 3.1</a></li>
              <li><a href="#">Sous-Menu 3.2</a></li>
              <li><a href="#">Sous-Menu 3.3</a></li>
              <li><a href="#">Sous-Menu 3.4</a></li>
              <li><a href="#">Sous-Menu 3.5</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu4');"><a href="" title="4">Bien-être</a></dt>
          <dd id="smenu4" onMouseOver="javascript:montre('smenu4');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 4.1</a></li>
              <li><a href="#">Sous-Menu 4.2</a></li>
              <li><a href="#">Sous-Menu 4.3</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu5');"><a href="" title="5">Shopping</a></dt>
          <dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 5.1</a></li>
              <li><a href="#">Sous-Menu 5.2</a></li>
              <li><a href="#">Sous-Menu 5.3</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu6');"><a href="" title="6">Gastronomie</a></dt>
          <dd id="smenu6" onMouseOver="javascript:montre('smenu6');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 6.1</a></li>
              <li><a href="#">Sous-Menu 6.2</a></li>
              <li><a href="#">Sous-Menu 6.3</a></li>
            </ul>
          </dd>
        </dl>
        <dl>
          <dt onMouseOver="javascript:montre('smenu7');"><a href="" title="7">Nightclubbing</a></dt>
          <dd id="smenu7" onMouseOver="javascript:montre('smenu7');" onMouseOut="javascript:montre('');">
            <ul>
              <li><a href="#">Sous-Menu 7.1</a></li>
              <li><a href="#">Sous-Menu 7.2</a></li>
              <li><a href="#">Sous-Menu 7.3</a></li>
            </ul>
          </dd>
        </dl>
      </div>	
</center>
</body>
</html>

merci d'avance

**MasterOfChakhaL** · 17/07/2006, 17h29

vu que tu définis toutes tes dimensions en pixels, la seul solution simple que je vois, c'est de définir une largeur fixe pour ton body.

Un utilisateur qui aura une résolution plus faible ne verra pas un design "cassé". En revanche, il sera obligé de scroller horizontalement, ce qui est souvent considéré comme étant anti-ergonomique...

Si cette solution ne te convient pas, il te reste la possibilité de refaire le design en design fluide qui s'adapte à la résolution en utilisant des unités de mesures proportionnelles comme les em ou les pourcentages.

Si tu ne connais pas et que ca t'interesse, tu vas dans ton moteur de recherche préféré et tu lui indique design fluide comme mot clé, tu devrais trouver plein d'info