28173 sujets

CSS et mise en forme, CSS3

Probleme menu horizontal, z-index?

Bonjour à tous,

Je suis actuellement en train de déveloper un site, dans lequel j'ai inserer un menu déoulant horizontal. Mais j'ai un problème, et aprés de longues heures de recherche, je n'ai toujours pas trouver de solution.
Donc voici mon problème:
Il y a sous le menu une publicité, ou une image, un titre... et lorsque le menu se deroule il passe bien par dessus cette pub, mais lorsque je survole les liens avec la souris, il se replie au niveau de la pub. Je ne rencontre ce problème que sous ie (pour changer), et je pense que mes z-index sont correctement placés (vu que les sous menus passent bien au dessus de la pub lors du survol du menu et que je ne rencontre plus aucun problème sous FF depuis que je les ai placés).

Voici mes sources:
css du menu:

#header_menu 
{
	z-index:10001;
	position: absolute;
	top: 120px;
	left: 0;
}
#header_menu dl 
{
	
	float:left;
	margin-right:8px;
}

#header_menu dt 
{
	cursor: pointer;
	font-weight: bold;
}

#header_menu dd 
{
	border: 1px solid gray;
	position:absolute;
	z-index:10001;
	display :none;
}
#header_menu li 
{
	background: #fff;
	
}

#header_menu li a, #menu dt a 
{
	color: #000;
	text-decoration: none;
	display: block;
	width:185px;
	height: 100%;
	border: 0 none;
	padding:3px;
}

#smenu2 li a:hover
{
	background:#AA2B6E;
	color: #FFF;	
}

#smenu3 li a:hover 
{
	background:#AAD501;
	color: #FFF;
}

#smenu4 li a:hover 
{
	background:#6FA9D7;
	color: #FFF;
}



et voici le css d'une de ces publicités:

#bloc_photo
{
	display: block;
	position: absolute;
	width: 510px;
	height: 300px;
}

#bloc_pub
{
	position: absolute
	z-index: 999;
}


et voici le code Html de cette pub:

<div id="bloc_pub">
	<a href="$URL_BUILDER.getUrlTo("_HOME")" title="un titre">
	    <img id="bloc_photo" src="images/accueil/photo.gif" alt="ho la belle photo" title="un autre titre" />
        </a>
</div>


J'ai fait plusieurs tests: placer differement les z-index, de nouveaux div, ect..., j'ai cherché sur divers forum tel que celui ci, mais je n'ai pas trouvé de solution.
En esperant que quelqu'un puisse m'aider...

A+
Marc
Modifié par MArc3466 (12 Jul 2007 - 12:05)
Salut,
Tout est en local donc pour l'instant pas de page en ligne.
Mais j'ai un screen:

http://www.mezimages.com/up/07/417510-pb_menu.JPG

Le menu boutique passe bien par dessus la publicité présente en dessous, cependant lorsque je survole les liens des sous menu avec la souris, le menu se replie au niveau de la pub, et cela uniquement sous ie...

A+
Marc
Modérateur
bonjour,

sans la page en ligne ou uniquement avec des extrait de code difficile de te repondre.

Ceci dit , essai de conferer le layout aux elements de ta page qui sont dans le flux (si ce n'est pas le cas pour tous ) , un truc simple est par exemple de rajouté : width:100%; a un element block qui occupe deja 100% de largeur , tu peut aussi essayé de ne donner que les dimension al'image , par exemple dans la balise elle même avec height="100" et width="100" , enfin avec les réelles valeurs de ton image.

L'ideal , est que tu nous donne l'ensemble du code qui met le bug en evidence :

le doctype , le js ,le css et le html raccourcie avec un menu simplifier et l'image en dessous qui pose probleme (on peut se faire un pavé dans paint pour reprendre les dimension de ton image).

En nous postant ici une page html raccourcie , mais qui met le bug en evidences , permettra de trouver solution et explications .

GC
Sujet clos
Aller à