Problème De Positionnement D'un DIV Sur Un Autre

**Mystic'Angel** · 03/05/2007, 13h43

Bonjour à tous et à toutes !

Alors voilà, j'ai une maquette de site en HTML et CSS à rendre pour bientôt, mais n'étant encore que débutant en la matière, je rencontre certains problèmes dont celui-ci :

J'ai une page web, avec au milieu, bien centré, un DIV faisant office de conteneur général dans lequel s'imbriqueront les autres.

Dans ce conteneur qui a un fond (en CSS), j'ai en haut, une bannière avec un fond (en HTML), un contenu sous forme d'une bannière horizontale un peu plus bas avec une image de fond (en CSS) et enfin, sur le fond il me reste une toute petite bandelette tout en bas du conteneur général dans laquelle figurent quelques liens. Pour tout ça, aucun problème.

Maintenant, par-dessus mon contenu (sous forme de bannière horizontale etc...), juste sur la gauche, un peu en décalé du bord de mon conteneur général, je souhaiterais faire passer un menu sous forme d'une bannière verticale ! Pour cela j'utilise le z-index dans ma CSS, mais rien n'y fait, le DIV de ce menu avec son image ne s'affiche pas ! De plus j'aimerais qu'il reste fixe, et qu'il s'adapte en taille si je diminue par exemple la dimension de ma fenêtre.

Voici mon 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
body
{
	position:relative;
	background:#356883;
	width:100%;
	margin:0;
	text-align:center;
}
 
a
{
	text-decoration:none;
}
 
#Bloc_Accueil //Conteneur général avec son fond
{
	position:inherit;
	margin-top:3%;
	margin-bottom:3%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	background-image:url(Fond_Accueil.PNG);
	background-repeat:no-repeat;
	width:80%;
	height:80%;
}
 
#Banniere //Bannière de haut de page chargée depuis l'HTML (haut du conteneur)
{
	position:inherit;
	width:100%;
	left:0%;
	right:0%;
	top:2%;
}
 
#Fond //Fond du DIV de contenu (la bannière horizontale de contenu), chargé depuis l'HTML.
{
	position:inherit;
	z-index:0;
	margin-top:20%;
	margin-left:0;
	margin-right:0;
}
 
#Menu_Gauche // Mon menu de gauche qui refuse de m'obéir et qui doit figurer par-dessus le conteneur général et par-dessus le contenu.
{
	position:inherit;
	z-index:1;
	background-image:url(Menu_Gauche.PNG);
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	float:left;
}
 
#Menu_Bas //Les quelques liens figurant tout en bas du conteneur général
{	
	position:inherit;
	overflow:auto;
	left:3%;
	text-align:left;
	color:white;
}

Et voici mon code HTML :

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
		<body>
			<div id="Bloc_Accueil">
				<div id="Banniere">
					<img src="Banniere.png" alt="Impossible de charger l'image..." width="100%"/>
				</div>
				<div id="Fond">
					<img src="Fond.png" alt="Impossible de charger l'image..." width="100%" height="100%"/>
				</div>
				<div id="Menu_Gauche">
 
				</div>
				<div id="Menu_Bas" style="padding-bottom:5px">
					<a href="FAQ.html"><span class="Lien">FAQ</span></a> | <a href="Mentions.html"><span class="Lien">MENTIONS</span></a> | <a href="APropos.html"><span class="Lien">A PROPOS DU CARRE DES MEDIAS</span></a> | <a href="Contact.html"><span class="Lien">NOUS CONTACTER</span></a> | <a href="Desinscription.html"><span class="Lien">DESINSCRIPTION</span></a>
				</div>
			</div>
		</body>

Please, aidez-moi je ne sais plus que faire

...

**Saturnin** · 03/05/2007, 15h33

Je n'ai pas regardé en détail mais il me semble que déjà la propriété "z-index" ne fonctionne que sur un élément étant positionné en "absolute".

**Mystic'Angel** · 07/05/2007, 09h38

Oui, je l'ai constaté il y a peu de temps. Mon problème de DIV est résolu depuis

, néanmoins, m'en voici un autre sur la tronche : je souhaite faire apparaître en totalité l'image d'un DIV sur lequel je vais appliquer un texte (donc l'image de fond sera chargé en CSS). Le problème, c'est que je veux aussi que mon image se redimensionne en fonction de l'écran et de sa résolution, tout en ne se décalant pas sur mes autres DIVs, j'sais pas si vous voyez le truc

...

Un peu de code devrait tout expliquer : (je l'ai remanié)
Code HTML :

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
<body>
			<div id="Bloc_Page">
				<div id="Banniere">
					<img src="Banniere.png" width="100%" />
				</div>
				<div id="Menu_Navigation">
						<img src="BarreNavigation.PNG" width="100%" />
				</div>
				<div id="Menu_Gauche">
					<div id="Texte_Menu_Gauche">
						<br /><span class="Titre">Bienvenue sur le site<br />Le Carré des Médias</span><br />
						Aegre parsimonia chirographi iocari pretosius matrimonii, quamquam fiducias pessimus divinus insectat catelli.
					</div>
				</div>
				<div id="Fond_Slogan">
					<img src="Fond_Slogan.png" alt="Le Carré Des Médias" width="100%" />
				</div>
				<div id="Fond_Blanc">
					<img src="Fond_BlancX.png" width="100%" />
				</div>
				<div id="Menu_Bas">
					<div id="Lien">
						<a href="FAQ.html"><span class="Lien">FAQ</span></a> | <a href="Mentions.html"><span class="Lien">MENTIONS</span></a> | <a href="A_PROPOS.html"><span class="Lien">A PROPOS DU CARRE DES MEDIAS</span></a> | <a href="CONTACT.html"><span class="Lien">NOUS CONTACTER</span></a> | <a href="DESINSCRIPTION.html"><span class="Lien">DESINSCRIPTION</span></a>
					</div>
				</div>
			</div>
		</body>

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
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
106
107
108
109
110
/* CSS Document */
 
body
{
	background-color:#356883;
}
 
.Lien
{
	color:#FFFFFF;
	margin-left:5px;
	margin-right:5px;
	font-weight:lighter;
}
 
.Titre
{
	color:#D4463A;
	margin:auto;
	font-size:16px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
}
 
a
{
	text-decoration:none;
}
 
#Bloc_Page
{
	position:relative;
	width:80%;
	height:90%;
	margin:auto;
	margin-top:2%;
}
 
#Banniere
{
	position:absolute;
	margin:auto;
	width:100%;
	height:50%;
}
 
#Menu_Navigation
{
	position:absolute;
	z-index:2;
	margin-top:11%;
	width:100%;
	height:50%;
}
 
#Menu_Gauche
{
	position:absolute;
	z-index:1;
	background-image:url(Menu_Gauche.PNG);
	background-repeat:no-repeat;
	margin-top:13%;
	margin-left:4%;
	width:70%;
}
 
#Texte_Menu_Gauche
{
	position:inherit;
	z-index:1;
	margin:auto;
	width:90%;
}
 
#Fond_Slogan
{
	position:absolute;
	margin-top:10%;
	width:100%;
	height:50%;
}
 
#Fond_Blanc
{
	position:absolute;
	z-index:0;
	margin-top:27%;
	width:100%;
	height:50%;
}
 
#Menu_Bas
{
	position:absolute;
	z-index:1;
	background-image:url(Fond_General.PNG);
	background-repeat:no-repeat;
	margin-top:66%;
	width:100%;
	color:#FFFFFF;
	overflow:auto;
	float:left;
}
 
#Lien
{
	padding:5px;;
	margin-left:2%;
	font-size:12px;
}

Ah et j'arrive pas à faire revenir à la ligne mon texte situé dans le DIV Texte_Menu_Gauche, en fait il sort de l'image de fond du DIV Menu_Gauche.

J'suis trop pas doué

**Mystic'Angel** · 07/05/2007, 11h16

Bon, en fait, avec tout le bord*** que me provoque mon code, j'en viens à abandonner pour vous demander des conseils en matière d'optimisation de l'affichage d'une page web bourrée de DIV, d'images et de texte peut importe la résolution.

Ce que je cherchais principalement, c'était faire la maquette de page d'accueil qu'on m'a confiée et faire en sorte que peut importe la résolution, elle soit parfaitement adaptée en taille à l'écran. Sauf que je crois que j'merde un peu trop et que j'ai voulu trop faire...

Donc du coup, j'attends vos conseils tous autant qu'ils puissent être, afin de m'aider à adapter une page Web à n'importe quelle résolution. Je suis ouvert à toute les idées, y compris celles avec des grosses restrictions...

**francis m** · 07/05/2007, 23h33

Envoyé par Mystic'Angel

Donc du coup, j'attends vos conseils tous autant qu'ils puissent être, afin de m'aider à adapter une page Web à n'importe quelle résolution.

c'est une excellente idée

d'auant plus que tu ne sais pas quelle est la résolution de ton cllient, ni si son navigateur est en plein écran

je n'ai pas lu ton code qui est bien trop long pour moi, mais quelques conseils :
- utilise les propriétés width 100%
- n'utilise absolute que si c'est absolument indispensable : il est plus simple de bâtir une page avec un code en flux normal
- à l'intérieur d'un div avec propriété relative, tu peux avoir des div en absolute, float etc

**Mystic'Angel** · 09/05/2007, 11h01

Envoyé par francis m

c'est une excellente idée

Merci

Envoyé par francis m

...n'utilise absolute que si c'est absolument indispensable : il est plus simple de bâtir une page avec un code en flux normal

J'ai souvent vu revenir ce mot "flux", mais je en sais pas vraiment ce que c'est, peux-tu m'en dire plus ?

**francis m** · 12/05/2007, 15h50

pour simplifier, le flux c'est la suite normale dans lequel la page s'affiche :

si tu écris une succession de balises p, h1 etc, toutes ces balises seront affichées dans le même ordre que le tien, et la présentation de ta page sera donc le reflet de tes écrits.

mais, si tu écris une balise avec une classe spécifique, tel que absolute par exemple, cette balise est sortie du flux : elle ne sera pas affichée dans l'ordre de ton écrit, mais à la position absolue que tu as définie, et cela indépendant de l'endroit ou tu l'as créée

exemple 1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>premiere ligne</p>
<p>deuxieme ligne</p>
<p>troisieme ligne</p>
<p>quatrieme ligne</p>

affichera sur ta page
premiere ligne
deuxieme ligne
troisieme ligne
quatrieme ligne

exemple 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>premiere ligne</p>
<p>deuxieme ligne</p>
<p class="un_style_absolute_en_haut_de_ta_page">troisieme ligne</p>
<p>quatrieme ligne</p>

affichera sur ta page
troisieme ligne
premiere ligne
deuxieme ligne
quatrieme ligne

Problème De Positionnement D'un DIV Sur Un Autre

Positionnement en CSS

Discussions similaires

Partager

Partager