Faire passer des img Css devant des img xHtml

Question

Seldoon182

23 Sep 2008 à 12:50

Bonjour,

Je sais que le titre n'est pas si explicite que ça, laissez-moi développer:

Je suis entrain de créer un layout pour le site d'un ami qui souhaiterais conseiller en ligne sur le matériel informatique. C'est un projet qu'il à en tête depuis pas mal de temps et je me suis donc investis dans la création de la façade graphique du site web. Ayant quelques connaissances dans la mise en page en Css, je construis le kit graphique petit à petit et je bloque sur mon menu...

Je souhaiterais faire passer mes images (appelées par xHtml) en second plan lorsque le Hover de mes liens (qui appelles des img par Css) s'active!

Voici ce que j'obtiens pour le moment... (Je développe sur FF 2.x)

- J'ai tenté plusieurs solutions comme l'appel des z-index, mais rien n'y fait cela ne fonctionne pas (ce que je supposais mais bon qui ne tente rien à rien n'a rien...).

Cordialement Alex.

Ps:

Code xHtml correspondant:

<div class="menu-side">
			<img src="images/menu/menu_left.jpg" alt="" class="img-left" />
			<img src="images/menu/menu_right.jpg" alt="" class="img-right" />
			
			<ul id="menu-inside" class="menu-inside">
				<li><a class="menu-home" href="" target="_self"><img src="images/menu/menu_home.png" alt="" width="40" height="13" /></a></li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li><a class="menu-hardware" href="" target="_self"><img src="images/menu/menu_hardware.png" alt="" width="67" height="13" /></a>
					<ul style="width:150px;">
						<li><a href="" title="Processeur" target="_self" >Processeur</a></li>
						<li><a href="" title="Carte Mère" target="_self" >Carte Mère</a></li>
						<li><a href="" title="Mémoire" target="_self" >Mémoire</a></li>
						<li><a href="" title="Carte Graphique" target="_self" >Carte Graphique</a></li>
						<li><a href="" title="Lecteur Optic" target="_self" >Lecteur Optic</a></li>
						<li><a href="" title="Alimentation" target="_self" >Alimentation</a></li>
						<li><a href="" title="Boitier" target="_self" >Boitier</a></li>
						<li><a href="" title="Ecran" target="_self" >Ecran</a></li>
					</ul>
				</li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li><a class="menu-software" href="" target="_self"><img src="images/menu/menu_software.png" alt="" width="62" height="13" /></a>
					<ul style="width:150px;">
						<li><a href="" title="3DMark 06" target="_self" >3DMark 06</a></li>
						<li><a href="" title="CPU-Z" target="_self" >CPU-Z</a></li>
						<li><a href="" title="Autre..." target="_self" >Autre...</a></li>
					</ul>
				</li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li><a class="menu-drivers" href="" target="_self"><img src="images/menu/menu_drivers.png" alt="" width="49" height="13" /></a>
					<ul style="width:150px;">
						<li><a href="" title="Ati" target="_self" >Ati</a></li>
						<li><a href="" title="Nvidia" target="_self" >Nvidia</a></li>
						<li><a href="" title="Autre..." target="_self" >Autre...</a></li>
					</ul>
				</li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li><a class="menu-articles" href="" target="_self"><img src="images/menu/menu_articles.png" alt="" width="51" height="13" /></a></li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li><a class="menu-links" href="" target="_self"><img src="images/menu/menu_links.png" alt="" width="35" height="13" /></a>
					<ul style="width:150px;">
						<li><a href="" title="M@tbe" target="_self" >M@tbe</a></li>
						<li><a href="" title="Generation-NT" target="_self" >Generation-NT</a></li>
						<li><a href="" title="Hardware.fr" target="_self" >Hardware.fr</a></li>
						<li><a href="" title="Tom's Hardware" target="_self" >Tom's Hardware</a></li>
						<li><a href="" title="Clubic" target="_self" >Clubic</a></li>
						
					</ul>
				</li>
				<li><span class="divider divider-vertical" ></span></li>
				
				<li class="clear"> </li>
			</ul>
		</div>

Code Css correspondant:

/*MENU*/
.menu-side {
	margin-left: auto;
	margin-right: auto;
	width: 792px;
	}

.menu-side {
	background: #a13232;
	height: 30px;
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_background.jpg");
	}
	
.menu-side img {
	border: none;
	text-decoration: none;
	}
	
.img-left {
	float: left;
	}
	
.img-right {
	float: right;
	}
	
.menu-inside .divider {
	display: block;
	font-size: 1px;
	border-width: 0px;
	border-style: solid;
	}

.menu-inside .divider-vertical {
	float: left;
	width: 0px;
	display: none;
	}
	
.menu-inside .menu-secondary-title {
	display: block;
	cursor: default;
	white-space: nowrap;
	}
	
.clear {
	font-size: 1px;
	height: 0px;
	width: 0px;
	clear: left;
	line-height: 0px;
	display: block;
	float: none;
	}
	
.menu-inside {
	position: relative;
	zoom: 1;
	margin: 0 auto;
	}
	
.menu-inside a, .menu-inside li {
	float: left;
	display: block;
	white-space: nowrap;
	}
	
.menu-inside div a, .menu-inside ul a, .menu-inside ul li {
	float: none;
	}
	
.menu-inside ul {
	left: -10000px;
	position: absolute;
	}
	
.menu-inside, .menu-inside ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	}
	
.menu-inside li a {
	float: none
	}
	
.menu-inside li {
	position: relative;
	}
	
.menu-inside ul {
	z-index: 10;
	}

.menu-inside ul ul {
	z-index: 20;
	}
	
.menu-inside ul ul ul {
	z-index: 30;
	}
	
.menu-inside ul ul ul ul {
	z-index: 40;
	}
	
.menu-inside ul ul ul ul ul {
	z-index: 50;
	}
	
li:hover>ul {
	left: auto;
	}
	
#menu-inside ul {
	top: 100%;
	}
	
#menu-inside ul li:hover>ul {
	top: 0px;
	left: 100%;
	}

/*MENU PRIMARY*/	
#menu-inside a {	
	padding: 7px 8px 7px 18px;
	color: #ffffff;
	font-family: Verdana, Arial, sans-serif, Helvetica;
	font-size: 14px;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: top;
	}
	
/*MENU PRIMARY HOME*/
#menu-inside a:hover.menu-home {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_home_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU PRIMARY HARDWARE*/
#menu-inside a:hover.menu-hardware {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_hardware_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU PRIMARY SOFTWARE*/
#menu-inside a:hover.menu-software {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_software_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU PRIMARY DRIVERS*/
#menu-inside a:hover.menu-drivers {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_drivers_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU PRIMARY ARTICLES*/
#menu-inside a:hover.menu-articles {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_articles_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU PRIMARY LINKS*/
#menu-inside a:hover.menu-links {
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_links_hover.png");
	background-repeat: no-repeat;
	background-position: 18px 8px;
}

/*MENU SECONDARY  CONTAINER*/	
#menu-inside div, #menu-inside ul {	
	padding: 10px 4px 8px 4px;
	margin: -3px 0px 0px 0px;
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_inside_secondary.jpg");
	background-repeat: repeat-x;
	background-color: #d2d2d2;
	border-bottom: 1px solid #afafaf;
	}

/*MENU SECONDARY*/	
#menu-inside div a, #menu-inside ul a {	
	padding: 3px 10px 3px 6px;
	background-color: #ffffff;
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_background_secondary.jpg");
	background-repeat: no-repeat;
	background-position: 0px 22px;
	font-size: 11px;
	border-width: 0px;
	border-style: none;
	margin: 0px 0px 0px 0px;
	width: 149px;
	}

/*MENU SECONDARY HOVER*/	
#menu-inside div a:hover, #menu-inside ul a:hover {	
	background-color: #ffffff;
	background: url("http://seldoon182.free.fr/cyberconfig/images/menu/menu_background_secondary.jpg");
	background-repeat: no-repeat;
	color:#cc0000;
	}

/*MENU SECONDARY TITLES*/	
#menu-inside .menu-secondary-title {	
	cursor: default;
	padding: 4px 0px 3px 7px;
	color: #6c3600;
	font-family: Verdana, Trebuchet MS, Arial, sans-serif, Helvetica;
	font-size: 11px;
	/* background: url("http://seldoon182.free.fr/cyberconfig/images/menu/item-secondary-title-bg.jpg); */
	background-repeat: no-repeat;
	font-weight: bold;
	}

/*HORIZONTAL DIVIDERS*/	
#menu-inside .divider-horizontal {	
	border-top-width: 1px;
	margin: 5px 5px;
	border-color: #c16100;
	}

/*VERTICAL DIVIDERS*/	
#menu-inside .divider-vertical {	
	border-left-width: 1px;
	height: 15px;
	margin: 4px 2px 0px 2px;
	border-color: #aaaaaa;
	}

Modifié par Seldoon182 (23 Sep 2008 - 13:07)

Benjamin D.C.

23 Sep 2008 à 14:16

Bonjour,

Penses-tu qu'il soit possible de simplifier un peu le code proposé? En l'état, c'est particulièrement effrayant (long, mélange de styles embarqués et externes, ...) et je doute que tu trouves quelqu'un d'assez courageux pour s'y plonger… Smiley ohwell

Seldoon182

23 Sep 2008 à 14:54

Salut Benjamin D.C. et merci de ta réponse qui me confirme bien que mon problème est plus grave que je ne le pensais. J'avais songé à ré-écrire un nouveau code pour le menu afin de faire aussi appel au img de lien avec le Css plutôt que de passer par xHtml... Mais trop long... :x

Je suis désolé, mais je ne vois pas comment je pourrais simplifier mon code, alors je ne sais pas si ta demande sera possible. Ma demande d'aide est focalisé sur le fait des img Css/xHtml, mais je savais bien qu'en postant ici (avec des gens plus expert que moi) je me ferais gentillement critiquer. (Il faut bien pour évoluer! ^^)

- Parallèlement, sans se plonger dans mon code, quelqu'un connait-il le moyen de faire passé une image appelée par Css par dessus une image appelé par xHtml !?
Modifié par Seldoon182 (23 Sep 2008 - 14:54)

fvsch

23 Sep 2008 à 16:41

Seldoon182 a écrit :
- Parallèlement, sans se plonger dans mon code, quelqu'un connait-il le moyen de faire passé une image appelée par Css par dessus une image appelé par xHtml !?

Non, un arrière-plan en CSS (propriété background) ne peut pas passer au premier plan d'un élément, devant son contenu. Ce qui est plutôt logique, tu en conviendras.

Par contre, tu peux faire passer un élément HTML vide par-dessus ton image, en utilisant le positionnement absolu par exemple. Tu peux alors placer une image de fond à cet élément vide superposé à l'image.

Pour un effet de «masque» appliqué au survol d'une image dans un lien, ça peut fonctionner ainsi:

<a href="..." class="machin">
	<span></span>
	<img src="..." alt="..." />
</a>

.machin {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
}
.machin img {
	display: block;
}
.machin span {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(mon-masque.png) no-repeat;
}
.machin:hover span,
.machin:focus span {
	display: block;
}

Sujet clos

CSS et mise en forme, CSS3

Faire passer des img Css devant des img xHtml