[Fun] Casse-tête en Z-index

**Er3van** · 14/05/2008, 16h07

Voici un véritable casse-tête qui je l'espère à quand même une solution !

Après les discussions récentes au sujet des z-index, j'ai voulu m'amuser un peu à tester un cadre somme toute banal, mais qui s'avère plus complexe à réaliser qu'il ne le semble à première vue.

Mon cadre est composé de quatre barres, deux verticales ( gauche et droite ), et deux horizontales ( haut et bas ).

L'effet que je souhaite faire, vous le connaissez sans doute :
Je souhaite que la barre du dessus soit sous la barre gauche mais sur la barre droite, et que la barre du dessous soit sur la barre gauche mais sous la barre droite !

Si joint un bout de code qui vous donnera une ébauche :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
	<title>Gwinevia</title>
	<style type="text/css">
        * { 
                margin : 0 ; 
                padding : 0 ; 
        }
        #barH {
                top : 20 px ;
                height : 20 px ;
                width : 100% ;
                background-color : #FF5555 ;
                position : absolute ;
                z-index : 1 ;
        }
        #barG {
                left : 20 px ;
                height : 100% ;
                width : 20 px ;
                background-color : #777777 ;
                position : absolute ;
                z-index : 1 ;
        }
        #barB {
                bottom : 20 px ;
                height : 20 px ;
                width : 100% ;
                background-color : #5555FF ;
                position : absolute ;
                z-index : 1 ;
        }
        #barD {
                right : 20 px ;
                height : 100% ;
                width : 20 px ;
                background-color : #55FF55 ;
                position : absolute ;
                z-index : 1 ;
        }
        #content {
                height : 100% ;
                width : 100% ;
        }
        </style>
</head>
<body>
	<div id="content">
		<div id="barH"></div>
		<div id="barG"></div>
		<div id="barB"></div>
		<div id="barD"></div>
	</div>
</body>
</html>

A vous de jouer

PS : Candy, j'te met au défi ! ^^

**pierre24** · 14/05/2008, 16h17

En faisant jouer la propriété "z-index", ca ne marche pas !?

**Er3van** · 14/05/2008, 16h24

Surement, mais comment ??? C'est bien ça toute la question ^^

**pierre24** · 14/05/2008, 16h29

tout simplement en faisant varier la vauleur : -1,1,2,3...non ???

**Er3van** · 14/05/2008, 16h32

Quoi, faire varier la valeur ????? Je n'y avais pas pensé !!!!

.....

Essaye, constate, et si tu trouve une solution qui marche, poste !

**copin** · 14/05/2008, 16h44

Blop!!

Une solution qui fonctionne mais qui ne doit pas etre la meilleure...

Divisé un div en deux div différents et faire varier le Z-index

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
 
<html>
<head>
	<title>Gwinevia</title>
	<style type="text/css">
	* { 
		margin : 0 ; 
		padding : 0 ; 
	}
	#barH {
		top : 20 px ;
		height : 20 px ;
		width : 100% ;
		background-color : #FF5555 ;
		position : absolute ;
		z-index : 5 ;
	}
	#barG {
		left : 20 px ;
		top: 50%;
		height : 50% ;
		width : 20 px ;
		background-color : #777777 ;
		position : absolute ;
		z-index : 1 ;
	}
	#barG2 {
		left : 20 px ;
		height : 50% ;
		width : 20 px ;
		background-color : #777777 ;
		position : absolute ;
		z-index : 6 ;
	}
	#barB {
		bottom : 20 px ;
		height : 20 px ;
		width : 100% ;
		background-color : #5555FF ;
		position : absolute ;
		z-index : 1 ;
	}
	#barD {
		right : 20 px ;
		height : 100% ;
		width : 20 px ;
		background-color : #55FF55 ;
		position : absolute ;
		z-index : 4 ;
	}
	#content {
		height : 100% ;
		width : 100% ;
	}
	</style>
</head>
<body>
	<div id="content">
		<div id="barH"></div>
		<div id="barG"></div>
		<div id="barG2"></div>
		<div id="barB"></div>
		<div id="barD"></div>
	</div>
</body>
</html>

J'avoue! Ca fait preque honte de poster ça... Mais t'as le résultat...

**Er3van** · 14/05/2008, 16h53

Oui, dans ce cas ça marche, mais dans ce cas tu n'a plus 4, mais 5 barres

Mais ce n'est pas tant le résultat que je recherche ( d'où l'icône [Fun] ), plutôt une approche qui résoudrait le problème sans changer les données de celui-ci ^^'

Pas si simple hein ?

Et Candy, où elle est ? ^^

PS : Sinon l'idée était bonne, un autre idée de ce type était de mettre un carré 20*20 à l'emplacement du coin, et que celui-ci ait la couleur de la barre qui va bien

**Erwan31** · 14/05/2008, 19h27

Envoyé par Er3van

Et Candy, où elle est ? ^^

Elle bosse sur son site

Mais c'est vrai que Candy sait si bien le faire

**Candygirl** · 14/05/2008, 19h34

Je propose:

Code :

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

1
2
3
4
5
6
7
8
	#barD:before {
		width:20px;
		height:20px;
		display:block;
		background-color:#FF5555;
		content:" ";
		margin-top:20px;
	}

Mais ça ne passe qu'à partir d'IE8 puisque les pseudo-éléments :before et :after (pourtant du css2) ne sont pas reconnus par IE7.

EDIT: ARF!! Erwan31!!! lol

**clb56** · 14/05/2008, 20h24

Envoyé par Erwan31

Elle bosse sur son site

Mais c'est vrai que Candy sait si bien le faire

Trop amoureux je suis

**Er3van** · 14/05/2008, 23h57

N'empêche qu'elle a trouvé une solution... :X

Et moi qui pensait que c'était insoluble dans l'état des choses.... :'(

Encore bravo à Candy ! ( même si j'peux pas tester, la flemme de télécharger une béta d'IE8, j'te fais pleinement confiance ^^ )