[RESOLU] 2 petits problèmes : positionnement/bug Internet Explorer

Bonjour,

Je rencontre deux petits problèmes dans le développement de mon menu, le premier est le suivant :

- Ma barre latérale gauche ne va pas jusqu'en bas, voir sur la photo ci-dessous :

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

Comment puis-je faire pour que celle-ci descende jusqu'en bas, l'image étant aussi positionnée en bas et sa couleur de fond noire, la barre latérale serait complète. Ce problème concerne Internet Explorer et Firefox.

Le second problème :

- Utilisation de la propriété "'display:block" et de l'évènement "a:hover", "a:focus" qui fonctionne très bien sur Firefox et pas avec Internet Explorer, en effet, sur le lien le block se colorise mais pas lorsque la souris est au dessus de la zone "block" sans être sur le lien.
Comment puis-je faire pour fixer ce problème ?

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

Voici mon code HTML :

<div id="menu_main">
	<div id="menu_barre"></div>
	<div id="menu_liste">
		<ul>
			<li><a href="#">Menu 1</a></li>
			<li><a href="#">Menu 2</a></li>
			<li><a href="#">Menu 3</a></li>
			<li><a href="#">Menu 4</a></li>
			<li><a href="#">Menu 5</a></li>
			<li><a href="#">Menu 6</a></li>
			<li><a href="#">Menu 7</a></li>
			<li><a href="#">Menu 8</a></li>
			<li><a href="#">Menu 9</a></li>
			<li><a href="#">Menu 10</a></li>
			<li><a href="#">Menu 11</a></li>
		</ul>
	</div>
<div>

Voici mon code CSS :

#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;
	background-repeat	: no-repeat;
	float			: left;
	height			: 305px;
	min-height		: 305px;
	width			: 21px;
}

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

#menu_liste ul
{
	background-color	: #D4D0C8;
	margin			: 0px;
	padding			: 0px;
}

#menu_liste li
{
	background-color	: #D4D0C8;
	border			: 0px;
	display			: block;
	height			: 32px;
	line-height		: 32px;
	list-style		: none;
	vertical-align		: center;
}

#menu_liste a
{
	background-color	: #D4D0C8;
	color			: #000000;
	display			: block;
	text-decoration		: none;
}

#menu_liste a:hover
{
	background-color	: #0A246A;
	color			: #FFFFFF;
}

#menu_liste a:focus
{
	background-color	: #0A246A;
	color			: #FFFFFF;
}

Merci pour votre aide,
Mathieu
Modifié par mrousse (05 Apr 2006 - 16:17)

salut.
Pour le 1er probleme question idiote , mais ton image est-elle suffisament haute pour occuper toute la hauteur ,
pourr la 2eme

#menu_liste a

{

	background-color	: #D4D0C8;

	color			: #000000;

	display			: block;

	text-decoration		: none;
        width:                     XXpx;

}

ajouter la proprieté width dans ta regle

Bonjour,

Pour mon premier problème, l'image est en effet plus petite mais devrait être positionnée en bas et comme la couleur de background de mon div est noire, ça ne devrait pas se voir :

	background-color	: #000000;
	background-image	: url("../images/menu_barre_admin.bmp");
	background-position	: bottom;
	background-repeat	: no-repeat;

Je cherche à avoir ceci :

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

Où la zone rouge est le background de mon div "menu_barre" qui est noir grace à : background-color : #000000;

Pour le moment j'ai ça :

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


Mon deuxième problème est résolu !

Merci,
Mathieu
Modifié par mrousse (05 Apr 2006 - 10:41)

dans ton css tu as un height: 305px; essaie de le supprimer

Bonjour,

En enlevant mon "height:305px" j'ai le résultat suivant :

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

Sa ne vient donc pas de ça...
Je ne vois pas comment faire, et vous ?

Merci,
Mathieu
Modifié par mrousse (05 Apr 2006 - 12:00)

si ca vient du height 305px c'est pas suffisant #menu_list est plus long

Bonjour,

Comment faire alors pour avoir mon div "menu_barre" de la même hauteur que mon div "menu_liste" pour éviter ce problème ?

A noter qu'un "height:100%" dans "menu_barre" ne change pas le problème.

Merci,
Mathieu
Modifié par mrousse (05 Apr 2006 - 12:51)

supprimer le float de #menu_barre

html
<div id="menu_barre"><div id="menu_liste">la lemenu</div></div>

css

#menu_barre {
width;largeur totale;
background: #tacouleur  url(tonimage.ext) no-repeat left bottom;
}
#menu_liste {
margin-left: largeur de l'image ; 
bacground: #couleur;
}

Modifié par jp94 (05 Apr 2006 - 13:08)

Bonjour,

Avec Internet Explorer ça marche parfaitement! Merci!

Par contre avec Firefox, j'ai pas la barre de coté qui s'affiche :

http://cjoint.com/data/efn15isdrw_2menu.PNG

Que dois-je faire pour corriger ce problème ?


Voici mon HTML :

<div id="menu_main">
	<div id="menu_barre">
		<div id="menu_liste">
			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
				<li><a href="#">Menu 5</a></li>
				<li><a href="#">Menu 6</a></li>
				<li><a href="#">Menu 7</a></li>
				<li><a href="#">Menu 8</a></li>
				<li><a href="#">Menu 9</a></li>
				<li><a href="#">Menu 10</a></li>
				<li><a href="#">Menu 11</a></li>
			</ul>
		</div>
	</div>
<div>

Voici mon CSS :

#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	: left bottom;
	background-repeat	: no-repeat;
	height			: 305px;
	min-height		: 305px;
	width			: 184px;
}

#menu_liste
{
	background-color	: #D4D0C8;
	float			: right;
	margin-left		: 21px;
	width			: 184px;
}

#menu_liste ul
{
	background-color	: #D4D0C8;
	margin			: 0px;
	padding			: 0px;
}

#menu_liste li
{
	background-color	: #D4D0C8;
	border			: 0px;
	display			: block;
	height			: 32px;
	line-height		: 32px;
	list-style		: none;
	vertical-align		: center;
}

#menu_liste a
{
	background-color	: #D4D0C8;
	color			: #000000;
	display			: block;
	text-decoration		: none;
	width			: 184px;
}

#menu_liste a:hover
{
	background-color	: #0A246A;
	color			: #FFFFFF;
}

#menu_liste a:focus
{
	background-color	: #0A246A;
	color			: #FFFFFF;
}

Merci beaucoup pour votre aide,
Mathieu
Modifié par mrousse (05 Apr 2006 - 13:56)

supprime float: right; de #menu_liste

Bonjour,

Tout marche encore bien avec Internet Explorer mais je rencontre un autre problème avec Firefox, la liste dépasse en bas lorsque j'enlève le "float: right" de "menu_liste".

Voici une capture :

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

Merci pour ton aide !
Mathieu

enleve le height a #menu_barre

Bonjour,

Je dois garder une taille minimum sinon ma barre est coupée quand j'ai pas 11 menus mais que 5 par exemple...

Le "min-height" est pas interprété par Internet Explorer, comment puis-je faire ?

Merci pour ta patience et ton aide !

Bonne Journée,
Mathieu
Modifié par mrousse (05 Apr 2006 - 15:57)

alors il y a d'autres moyen de le faire mais celui la est le plus sur dit-on enleve le height de tes proprietes css
tu mets ca dans le head de ta page

<!--[if IE]>
<style type="text/css">
#menu_barre{
height:305px;
}
</style>
<![endif]-->

j'espere qu'on finira par l'avoir a force
Modifié par jp94 (05 Apr 2006 - 16:02)

Bonjour,

Merci jp94 pour ton aide, ce problème est résolu !

Il faut que je réduise un peu la taille de mon ul/li car il depasse un peu

Une dernière question, le fond reste noir au lieu d'être gris sous mon menu... D'après mon CSS ça ne devrait pas, tu es d'accord ?

Voici une capture :

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

Mon menu sera après tout ça 100% compatible FF&IE et s'adaptera à toutes les tailles, 1 section, 5sections, 15sections,etc.

Merci beaucoup,
Mathieu
Modifié par mrousse (05 Apr 2006 - 16:03)

il n'y aura aucun prob de compatibilite.
pour la 2eme partie.
c'est normal que le fond reste noir puisque lediv menu_liste n'a pas de hauteur definie donc il te faut ajouter dans

#menu_list {min-height: 305px; }

et dans le commentaire

<!--[if IE]>
<style type="text/css">
#menu_barre{
height:305px;
}
#menu_liste {
height: 305px; 
}
</style>
<! endif -->

Modifié par jp94 (05 Apr 2006 - 16:12)

Bonjour,

Tout fonctionne parfaitement, merci beaucoup pour ta rapidité, ta patience et ton aide jp94!

Ce soir après le travail, je vais continuer à bosser dessus pour mettre en place les sous-menu

Je ne connaissai pas cette solution de commentaire pour Internet Explorer

Merci,
Mathieu
Modifié par mrousse (05 Apr 2006 - 16:17)

avec plaisir et ca me permet de me detendre 1 peu, sortir le nez de ma page .