18041 sujets

Questions générales et questions de débutants

Problème z-index (original ...)

Bonjour à toutes et à tous,

Je suis tout nouveau sur ce forum et j'espère apporter mon aide sur de petites choses si je le peux.
En attendant, j'espère que quelqu'un pourra apporter une réponse à mon problème...

Je travaille actuellement sur mon futur site (ce qui me permet de m'entrainer) j'ai voulu créer une petite galerie photo sur mon contenu gauche.

Seulement, au hover sur mes images, elles passent derrières mes li. Je suppose que j'ai un problème de z-index, mais impossible de comprendre ce qui ne va pas.

Peut être qu'un oeil neuf me sera utile ?

http://www.emmanuel-leprive.fr/2013/

(ne faites pas attention aux images, rien n'est réglé niveau taille et qualité ...)

Merci de votre aide,
et si je peux aider, je le ferai volontier !

Emmanuel.
Bonjour,

tu vas rien régler avec le z-index, enfin pas comme cela . c'est pas un bon plan de jouer avec les z-index de manière générale.

Tu utilises aussi des propriétés css3 qui ne sont pas comprises par IE9 et en dessous.

De même, les anciennes versions IE ne comprennent le hover que sur les liens.

Je te conseillerais de passer par du javascript ou du jquery pour ce que tu recherches.

sinon, tu as des position relative, qui servent à rien, et les images tu peux très bien les coller dans un div et pas dans une liste. Essai un peu simple, vite fait, entre la poire et le fromage :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHOTOGRAPHE MARIAGE CAEN - forfait noce : Emmanuel Le Privé, photographe professionnel de photos de mariage à Caen</title>
<link rel="stylesheet" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<META name='keywords' content='Photographe Mariage à Caen,Photographe Calvados,Photographe Normandie,Photographe Mariage Caen,Photographe Entreprise Caen,Photographe évènementiel Caen,Séance photo Caen,Photographe Professionnel,Calvados,Normandie, Photographe Immobilier,Portrait,Mise en valeur photos,Photographe Caen Bayeux Falaise Cherbourg Saint-Lô.'>
<META name='description' content='Photographe Mariage à Caen, Calvados et Normandie. Spécialiste dans la photo de mariage, entreprise, évènementiel et séance photo.'>
<META NAME='author' CONTENT='Emmanuel Le Privé'>



</head>
<body>
<div id="conteneur_super">
  
  <div id="conteneur">
    <!-- HAUT DU SITE -->
 
    <div id="contenugauche"> 
    <div id="menugauche">
    

<ul>
	    <li>Mariage</li>
            <li>Couple</li>
            <li> Mise en scène</li>
             <li> Jardin</li>
             <li>Couple</li>
            <li> Mise en scène</li>
             <li> Jardin</li>
    </ul>
    
    </div>
    
    <div id="thumbs">
	 <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
     <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
     <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
     <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
     <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
     <a href="#"><img src="images/hugo.jpg" width="100" height="78" /></a>
    </div>
    
       </div>
    
    <div id="contenudroit">
     <h1> Photographe de mariage à Caen</h1>
     <p> Ne ratez rien de ce jour unique, et faites confiance à un professionnel 
     
       <strong>Les photos sont le seul souvenir de ce jour unique </strong> </br>
          > Des forfaits adaptés selon vos envies et votre budget </br>
          > Un matériel professionnel pour une qualité irréprochable </br>
          <strong> > Des prises de vue originales, pour des photos uniques </strong> </br>
          > Nombre de prises de vue illimitées et retouches professionnelles </br>
          </br>
          <strong>Faites confiance à un professionnel, et vivez votre journée sans stresser </strong> 
     </p>
     
     <div id="forfait1">
     <div id="texteforfait1">
       <div class="titre">   <p><font color="#09F"> <strong> Forfait Cérémonie</strong></font> </p> </div>
       <p>  <font color="#FFF"> <strong> De la cérémonie jusqu'au début du vin d'honneur</strong></font></strong>
    </br> Je vous accompagne dès le début de la cérémonie, à la mairie ou à l'église jusqu'au début du vin d'honneur : 
 
      </div>
      </div>
      
       <div id="forfait1">
     <div id="texteforfait1">
       <div class="titre">   <p><font color="#09F"> <strong> Forfait Romance</strong></font> </p> </div>
       <p>  <font color="#FFF"> <strong> De la cérémonie jusqu'au début du vin d'honneur</strong></font></strong>
    </br> Je vous accompagne dès le début de la cérémonie, à la mairie ou à l'église jusqu'au début du vin d'honneur : 
 
      </div>
      </div>
      
      
       <div id="forfait1">
     <div id="texteforfait1">
       <div class="titre">   <p><font color="#09F"> <strong> Forfait Romance</strong></font> </p> </div>
       <p>  <font color="#FFF"> <strong> De la cérémonie jusqu'au début du vin d'honneur</strong></font></strong>
    </br> Je vous accompagne dès le début de la cérémonie, à la mairie ou à l'église jusqu'au début du vin d'honneur : 
 
      </div>
      </div>
      
      
      
      </div>
      
    
     
    
     </div> 
 


    </div>
  
    <!-- MILIEU DU SITE -->
    
    
     <!-- AddThis Button BEGIN -->
</div>
</div>
</body>
</html>




html, body {
	margin: 0;
	padding: 0;;
	padding:0;
	 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size:12px;
	color:#FFF;
	text-decoration:none;
		background-color:#FFF;
}




#conteneur_super{
	float:left;
	width: 100%;
	height:100%;
	background: none repeat scroll 0% 0% rgb(28, 28, 28);
	
}

#espace{
	width:995px;
	height:50px;
}

#conteneur{
	width: 995px;
height: 800px;
margin: 0px auto;
background: none repeat scroll 0% 0% rgb(28, 28, 28);
border-radius: 0px 10px;
}


#menugauche{
	width:270px;
	height:170px;
	margin:0;
	padding-top:15px;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
	color:rgb(28, 28, 28);
	border-bottom: 0.5px solid #333;
}

#menugauche:hover{
	width:270px;
	height:170px;
	margin:0;
	padding-top:15px;
	-webkit-transition: color .2s ease-in;
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    transition: color .2s ease-in;
	

	
}

ul li{
	
	list-style-type:none;
	color:#CCC;
	padding:0;
	margin:0;
	margin:5px;
	text-align:left;
    text-decoration:none;
    -webkit-transition: color .4s ease-in;
    -moz-transition: color .4s ease-in;
    -o-transition: color .4s ease-in;
    transition: color .4s ease-in;
}

ul li:hover{
	color:#FFF;
	list-style-type:none;
	padding:0;
	margin:0;
	margin:5px;
	text-align:left;
	border-left: 10px solid #C03;
	padding-left:5px;
		
}


#thumbs {
	list-style: none outside none; 
	margin: 0 auto; 
	padding: 0;
	width: 250px;
	height:400px;
	margin-top:30px;
	z-index:0;
}
 
#thumbs img{
	height: 78px;
	margin: 5px 5px 5px 5px;
	width: 100px;
	z-index: 1;
	border: none;
}
 
#thumbs img {
	z-index:1;
	transition: transform 0.25s ease-in-out;
	-moz-transition: -moz-transform 0.25s ease-in-out;
	-o-transition: -o-transform 0.25s ease-in-out;
	-webkit-transition: -webkit-transform 0.25s ease-in-out;
	transform: scale(1); 
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	opacity: 0.80;
}

#thumbs:hover img {
	opacity: 0.70; 
	z-index: 1;
}

#thumbs  img:hover {
    z-index:10;
	opacity: 1; 
	transform: scale(3); 
	-moz-transform: scale(3);
	-o-transform: scale(3);
	-webkit-transform: scale(3);
}


#contenugauche{
	width:270px;
	height:800px;
	background: -moz-linear-gradient(top, #000, rgb(28, 28, 28));
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
	float:left;
	position: relative;
}

#contenugauche:hover{
	width:270px;
	height:800px;
	background: -moz-linear-gradient(top, #131313, rgb(28, 28, 28));
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	float:left;
		  -webkit-transition: background .4s ease-in;
    -moz-transition: background .4s ease-in;
    -o-transition: background .4s ease-in;
    transition: background .4s ease-in;
	 -moz-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 -o-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 transition-timing-function:ease-in(0.42, 0), (1, 1);
}

#contenudroit{
	width:580px;
	height:680px;
	background: #131313;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	float:left;
	padding:20px 20px 20px 20px;
	transition: background 1.5s;
}



#contenudroit p{

	
	float:left;

	font-size:12px;
	text-align:left;
	transition: background 1.5s;
	background: transparent;
	color:#CCC;
}

#contenudroit p:hover{

	
	float:left;

	font-size:12px;
	text-align:left;
	transition: background 0s;
	color:#CCC;
}






#contenudroit:hover{
	width:580px;
	height:680px;
	background: none repeat scroll 0% 0% #191919;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	float:left;
padding:20px 20px 20px 20px;
		  -webkit-transition: background .4s ease-in;
    -moz-transition: background .4s ease-in;
    -o-transition: background .4s ease-in;
    transition: background .4s ease-in;
	 -moz-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 -o-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 transition-timing-function:ease-in(0.42, 0), (1, 1);
}

#forfait1{
	width:480px;
	height:120px;
	background: #131313;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	float:left;
	transition: background 1.5s;
	margin-top:30px;
	border-left: 10px solid#666;
	border-radius: 0px 0px 0px 20px;
}

#forfait1:hover{
	width:480px;
	height:120px;
	background: #131313;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
	float:left;
	transition: background 1.5s;
	margin-top:30px;
	border-left: 10px solid #333;
		  -webkit-transition: background .4s ease-in;
    -moz-transition: background .4s ease-in;
    -o-transition: background .4s ease-in;
    transition: background .4s ease-in;
	 -moz-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 -o-transition-timing-function:ease-in(0.42, 0), (1, 1);
	 transition-timing-function:ease-in(0.42, 0), (1, 1);
	 
}



.titre{
	width:450px;
	height:30px;
	 -webkit-transition: color .4s ease-in;
    -moz-transition: color .4s ease-in;
    -o-transition: color .4s ease-in;
    transition: color .4s ease-in;
	color:#CCC;
	text-transform:uppercase;
	float:left;
}





#texteforfait1{
	width:450px;
	height:110px;
	margin-left:10px;
	float:left;
	text-align:justify;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
}

	

#sautligne{
	width:605px;
	height:20px;
	float:left;
}

#carre{   
width:20px;
height:20px;
 -webkit-transition: background-color .4s ease-in;
    -moz-transition: background-color .4s ease-in;
    -o-transition: background-color .4s ease-in;
    transition: background-color .4s ease-in;
	background-color:#09F;
	border-radius: 2px 0px 10px 2px;
}

#carre:hover{    
-webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -o-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in;
	background-color: #131313;
}
	

h1{
	   width:500px;
	   margin: 0;
	padding: 0;;
	padding:0;
	 font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size:26px;
	    -webkit-transition: color .4s ease-in;
    -moz-transition: color .4s ease-in;
    -o-transition: color .4s ease-in;
    transition: color .4s ease-in;
	color:#CCC;
	text-transform:uppercase;
	
}

h1:hover{
	color:rgb(28, 28, 28);
	    -webkit-transition: color .2s ease-in;
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    transition: color .2s ease-in;
	color:#09F;
}


/* 	border:1px solid #0C6;
background: -moz-linear-gradient(top, #333, #272727);

Modifié par FloydinBremen (21 Jul 2012 - 12:37)
Sujet clos
Aller à