Réalisation d'un menu aligné à droite

Version imprimable

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:

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:

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?

29/09/2009, 16h39
kayoum

salut, tu peux essayer avec float:left et float:right
Cordialement, Guillaume
29/09/2009, 16h40
Huitzilopochtli
Code:

1 2 3 .stateBar div { float: right ou left (suivant ce que tu veux) }
Est-ce que ça répond à ta question ?

Code:

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 :aie:

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

Salut Arnaud,

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

Citation:

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 :

Citation:

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:

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 ;)

30/09/2009, 09h20
Huitzilopochtli

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)
30/09/2009, 09h39
Arnaud F.

:hola:

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...
30/09/2009, 09h59
Huitzilopochtli

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
30/09/2009, 10h35
Macmillenium

Citation:

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.