[RESOLU] Problème de positionnement de bloc ?

Bonsoir,

Je suis en train de développer un menu en CSS et je suis confronté à un petit problème de positionnement.

Voici mon menu buggé :

http://cjoint.com/data/eeuSKm8nL2_menu.bmp

Voici mon code HTML :

<div id="menu_main">
	<div id="menu_barre"></div>
	<div id="menu_liste">
		<ul>
			<li>Menu 1</li>
			<li>Menu 2</li>
			<li>Menu 3</li>
		</ul>
	</div>
<div>

Voici mon CSS qui pose problème :

#menu_main
{
	background-color	: #D4D0C8;
	border-left		: 1px solid #FFFFFF;
	border-right		: 1px solid #808080;
	border-top		: 1px solid #FFFFFF;
	bottom			: 28px;
	font-color		: #000000;
	font-family		: Tahoma;
	font-size		: 11px;
	position		: absolute;
	width			: 184px;
}

#menu_barre
{
	background-color	: #000000;
	background-image	: url("../images/menu_barre_admin.bmp");
	background-position	: bottom left;
	background-repeat	: no-repeat;
	height			: 305px;
	min-height		: 305px;
	width			: 21px;
}

#menu_liste
{
	background-color	: #D4D0C8;
	width			: 163px;
}

Voici ce que je voudrais faire :

http://cjoint.com/data/eeu23IInoc_menu2.JPG

Comment puis-je faire pour mettre mon div "menu_liste" en haut à gauche collé à mon "menu_bare" ?

Merci pour votre aide, je suis un peu perdu là...
Mathieu
Modifié par mrousse (04 Apr 2006 - 22:51)

Bonjour mrousse,

Je n'ai pas compris ce que tu désires faire.

Veux-tu faire remonter tes items en haut à gauche ?

Bonjour,

Oui, c'est en effet celà que je veux faire. Je souhaiterai que mon bloc soit placé en haut à gauche, collé à la barre verticale.

J'ai mis du blanc, voici sa position actuelle :

http://cjoint.com/data/eewnBO4bco_menu3.bmp

Merci,
Mathieu
Modifié par mrousse (04 Apr 2006 - 22:15)

Bonjour. Il faut utiliser la propriété float

Bonsoir,

J'ai donc rajouté le "float" ce qui nous donne le code suivant :

#menu_liste
{
	background-color	: #FFFFFF; //#D4D0C8;
	float			: left;
	width			: 163px;
}

Et voici le résultat :

http://cjoint.com/data/eewv7J0sD1_menu4.bmp

Comment faire pour qu'il se place en haut ?

Merci,
Mathieu
Modifié par mrousse (04 Apr 2006 - 22:24)

bonjour,

Ce comportement est normal, la liste est dans le flux html apres la "barre" et la liste vient "flotter" ... aprés.

Tu peut mettre la "barre" en float et ainsi la liste pourra remonter.

La liste peut-etre elle même alors positionner aussi en float ou pas


++

Bonjour,

Merci pour votre aide!

J'ai donc celà :

#menu_barre
{
	background-color	: #000000;
	background-image	: url("../images/menu_barre_admin.bmp");
	background-position	: bottom left;
	background-repeat	: no-repeat;
	float			: left;
	height			: 305px;
	min-height		: 305px;
	width			: 21px;
}

#menu_liste
{
	background-color	: #FFFFFF; //#D4D0C8;
	width			: 163px;
}

Tout marche parfaitement maintenant avec Firefox dont voici le résultat en couleur pour voir les limites de chaque bloc :

http://cjoint.com/data/eewQHd2SYm_menu5.bmp

Cependant, avec Interne Explorer, le problème persiste :

http://cjoint.com/data/eewUx3Skr2_menu6.bmp

De quoi celà peut-il venir ?

Merci d'avance,
Mathieu
Modifié par mrousse (04 Apr 2006 - 22:48)

Bonjour,

J'ai donc résolu mon problème en metant un "float:right" dans ma section "#menu_liste" et maintenant ça marche avec Internet Explorer et Firefox

Bonne Soirée,
Mathieu