5568 sujets

Sémantique web et HTML

[Résolu] Hover image ne fonctionne pas sur tout

Bonjour à tous,
Je suis graphiste et ne suis pas développeur, donc vous demande de l'indulgence...
Pour une page web, je chercher à mettre en place en html du hover, au passage de la souris, un bloc texte s'affiche au dessus d'une image.
Ce code fonctionne parfaitement pour 2 images sur 3.
je ne comprends pas pourquoi il ne s'applique pas à mon 1er bloc image, mais aux 2 suivants.
Merci à tous pour votre aide !


<style>
a {
	text-decoration:none;
}

p#Home {
	   margin:2px;
}

img#Home {
	height:220px;
	width:220px;
}

 .texte_image {  /* texte sur l'image */ 
    background: #2d3570;
    color: #ffffff;
    font-size: 24pt;
    opacity: 0;
	height:220px;
	width:220px;
}
.texte_image:hover {    /* survol texte */
    opacity: 0.5;
}
 .conteneur_ext {
 	width:220px;
	height:220px;
	float:left;
	margin-left:10px; margin-bottom:10px;
	position: relative;
	border: 1px solid #dcb ;
}
</style>

<p id="Home" style="margin-top:15px;">
    <a href="objet1.html" target="_blank"><div class="conteneur_ext" style="background:url(images/1.png);"><div class="texte_image"><br />Etole - Paisley : Taj Mahal,<br />L. 166 cm</div></div></a>
    <a href="objet2.html" target="_blank"><div class="conteneur_ext" style="background:url(images/2.png);"><div class="texte_image"><br />Etole / Paréo - Monet : Nymphéas,<br />L. 175 cm</div></div></a>
    <a href="objet3.html" target="_blank"><div class="conteneur_ext" style="background:url(images/3.png);"><div class="texte_image"><br />Etole / Paréo - Renoir : Fleurs du Bonheur,<br />L. 175 cm </div></div></a>
</p>
Salut,
La balise p est faite pour du texte (paragraphe). Remplace par un <div>, et tout devrait bien se passer Smiley smile
Petite remarque: fais plutôt ton style dans un fichier CSS à part, ce sera beaucoup plus facile pour s'y retrouver et utiliser le même style sur plusieurs pages.
Également, évite d'utiliser les ID pour le style car comme un ID doit être unique sur une page ça pourrait te poser des soucis... Il vaut donc mieux utiliser class="Home"
Bonjour Mathieu,
Merci pour ton retour et tes remarques, tu viens de me retirer un mal de crâne !
j'ai bien le CSS à part, j'ai tout regroupé là uniquement pour l'exemple.
Je prends note pour les class et Id.
Encore merci
Bonne journée,
Sujet clos
Aller à