28172 sujets

CSS et mise en forme, CSS3

Problemes sous firefox avec span en lien

Bonjour,

Je viens de modifier un site que j'ai créé il y a peu afin d'ajouter certains boutons et voila le probleme que je rencontre, lorsque j'écris : 


<a href="http://www.omnisports.be" style="position: absolute; border:0; padding-top:40px; padding-left:30px; height:40px; width:40px;">
	<img src="images/banner.gif" title="Omnisports - Info sportive" alt="Omnisports - Info sportive" />
</a>
<a href="javascript:addbookmark()" style="position: absolute; border:0; padding-top:110px; padding-left:220px; height:40px; width:40px;">
	<img src="images/favoris.gif" title="Omnisports - Ajouter aux favoris" alt="Omnisports - Ajouter aux favoris" />
</a>
<a href="mailto:redaction@omnisports.be?subject=A propos de votre site web Omnisports" style="position: absolute; border:0; padding-top:110px; padding-left:260px; height:40px; width:40px;">
	<img src="images/contact.gif" title="Omnisports - Contacter nous" alt="Omnisports - Contacter nous" />
</a>
<a href="http://www.omnisports.be/rss/rss_site.xml" style="position: absolute; border:0; padding-top:110px; padding-left:300px; height:40px; width:40px;">
	<img src="images/rss2.gif" title="Omnisports - Ajouter ce RSS à vos favoris" alt="Omnisports - Ajouter ce RSS à vos favoris" />
</a>


Toute la zone est recouverte par le lien de mon dernier bouton, alors que sur internet explorer chaque lin correspond a son image. J'ai essayé de rajouter des tailles dans le style du <a> mais rien ne fait.

Second probleme, lorsque j'écris :


<a href='javascript [langue]opupCentrer("reportage.htm",420,400,"menubar=no,scrollbars=yes,statusbar=no")' class="boutton">
	<span class="titre" style="background-color:<? echo $sport_coul;?>; height:92px; width:100%; background-image:url('images/boutton_droit_1.jpg'); font-size:30px;">
		<span style="margin-left:80px; margin-top:14px;">Reportage</span>
	</span>
</a>

<br /><br />

<a href='javascript [langue]opupCentrer("partenariat.htm",420,400,"menubar=no,scrollbars=yes,statusbar=no")' class="boutton">
	<span class="titre" style="background-color:<? echo $sport_coul;?>; height:92px; width:100%; background-image:url('images/boutton_droit_2.jpg'); font-size:30px;">
		<span style="margin-left:80px; margin-top:14px;">Partenariat</span>
	</span>
</a>


Lorsque je clique sur une zone pour ouvrir le lien, l'image remonte... (a tester pour comprendre)

Voici le code du fichier de style :


span.titre
{
	display:-moz-inline-box; /* pour Firefox */
	display:inline-block;
	width:100%;
	height:25px;
	color:#000;
	background-color:#9DB3F1;
	font-weight:bolder;
	font-size:16px;
	padding-left:5px;
	padding-top:3px;
}

a.boutton:link {border:0; margin:0; padding:0; font-weight:normal;}
a.boutton:visited {border:0; margin:0; padding:0; font-weight:normal;}
a.boutton:hover {border:0; margin:0; padding:0; font-weight:normal;}


J'ai ajouté cette classe boutton pour essayer mais ca n'a rien changé.

Merci d'avance
Bonsoir,

L'erreur vient de l'utilisation du padding (padding-top et padding-left) pour positionner ces éléments. Le padding n'est pas fait pour ça.

Si tu utilises la règle suivante dans ta feuille de styles:
#haut a {background: rgba(0,0,0,.4);}
et que tu regardes dans Firefox 3 ou Safari 3, tu t'apercevras que tes liens sont des zones empilées les unes par dessus les autres. Le résultat que tu obtiens avec Firefox est donc parfaitement normal.

Je crois qu'une révision du positionnement CSS s'impose. Smiley cligne
Sujet clos
Aller à