[XHTML][CSS] Overflow sur DIV sans taille déterminée
Bonjour,
j'ai un site qui possède un cadre en haut et un menu sur la gauche. A droite de ce menu, je souhaiterais pouvoir visionner une image très large. Il faut donc des scrollbars pour voir la totalité de l'image. De plus, il faudrait que quand on agrandit la fenêtre, la visibilité de l'image s'agrandisse avec.
Le code HTML de ma page :
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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<link href="style_interface.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="conteneur_haut"></div>
<ul id="conteneur_menu">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
<div id="conteneur_global">
<div id="conteneur_pano">
<img id="img_pano" name="img_pano" src="img/pano.jpg" alt="" title="" />
<a href="" class="cadre_zoom" style="left:100px; top:50px; z-index:102;"></a>
<a href="" class="cadre_zoom" style="left:430px; top:90px; z-index:103;"></a>
<a href="" class="cadre_zoom" style="left:735px; top:120px; z-index:104;"></a>
<a href="" class="cadre_zoom" style="left:1050px; top:90px; z-index:105;"></a>
<a href="" class="cadre_zoom" style="left:1370px; top:50px; z-index:106;"></a>
<a href="" class="cadre_zoom" style="left:1700px; top:10px; z-index:107;"></a>
<a href="" class="cadre_zoom" style="left:2045px; top:50px; z-index:108;"></a>
</div>
</div>
</body>
</html> |
Et voici le code de la page style_interface.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
|
*{
margin:0;
padding:0;
}
img{
border:0;
}
html{
overflow:hidden;
width:100%;
height:100%;
}
body{
overflow:hidden;
width:100%;
height:100%;
}
#conteneur_haut{
width:100%;
height:50px;
background-color:#99FF66;
}
#conteneur_menu{
width:140px;
height:200px;
background-color:#3399FF;
}
#conteneur_global{
position:absolute;
top:50px;
left:140px;
height:307px;
overflow:scroll;
}
#conteneur_pano{
width:2345px;
height:280px;
overflow:hidden;
}
#img-pano{
height:519px;
width:6332px;
}
.cadre_zoom{
position:absolute;
border:#000000 solid 2px;
height:40px;
width:50px;
} |
Le tout s'affiche bien sous Firefox mais pas sous Internet Explorer 6 à cause du fait que le width du conteneur_global n'est pas défini. En effet, sous FF le conteneur prend toute la place qu'il lui reste dans la fenètre mais sous IE6 il prend la taille de conteneur_pano et ne permet donc pas de faire défiler les scrollbars.
J'ai tenté la même chose avec les float:left mais le résultat est le même : le conteneur_global n'ayant pas de width il prend toute la largeur de la fenêtre sous FF comme sous IE6 et vient donc se positionner en dessous du menu.
Voilà, j'ai parcouru pas mal de forums et de sites mais je n'ai pas trouvé de solutions à mon problème, j'espère que vous pourrez m'aider.
