28172 sujets

CSS et mise en forme, CSS3

[Résolu] Valeur Absolute ne marche avec Chrome

Bonjour,

Ceci est mon premier message sur ce forum si je ne respecte les règles d'usage n'hésitez pas, une relation qui commence bien sera une relation qui va durer Smiley lol

Donc,

J'ai une série de photo dans la 3ème colonne de mon site. l'idée est que uniquement en html et CSS je dois faire en sorte qu'une image apparaisse en infobulle lors du survole de la petite image.

Sur FF aucun soucis ça marche très bien mais chrome m'embête. Il ne veut pas faire déborder l'image sur la colonne principale où se trouve mon article.

Je vais vous mettre le code pour une seule photo histoire d'alléger au maximum mon post.

Voici le HTML

<a id="survol1" href=""><img src="images/chambredtrp.jpg" alt="chambre triple" title="chambre triple"><span><img src="images/photohd/hdchambretrp2.jpg" alt="chambre triple" title="chambre triple"></span></a>


Voici le CSS qui va avec : 
#survol1{
	text-decoration:none;
	position:relative;
	display:block;
	margin:30px 0 20px 15px;
}
#survol1 span{
	display:none;
	border-radius:6px;
	color:black;
	background:white; 
}
#survol1 span img{
	float:left;
}
#survol1:hover span{
	display:block;
	position:absolute;
	top:-150;
	left:-500;
	z-index:996;
	width:auto;
}


Voici le rendu qui me va très bien sur FF
upload/60444-FF.jpg

Voici le résultat sur Chrome (image qui reste bloquée dans la 3ème colonne)
upload/60444-chrome.jpg

2 jours que je fouille les méandres du web et je ne trouve pas !!!!!
Pour info je n'ai pas le droit d'utiliser de js.

Merci d'avance

Laurent
Modifié par Soxy95 (15 Nov 2015 - 14:26)
Bonjour et bienvenue sur le forum,

Si tu n'as pas besoin que l'infobulle s'affiche à côté du lien, essaie de jouer avec un position:fixed, plutôt qu'absolute.

Pour t'aider un peu plus il nous faudrait l'architecture global de ta page, et surtout le CSS de ton parent (de ta "troisième colonne"), parce que j'imagine qu'il y a un overflow:hidden quelque-part.
Merci de ton intervention.
En effet je te confirme que l'image dans l'infobulle doit rester à coté de la petite image.

Voici le CSS de la structure de ma page : 
#content{
	width: 980px;
	min-height: 500px; /* hauteur variable donc A SUPPRIMER */
	margin-left: auto;
	margin-right: auto;
	margin-top: 4%;
}
header{
	height: 150px;
}
#principale{
	min-height: 420px; /* hauteur variable donc A SUPPRIMER */
}
aside{
	width: 190px;
	min-height: 420px; /* hauteur variable donc A SUPPRIMER */
	float: left;
}

footer{
	height: 30px;
	clear: left;
}
main{
	overflow:hidden;
	width: 780px;
	min-height: 420px; /* hauteur variable donc A SUPPRIMER */
	float : left;
}
#col2a{
	width: 500px;
	min-height: 420px; /* hauteur variable donc A SUPPRIMER */
	float : left;
	/*padding-left:10px;*/
	/*padding-right:10px;*/ /*supprimer afin que les onglets collent le menu*/
	overflow:hidden;
}

#col2b{
	width: 268px;
	margin-top:125px;
	min-height: 420px; /* hauteur variable donc A SUPPRIMER */
	float : left;
}


Le morceau correspondant à la 3ème colonne est le #col2b
Je n'ai que ces photos dans ma 3ème colonne 3 photos les unes au-dessus et quand on les survole l'infobulle doit apparaître.

Le HTML complet pour ces 4 photos est 

<div id="col2b"><!-- début col 3 -->

<a id="survol1" href=""><img src="images/chambredtrp.jpg" alt="chambre triple" title="chambre triple"><span><img src="images/photohd/hdchambretrp2.jpg" alt="chambre triple" title="chambre triple"></span></a>

<a id="survol2" href=""><img src="images/chambredble.jpg" alt="chambre double" title="chambre double"><span><img src="images/photohd/hdchambredble2.jpg" alt="chambre double" title="chambre double"></span></a>

<a id="survol3" href=""><img src="images/chambrefam.jpg" alt="chambre familiale" title="chambre familiale"><span><img src="images/photohd/hdchambrefam2.jpg" alt="chambre familiale" title="chambre familiale"></span></a>

<a id="survol4" href=""><img src="images/chambrespl.jpg" alt="chambre simple" title="chambre simple"><span><img src="images/photohd/hdchambrespl2.jpg" alt="chambre simple" title="chambre simple">></span></a>
				</div><!-- fin col 3 -->


Et le CSS complet (avec les 4 photos) 

/* ------------------------------------------------------------------------
Début mise en forme survol photos chambre
-------------------------------------------------------------------------*/
#survol1{
	text-decoration:none;
	position:relative;
	display:block;
	margin:30px 0 20px 15px;
}
#survol1 span{
	display:none;
	border-radius:6px;
	color:black;
	background:white; 
}
#survol1 span img{
	float:left;
}
#survol1:hover span{
	display:block;
	position:absolute;
	top:-150;
	left:-500;
	z-index:996;
	width:auto;
}
#survol2{
	text-decoration:none;
	position:relative;
	display:block;
	margin-top:30px;
	margin-bottom:20px;
	margin:30px 0 20px 15px;
}
#survol2 span{
	display:none;
	border-radius:6px;
	color:black;
	background:white; 
}
#survol2 span img{
	float:left;
}
#survol2:hover span{
	display:block;
	position:absolute;
	top:-300;
	left:-500;
	z-index:997;
	width:auto;
	max-width:600px;
	min-height:128px;  
}
#survol3{
	text-decoration:none;
	position:relative;
  	display:block;
	margin:30px 0 20px 15px;
}
#survol3 span{
  display:none;
  border-radius:6px;
  color:black;
  background:white; 
}
#survol3 span img{
  float:left;
}
#survol3:hover span{
	display:block;
	position:absolute;
	top:-300;
	left:-500;
	z-index:998;
	width:auto;
	max-width:600px;
	min-height:128px;  
}
#survol4{
	text-decoration:none;
	position:relative;
	display:block;
	margin:35px 0 20px 15px;
}
#survol4 span{
  display:none;
  border-radius:6px;
  color:black;
  background:white; 
}
#survol4 span img{
  float:left;
}
#survol4:hover span{
	display:block;
	position:absolute;
	top:-300;
	left:-500;
	z-index:999;
	width:auto;
	max-width:600px;
	min-height:128px;  
}
/* ------------------------------------------------------------------------
fin mise en forme survol photos chambre
-------------------------------------------------------------------------*/


(J'avais peur que ce soit indigeste si je mettais tout !!!!)
Et peut-être à tort mais je n'ai pas de overflow:hidden qui se cahe.

Et un aperçu global de la page :
upload/60444-pagechambr.JPG
Bonjour,

J'ai trouvé.
La solution était l'attribut transform
Le HTML 

<a class="survol" href=""><img class="survolphoto" src="images/chambredtrp.jpg" alt="chambre triple" title="chambre triple"></a>


Le CSS
.survolphoto{
	margin-top:35px;
	display:block;
	width:250px;
	height:auto;
}
.survol:hover img{
	-moz-transform-origin:center right;
	-webkit-transform-origin:center right;
	-o-transform-origin:center right;
	transform-origin:center right;
	-moz-transform:scale(2);
	-webkit-transform:scale(2);
	-o-transform:scale(2);
	transform:scale(2);
}


Le résultat
Avant survol
upload/60444-Capture11.JPG

Pendant le survol
upload/60444-Capture12.JPG

Voilà problème résolu Smiley lol
Bonjour,
Soxy95 a écrit :

J'ai trouvé.
La solution était l'attribut transform

Normalement, ça te crée juste une animation, mais ce n'est pas ça qui a dû arranger ton histoire de débordement qui ne se faisait pas...
Sujet clos
Aller à