probleme de z-index

**david.boulouart** · 01/08/2008, 10h37

Bonjour,

petit soucis avec mon header

le titre (#bandeau_cntr) devrait apparaitre au-dessus de tout (g placé des z-index) or là il est masqué.

Autre pépin, sous une taille de fenetre < à 700px (taille de l'image de droite) celle-ci passe à la ligne.

Voici le code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>
 
 
	<link rel="stylesheet" type="text/css" href="immuable.css">
 
 
 
 
 
 
 
	<div id="bandeau">
 
 
					<div id="bandeau_gche">
						<div id="bandeau_gche_content"></div>
					</div>
					<div id="bandeau_drte">
						<div id="bandeau_drte_content"></div>
					</div>
					<div id="bandeau_cntr">
						<div id="bandeau_cntr_content" class="clearfix"></div>
						<div class="specialclear">
						</div>
 
					</div>
 
 
			</div>
					<div class="specialclear">&nbsp;
					</div>
				</div>
			</div>
 
</div>
 
</body></html>

et la 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
	* { margin:0; padding:0; font-size: 100%; } 
 
	html { height: 100% } 
	body { 
		min-height: 101%;	
		font-size: 100.01%; 
		position: relative; 
		text-align: left; 
		padding: 10px 0 0 0;
	} 
 
	#bandeau {background: transparent; clear:both; width: auto; z-index: 1;}
 
	#bandeau_gche {float: left;}
	#bandeau_drte {float:right;}
	/*#bandeau_cntr {width:auto;}*/
 
	#bandeau_gche {z-index: 99;}
	#bandeau_drte {z-index: 5;}
	#bandeau_cntr {z-index: 99;}
	#bandeau_gche_content {z-index: 4;}
	#bandeau_drte_content {z-index: 6;}
	#bandeau_cntr_content {z-index: 99;}
 
	#bandeau,
	#bandeau_gche_content,
 	#bandeau_drte_content,
	#bandeau_cntr_content,
	{ position:relative; }
 
	#bandeau_cntr_content {text-align: left;}
 
	#bandeau_gche, #bandeau_cntr, #bandeau_drte {height: 140px;}
 
 
	#bandeau {
		background: transparent url('fond_gauche.png') repeat-x top right;		
		width:95%; 
		margin-left: auto;
	 	margin-right: auto;
		max-width:inherit;
		min-width:inherit;
		border: 2px solid;
	}
 
 
	#entete { background: transparent; }
	#bandeau_cntr {background: transparent url('titre_site.png') no-repeat center center; }
		#bandeau_gche {background: transparent url('logo_site.png') no-repeat center center; width: 170px; margin-left:40px;}
	#bandeau_drte {
	background: transparent url('fond_bandeau.png') no-repeat center right; width: 700px;}
 
 
 
/* #####################################################################################################*/
 
	 .clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
 
	/* Safari*/
	.clearfix { display: block; } 
 
 
 
	/* *** */
	.specialclear { display: none;}

**Erwan31** · 01/08/2008, 16h02

Bonjour et bienvenue,
erreur classique, le z-index ne s'applique qu'aux éléments positionnés (relative, absolute, fixed)

probleme de z-index

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager