HTML CSS problème de résolution
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:
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:
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
