[XHTML][CSS] Overflow sur DIV sans taille déterminée

**pingos** · 17/08/2006, 11h35

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 :

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
 
<!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 :

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

**sedryk** · 17/08/2006, 11h45

Hello Pingos,

Ajoute un width: 100%; sur #conteneur_global ça devrait mieux marcher.

Enfin après avoir regardé en détail ça fait quand même disparaitre une partie de l'image... Je vais regarder ça d'un peu plus prêt

**pingos** · 17/08/2006, 11h54

Oui j'y ai pensé mais dans ce cas conteneur_global prend bien les 100% de son conteneur qui est le body. Il se positionne à droite du menu mais dépasse donc de la taille du menu sur la droite (soit 140px de trop).

**pingos** · 20/08/2006, 15h37

J'ai essayé ça aussi:

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
 
<div id="conteneur_haut"></div>
<div id="conteneur_centre">
	<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="" />
		</div>
	</div>
</div>

Et un bout de la feuille de style qui va avec :

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
 
#conteneur_centre{
	width:100%;
	background-color:#00CCCC;
	height:350px;
}
 
#conteneur_menu{
	float:left;
	display:inline;
	width:140px;
	height:350px;
	background-color:#3399FF;
}
 
#conteneur_global{
	width:auto;
	height:307px;
	overflow:scroll;
}
 
#conteneur_pano{
	width:2345px;
	height:280px;
	overflow:hidden;
}
 
#img-pano{
	height:519px;
	width:6332px;
}

Et même en rajoutant le conteneur_centre auquel on fixerait une largeur de 100% avec une hauteur définie, le conteneur_global devrait prendre 100% de la place qui lui reste, soit la largeur de la page moins la place du menu qui est à gauche. Mais peut-être que la fait de mettre float:left au menu le retire du flux et donc du compte du nombre de pixel, en tout cas sous IE6...
Personne n'a d'idée ?

[XHTML][CSS] Overflow sur DIV sans taille déterminée

CSS

Discussions similaires

Partager

Partager