[CSS]image décallée

difference IE/FF

Sujet résolu

15 février 2006 à 18:39:03

Hello World!

Voila, j'ai un probleme avec des images qui s'ffichent trop haut avec Internet Explorer et qui s'affiche au bon endroit avec FireFox...

J'ai tout essayé (du moins parmis ce que je connaissait) j'ai meme remis les margin, padding et border a zero, mais rien n'y fait.

pour ceux que ça interesse; un moyen tres efficace de remedier aux décalages differents entre IE et FF:

*{margin: 0; padding: 0; border: 0;}

mettez ceci en debut du code, et toutes, absolument toutes les marges (margin padding et borders) seront a zéro avec TOUS les navigateurs.

MAIS, meme avec ça, ça ne résoud pas mon probleme.

Regardez par vous-meme, ça fait tres moche dans le design:
www.grafix-session.info
Le probleme ce situe au niveau de la barre, tout en haut, qui devrai etre collée au titre, ainsi que la petite image "intro" en dessous du titre.

Voici le code css concernant cette partie:

* {margin: 0; padding: 0; border: 0;}

#menu
{
width: 575px;
height: 18px;
background: url("../images/quick/barre_menu.gif") no-repeat;
}

#barre_menu
{
width: 253px;
height: 18px;
position: relative;
left:322px;
top:0px;
}

#title
{
width: 575px;
height: 20px;
background: url("../images/title/title_barre_back.gif") no-repeat;
position: absolute;
top:189px;
}

#title_barre
{
width: 70px;
height: 9px;
position: absolute;
left: 12px;
}

Et le XHTML:

<div id="menu">
<div id="barre_menu">
<a href="index.php"><img src="images/quick/quick_intro.gif" alt="intro" width="47" height="18" border="0" /></a>
<a href="contact.php"><img src="images/quick/quick_contact.gif" alt="contact" width="52" height="18" border="0" /></a>
<a href="contrat.php"><img src="images/quick/quick_contrat.gif" alt="contrat" width="47" height="18" border="0" /></a>
<a href="portfolio.php"><img src="images/quick/quick_porto.gif" alt="portfolio" width="47" height="18" border="0" /></a>
<a href="team.php"><img src="images/quick/quick_team.gif" alt="team" width="60" height="18" border="0" /></a>
</div>
</div>

<div id="title">
<div id="title_barre">
<img src="images/title/title_intro.gif" alt="=>Intro<=" width="70" height="9" border="0" />
</div>
</div>

je precise que j'ai un peu indenté mon code pour plus de lisibilité, mais en réalité je ne peux pas revenir a la ligne apres les <a> (comme indiqué dans les commentaires) sinon ça me rajoute des espaces entre les images.

Si quelqu'un aurait déja eu le probleme ou pense pouvoir m'aider, merci beaucoup!

en attendant je m'arrache les cheveux...

strucky

15 février 2006 à 19:11:21

Salut !!

J'ai pas trouvé d'où vient ton problème, mais essaies en affichant tes images via le css sur tes balises <a>, cela règlera sans doute ton problème en procédant de cette façon.

Alpha_Chrisis

15 février 2006 à 19:20:25

heuuuuu, je veux bien (encore que ça va me faire faire plein de class a gerer...) mais comment je transforme des images de fond en liens apres??
Je crois pas que ce soit possible, a moins que je me trompe.
Merci d'avoir essayé en tout cas.

Hey les autres, une idée? Merci.

strucky

15 février 2006 à 19:36:19

Tu peux très bien le faire sans utiliser de classes :

Edit :
Je viens de trouver comment règler le problème avec IE, il suffit de mettre les balises <a> en flottant.

#barre_menu a{float: left}

Alpha_Chrisis

15 février 2006 à 19:56:44

mais le probleme reste le meme; sur quoi le visiteur clique? parceque je te rappelle que c'est censé etre des images clikables, y a pas de texte (exigence de ma designeuse...).

Y en a qu'un qui s'acharne? vous etes tous partis pendant les vacances ou quoi? lol
merci strucky d'avoir répondu.

strucky

15 février 2006 à 20:07:32

Hum,

Désolé, mais je ne te comprends pas trop.

Il suffit de mettre un display block, un width et height sur tes <a> pour qu'ils s'affichent.

Sinon je t'ai trouvé la soluce, voir sur mon post précédent.

Alpha_Chrisis

18 février 2006 à 16:52:32

Ok merci, effectivement ta solution a marché avec le float: left.
sauf que....

J'ai pas pigé pourquoi o_O

Pourquoi un float:left???

enfin voila, on va dire que je suis chiant, mais n'empeche que la meilleure façon de retenir qqchose c'est de le comprendre...

sinon j'ai essayé la meme chose pour le petit "intro" (qui est en CSS #title_barre) mais ça a pas marché cette fois...

Mais je pense que je vais faire comme tu l'as dit: mettre les images en fond et donner leur largeur aux balises <a> (parceque je savait pas qu'on pouvais le faire aux <a>^^ merci)

Merci d'avoir perseveré malgré mon ignorance!!