Réalisation d'un menu aligné à droite

**Arnaud F.** · 29/09/2009, 16h36

Bonjour,

je souhaite réaliser un "menu" à droite (en réalité une barre de statut) que je souhaite placer à droite de l'écran.

Pour cela, je dispose d'une div avec la CSS suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.stateBar {
	float: right;
	position:relative;
	width:256px;
	height:96%;
	padding-right:0px;
	padding-left:0px;
	padding-top:10px;
	padding-bottom:10px;
	background-color: #FFFFFF;
	border-left: 1px #999999 solid;
	z-index:10000;
}

A l'intérieur, j'aimerai pouvoir disposer 2 div, l'une à côté de l'autre.

Représentation grossière

Code :

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

1
2
3
4
5
6
7
 
-----------
|_  _____  |
| | |    | |
|A| |  B | |
|_| |____| |
-----------

Comment dois-je positionner les div A et B pour qu'ils restent côte à côte?

**kayoum** · 29/09/2009, 16h39

salut, tu peux essayer avec float:left et float:right
Cordialement, Guillaume

**Huitzilopochtli** · 29/09/2009, 16h40

Code :

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

1
2
3
.stateBar div {
float: right ou left (suivant ce que tu veux)
}

Est-ce que ça répond à ta question ?

**Arnaud F.** · 29/09/2009, 16h56

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
<!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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- CSS -->
 
	<title>Test menu a droite</title>
	<style type="text/css">
		.stateBar {
		    float: right;
			position:relative;
			width:270px;
			height:96%;
			padding-right:0px;
			padding-left:0px;
			padding-top:10px;
			padding-bottom:10px;
			background-color: #FFFFFF;
			border-left: 1px #999999 solid;
			z-index:10000;
		}
		.A {
			float:left;
			width:20px;
			height:96%;
			background-color:red;
		}
		.B {
			float:right;
			width:250px;
			height:96%;
			background-color:blue;
 
		}
	</style>
</head>
<body>
	<div class="statusBar">
		<div class="A"></div>
	    <div class="B"></div>
	</div>
</body>
</html>

Ne donne carrément pas ce que je souhaite obtenir

Sous IE6, j'ai A à gauche de l'écran, B à droite.
Sous Chrome, j'ai rien qui s'affiche...

**Macmillenium** · 29/09/2009, 18h25

Salut Arnaud,

Bah alors, dans le CSS tu mets stateBar et dans le HTML statusBar, il faut choisir

Envoyé par Arnaud F.

Sous IE6, j'ai A à gauche de l'écran, B à droite.

En fait, tes DIV sont vides mais IE6 attribue une hauteur minimale égale à la valeur calculée du line-height, celle-ci dépend du font-size.

Mais sinon :

Envoyé par Arnaud F.

Sous Chrome, j'ai rien qui s'affiche...

Est le comportement correcte.

En revanche, les height:96%; ne fonctionnement pas si le height du parent direct n'est pas renseigné, on va supposer que c'est le BODY, ce qui donne :

Code xhtml :

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
 
<!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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- CSS -->
 
	<title>Test menu a droite</title>
	<style type="text/css">
                html, body { height:100% }
        
                .stateBar {
                    float: right;
                        position:relative;
                        width:270px;
                        height:96%;
                        padding-right:0px;
                        padding-left:0px;
                        padding-top:10px;
                        padding-bottom:10px;
                        background-color: #FFFFFF;
                        border-left: 1px #999999 solid;
                        z-index:10000;
                }
                .A {
                        float:left;
                        width:20px;
                        height:96%;
                        background-color:red;
                }
                .B {
                        float:right;
                        width:250px;
                        height:96%;
                        background-color:blue;
 
                }
        </style>
</head>
<body>
	<div class="stateBar">
		<div class="A">test</div>
	    <div class="B">test</div>
	</div>
</body>
</html>

Je ne sais pas ce que tu veux faire, mais le positionnement relatif et par conséquent le z-index:10000; me semblent inappropriés ici

**Huitzilopochtli** · 30/09/2009, 09h20

Le premier problème vient des height en pourcentage, comme l'a dit Macmillenium.
Ensuite, il serait également plus logique de mettre tes classes A et B en float du même côté (afin que tes blocs soient collés même s'ils la somme de leur largeur n'atteint pas la largeur du container)

**Arnaud F.** · 30/09/2009, 09h39

Ca me donne bien le rendu voulu.

J'en ai profité pour ôter le position relatif, par contre, pour le z-index, j'aimerai pouvoir l'utiliser et donc, que ce menu soit par-dessus tout...

J'ai lu que pour utiliser un z-index sur un flottant, il fallait que cet élément soit positionné, or vu qu'il est flottant...

Je crois que je vais devoir me tourner du côté de Javascript...

**Huitzilopochtli** · 30/09/2009, 09h59

Si tu veux que le menu soit par dessus d'autres éléments, il faudrait le mettre en position:absolute; et donc le caler à droite avec right:0;
Il ne sera pas au dessus d'autres éléments s'il n'est pas en position absolute

**Macmillenium** · 30/09/2009, 10h35

Envoyé par Arnaud F.

J'ai lu que pour utiliser un z-index sur un flottant, il fallait que cet élément soit positionné, or vu qu'il est flottant...

Cela s'applique à tous les éléments.
z-index ne peut être attribuer qu'aux éléments positionnés, c-à-d : relative, absolute et fixed.

Réalisation d'un menu aligné à droite

CSS

Discussions similaires

Partager

Partager