28172 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de décalage vertical d'images-liens en png (firefox)

Bonjour.
Je m'arrache les cheveux sur un pb de décalage d'image-lien sous firefox.
J'ai créé des images en png (transparence oblige) pour certains liens, sous firefox ces images sont décalées vers le bas de 2px. Sous Chrome par exemple je ne retrouve pas ce décalage.
Voilà mon code css :
	body {
		background-color: #FFF;
		background-image:url(images/photo/fond_photo.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover; 
		margin: 0px;
	}

	#contain {
		position: relative;
		width: 900px;
		height: 860px;
		margin:	0px auto;
	}

	#butdown {
		position: absolute;
		width: 100px;
		height: 14px;
		top: 697px;
		left: 13px;
		display: block;
	}

et en html :
<body>

<div id="contain">

<div id="butdown">		
	<a href="diapo_simple_details2.html#details11">
	<span style="cursor: pointer;">
	<img src="design/butdownout.png" alt="Buttondown" name="Buttondown"
	onmouseover="Buttondown.src='design/butdownon.png'"
	onmouseout="Buttondown.src='design/butdownout.png'" />
	</span></a>     
</div>


sous firefox, mon petit bouton ascenseur "butdown" se positionne en top: 699px

Je remarque que ce pb ne survient qu'avec des liens sur des images enregistrées en png.
Quelqu'un aurait-il la solution ?
Merci d'avance, je n'ai plus bcp de cheveux Smiley sweatdrop
Modifié par Lich (10 Mar 2014 - 17:31)
Bonjour,

Le mieux ce serait de fournir une page de test en ligne, afin que nous ayons accès à l'ensemble de votre code et à vos images.
Le "problème" peut découler de nombreuses choses (marge par défaut, interaction avec un autre élément, interaction CSS, ou venir de l'image elle même, ...)

À vous lire.
Bonjour 6/20.
Merci pour la réponse.

Mon site est en construction et n'est donc pas encore en ligne.
Comment pourrais-je faire pour publier une page test ?

Pour le code complet, je l'ai réduit au maximum pour mieux y voir et le pb persiste.
Voilà où j'en suis :

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Charlie Cerisier</title>
<link rel="shortcut icon" href ="design/favicherry.png" />

<style>

	body {
		background-color: #FFF;
		background-image:url(images/photo/fond_photo.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover; 
		margin: 0px;
	}

	#contain {
		position: relative;
		width: 900px;
		height: 860px;
		margin:	0px auto;
	}

	#butdown {
		position: absolute;
		width: 100px;
		height: 14px;
		top: 697px;
		left: 13px;
		display: block;
	}

 	#P {
		position: absolute;
		top: 761px;
		left: 127px;
		display: block;
	}

	#P3 {
		position: absolute;
		top: 761px;
		left: 194px;
		display: block;
	}

	#P31 {
		position: absolute;
		top: 762px;
		left: 285px;
		display: block;
	}

	#LogoHome {
		position: absolute;
		width: 50px;
		top: 744px;
		left: 37px;
		display:block;
	}	

	a img {
		border: none;
	}

</style>

</head>



<body>

<div id="contain">


<!--  Ascenceur   -->

<div id="butdown">		
	<a href="retouche_beaute_portrait2.html#portrait11">
	<span style="cursor: pointer;">
	<img src="design/butdownout.png" alt="Buttondown" name="Buttondown"
	onmouseover="Buttondown.src='design/butdownon.png'"
	onmouseout="Buttondown.src='design/butdownout.png'" />
	</span></a>     
</div>

<!--   Menu Principal Liste   -->

<div id="P">
	<a href="photo.html">
    <span style="cursor:pointer;">
	<img src="design/menu/menuPa.png" alt="P" name="P"
    onmouseover="P.src='design/menu/menuPb.png'"
    onmouseout="P.src='design/menu/menuPa.png'" />
    </span></a>
</div>

<div id="P3">
	<a href="retouche.html">
    <span style="cursor:pointer;">
	<img src="design/menu/menuP3a.png" alt="P3" name="P3"
    onmouseover="P3.src='design/menu/menuP3b.png'"
    onmouseout="P3.src='design/menu/menuP3a.png'" />
    </span></a>
</div>

<div id="P31">
	<img src="design/menu/menuP31c.png" alt="P31" />
</div>


<!--  Menu Home   -->

<div id="LogoHome">
	<a href="index.html">
	<span style="cursor:url(design/curscherry.png),pointer;">
	<img src="images/home/cherrylogoV.jpg" alt="Logo" name="Logo"
	onmouseover="Logo.src='images/home/cherrylogoR.jpg'"
	onmouseout="Logo.src='images/home/cherrylogoV.jpg'" />
	</span></a>
</div>

</div>

</body>

</html>


Les images des liens sont enregistrées en png24 pour la transparence.

...c'est très troublant en tout cas.
Modifié par Lich (10 Mar 2014 - 19:25)
Bonjour

Les images ont tendance à générer un espace blanc.

A l'occasion essaie de mettre la règle css suivante pour voir si ça peut résoudre le problème :

#butdown img{
display: block;
}


Sinon pourquoi avoir mis un span dans le a ? J'en vois pas trop l'utilité.

Pour #butdown, le display:block n'est pas nécessaire logiquement pusique c'est le comportement normal d'un div.
Ok, merci lefou ça marche mieux comme ça.
Les images en png assimilées à un lien généreraient un espace blanc sous Firefox...

Je généralise même complètement ma mise en page avec un
img{
display: block;
}

Apparemment ça règle le pb.

Pour le span c'est que je modifie l'apparence de mon curseur au survol d'un des liens.
Du coup, quelquefois le pointer passait en "arrow" sur d'autre liens.
Je vais mieux m'occuper de ça maintenant que le pb du décalage est réglé.

Merci encore.
Désolé, j'arrive après coup Smiley ravi
Pour présenter du code :
Dabblet, jsFiddle, jsBin et CodePen pour citer les plus célèbres.
Une page simple sur le serveur qui va héberger ton site, un espace personnel fourni par ton fournisseur d'accès internet...

Concernant "l'espace sous les images", l'explication fournie par Florent V. sur cette astuce.

Effectivement, il doit y avoir moyen de faire mieux au niveau du code (et de l'accessibilité...), tu as vraiment besoin de ces positionnements absolus ?
Bon courage pour la suite Smiley cligne
Rebonjour 6/20.

Ok pour l'astuce, je vais de ce pas insérer ce petit code pour mes images.

Pour les positionnements, je suis un novice (5j de formation css/html en tout, le reste en autodidacte).
Je suis amené à modifier mes éléments régulièrement et le positionnement absolute est le seul moyen que j'ai trouvé pour que tout ne se déplace pas dans ma page au moindre changement.
C'est un peu laborieux j'avoue, mais ça fonctionne... pour le moment.

Encore merci à vous 2 pour votre aide.
Lich a écrit :
Rebonjour 6/20.
Pour les positionnements, je suis un novice (5j de formation css/html en tout, le reste en autodidacte).
Je suis amené à modifier mes éléments régulièrement et le positionnement absolute est le seul moyen que j'ai trouvé pour que tout ne se déplace pas dans ma page au moindre changement.
C'est un peu laborieux j'avoue, mais ça fonctionne... pour le moment.
Encore merci à vous 2 pour votre aide.

Bonjour,

C'est une erreur que nous avons probablement tous faite un jour, mais il y a fort à parier que cela te posera plus de problèmes que de satisfactions à mesure que tu avanceras dans ton apprentissage Smiley cligne

Florent V. a également commis ce petit guide (cf les liens associés) qui me semble être un bon point de départ pour se familiariser avec le positionnement CSS :
Guide de survie du positionnement CSS

Bonne continuation Smiley cligne
Ravi d'avoir pu t'aider.

Sinon je rejoins le point de vue de 6l20 sur le positionnement absolu. Il est vrai que des fois on n'a pas le choix mais quand on peut éviter vaut mieux car ça peut vite devenir une grosse prise de tête par la suite si modifications.
En fait la généralisation n'est pas une si bonne idée.
img{
display: block;
}

est devenu
a img{
display: block;
}

et j'ai dû créer quelques class pour 1 ou 2 cas isolés.
Mais ça avance Smiley biggrin


Je vais me pencher sur la question du positionnement à l'avenir.
Là, je dois ouvrir mon site pour le printemps. Je suis revenu bien trop souvent sur toutes mes pages et je commence vraiment à être charrette. Je plie les premier modules comme ça pour l'ouverture et pour la suite je revois ma stratégie Smiley ohwell .
Sujet clos
Aller à