28172 sujets

CSS et mise en forme, CSS3

Superposition Image/Div

Bonjour,

Je ne parvient pas à faire passer une division (qui apparait lors du survol d'une image) au dessus des images en dessous. J'ai utilisé z-index mais rien n'y fait, ma division passe toujours au dessous de l'image du dessous.

Parce que les images parlent mieux :
http://www.easy-upload.net/fichier.php?fichier=2008715153946

Code :
Style de la division :
background-color:#FEF6B2;
border:1px solid #A80231;
font-size:10px;
left:0px;
opacity:0.9;
padding:5px;
position:absolute;
text-align:justify;
top:120px;
width:140px;
z-index:auto;

Division englobant Image/Titre
display:block;
position:relative;
z-index:1;


Merci beaucoup de votre aide. Smiley cligne
Pourquoi ne mets-tu pas un z-index: 1000 à ta div.

z-index: auto affectera à ta div le z-index de son parent.

Mais pas facile de répondre sans le code HTML
Ah oui mince j'ai oublié de préciser que j'avais testé avec 1000 et + ^^

Voici un peu d'HTML :
Tableau supérieur : (image sur laquel la div est placé)
<tbody><tr>
							<td valign="" align="center">
								<div style="display: block; position: relative; z-index: 1;" class="listing_act">
									<div style="" class="overDiv" id="view_4">
										<ul>
										<li><a title="Colonnes" href="produit.php?ref_ss_cat=10">Colonnes</a></li><li><a title="Balustres" href="produit.php?ref_ss_cat=11">Balustres</a></li><li><a title="Pilastres" href="produit.php?ref_ss_cat=12">Pilastres</a></li><li><a title="Piédestaux" href="produit.php?ref_ss_cat=35">Piédestaux</a></li><li><a title="Chapiteaux" href="produit.php?ref_ss_cat=36">Chapiteaux</a></li>										</ul>
									</div>
									<h3>COLONNES</h3>
																			<img onmouseover="view('view_4');" style="border: 1px solid rgb(92, 10, 33);" alt="" src="miniature_cat.php?pic=upload/colonnes pilastres.jpg"/>
																	</div>
								<!--
									<h3>COLONNES</h3>
																			<img src="miniature_cat.php?pic=upload/colonnes pilastres.jpg" alt="" style="border:1px solid #5C0A21;" onmouseover="return overlib('<ul></ul>', STICKY, MOUSEOFF);" onmouseout="return nd();" />
																	-->
							</td>
						</tr>
					</tbody>

Tableau inférieur : (Image du dessous, sur laquel la div ne passe malheureusement pas Smiley decu )
<table width="100%" cellspacing="0" cellpadding="0" style="cursor: pointer;" onclick="javascript: document.location.href='produit.php?ref_cat=11';">
						<tbody><tr>
							<td valign="" align="center">
								<div style="display: block; position: relative; z-index: 1;" class="listing_act">
									<div style="" class="overDiv" id="view_9">
										<ul>
										<li><a title="Caissons de plafond" href="produit.php?ref_ss_cat=33">Caissons de plafond</a></li><li><a title="Hottes de cheminée" href="produit.php?ref_ss_cat=47">Hottes de cheminée</a></li><li><a title="Plafonds - Cloisons - Plaques" href="produit.php?ref_ss_cat=48">Plafonds - Cloisons - Plaques</a></li><li><a title="Fabrications sur mesure" href="produit.php?ref_ss_cat=50">Fabrications sur mesure</a></li>										</ul>
									</div>
									<h3>PRODUITS TECHNIQUES</h3>
																			<img onmouseover="view('view_9');" style="border: 1px solid rgb(92, 10, 33);" alt="" src="miniature_cat.php?pic=upload/produits techniques.jpg"/>
																	</div>
								<!--
									<h3>PRODUITS TECHNIQUES</h3>
																			<img src="miniature_cat.php?pic=upload/produits techniques.jpg" alt="" style="border:1px solid #5C0A21;" onmouseover="return overlib('<ul></ul>', STICKY, MOUSEOFF);" onmouseout="return nd();" />
																	-->
							</td>
						</tr>
					</tbody></table>


Merci.
Alors si j'interprete bien ton script, tu appelle la div view_9 au survol de l'image.

Est-ce que le code que tu as donné dans ton premier post correspond à la class overDiv ?

Sinon, essai un truc bête. Mettre le code HTML de ta div après celui de l'image qui active l'effet au survol.
trigun a écrit :
Est-ce que le code que tu as donné dans ton premier post correspond à la class overDiv ?

Exactement Smiley smile
trigun a écrit :

Sinon, essai un truc bête. Mettre le code HTML de ta div après celui de l'image qui active l'effet au survol.

Le div passe bien par dessus l'image même. Mais pas par dessus l'image situé au dessous. (Donc pas vraiment de références)

;)
Je pense qu'il ne faudrait pas que tu déclares les div parentes de tes view_X en position: relative. C'est ça qui pose problème dans ta superposition. Essais d'enlever le position:relative et le z-index:1. Et mets z-index:1000 à ton overDIv
En virant le relative ma div (qui s'affiche au survol) se retrouve en haut de l'écran :S

EDIT : merci de ton aide.
Modifié par M@x (15 Jul 2008 - 17:09)
Autant pour moi, j'aurai du y penser.

Essais un position:relative sur tes images avec un z-index:0.
Je crois avoir trouvé une solution, bien qu'elle ne soit pas très élégante.

Tu as 10 blocs, en gros chaque bloc de class=listing_act contient une div qui doit aparaitre au survol et une image qui active le survol. Il faut que tu affectes à chaque div listing_act un z-index inférieur à la précédente. Comme tu as 10 div, du commence à z-index:10, puis z-index:9 ...

Ce n'est pas élégant je le répéte. A réfléchir pour voir si je trouves une meilleure solution.

***** EDIT ****
J'ai trouvé (je crois). Ta class listing_act à un z-index: 1100. Enlève le et ça fonctionne (du moins sur Firefox)
**************
Modifié par trigun (15 Jul 2008 - 17:40)
Problème: je suis soit sous linux, soit sous mac, donc pour t'aider sur IE ça va être dur.

Décris moi ton problème sur IE, est-ce toujours le même ?
Exactement le même soucis : à savoir la div passe dernière le td du dessous. (MAJ de l'url que je t'ai envoyé)

Merci bien de ton aide.
Sujet clos
Aller à