Redimensionnement de div sous IE 6

**zapatis** · 28/06/2012, 12h03

Bonjour,

Je souhaiterai comprendre comment faire une page web avec des div redimensionnalble suivant la taille de la fenêtre.

La page web contient une banniere en haut, et un menu sur la gauche.
La banniere et le menu ne formant qu'une seule image.
Le corps de la page doit se situer en dessous de la banniere et juste à droite du menu.

Je souhaiterai ainsi que le corps de ma page suit intelligemment le redimensionnement de l'image (constituant la baniere et le menu).

J'ai dans un premier temps la structure suivante en 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
 
	<body>									
 
		<div id="PageContent">	
 
			<div id="BarreNavigation" style="width:100%;border: 1px solid black;padding-left:1.5%"><!-- div contenant la barre de navigation -->				
				<p>a</p>
			</div>
 
			<div id="FondPage" style="left:0;top:0;border: 1px solid red;position: fixed;z-index: -20;width: 100%;height: 100%;" > <!-- div contenant le fond de la page = bannière + menu -->														
				<img id="bg" style="position: fixed;z-index: -20;width: 100%;height: 100%;" src="bg.jpg" />
 
				<div id="BodyContent" style="border: 1px solid green; width:90%;margin-left:auto;position: relative;position: fixed;z-index: -20;width: 100%;height: 100%;"><!-- contenu issu de confluence -->		
					<div id="pp" >d</div>
				</div><!-- fin div BodyContent -->	
 
			</div><!-- fin div font de page -->		
 
		</div>
 
		<div id="PiedPage" style="border: 1px solid blue;">					
 
		</div>
	</body>

**mcoutant** · 28/06/2012, 17h02

Salut zapatis,

Pour commencer, pourquoi met tu des position:fixed partout ?

Et ensuite je vais faire quelques remarques sur ton code,

width="100%" -> pas la peine de préciser par défaut c'est auto.
Dans #BodyContent tu met à la fois position:fixed et position:relative ?!
margin-left:auto ??? Que voulais tu faire ? Si tu voulais centrer -> margin:0 auto;

Pourrais tu nous faire un dessins sous paint de ta page attendu car je n'ai pas vraiment compris tes explications.

**zapatis** · 29/06/2012, 11h06

Voici la mise en forme attendu:

Je rappelle que la banniere et le menu sont une et une seule image.

**mcoutant** · 29/06/2012, 11h12

Ton site à une largeur fixe ?

**mcoutant** · 29/06/2012, 11h20

Bon je pense que tu dois structurer à peu près comme ceci

Code html :

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
 
<head>
	<style>
                //bg pour background
                #bg{
                        width:LargeurImg;
                        height:HauteurImg;
                        postion:relative;
                        background:url('url_de_ton_img') no-repeat;
                }
 
                #menu{
                        position:absolute;
                        top:xx; //A toi de voir à combien tu le place
                        left:xx; //Idem c'est toi qui va voir à combien tu le place
                }
 
                #corps{
                        width:LargeurQueTuVeux;
                        height:HauteurQueTuVeux;
                        position:absolute;
                        top:xx; //A toi de voir à combien tu le place
                        left:xx; //Idem c'est toi qui va voir à combien tu le place
                }
        </style>
</head>
<html>
	<body>
		<div id="bg"></div>
		<div id="menu"></div>
		<div id="corps"></div>
	</body>
</html>

NB: N'oublie pas de mettre le doctype de ton document

**zapatis** · 29/06/2012, 13h55

Je te remercie c'est exactement la structure que je recherchais.

Redimensionnement de div sous IE 6

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager