Blocks en ligne

Marsh Posté le 27-10-2005 à 22:55:28

Rekikou tt le monde ! :hello:

Je voudrais mettre 3 images à la suite, en ligne. Comme elles doivent être cliquables et réactives, je les transforme en blocks dans le CSS. Mais du coup, elles s'empilent en colonne. Alors j'utilise la propriété float: left; pour les mettre les uns à la suite des autres et margin-left pour les positionner précisément. Mais du coup apparait le bug suivant : la première image (la plus à gauche) se cale différemment sous IE et sous FF -> IE double la valeur du margin-left :??:

Connaissez-vous le pb ? Y'a t'il une autre solution pour aligner des blocks sur une ligne ?

Merci d'avance ! :jap:

Code :

<a id="anim" href="anim.htm"></a>
<a id="galerie" href="galerie.htm"></a>
<a id="cv" href="cv.htm"></a>

Code :

#anim
{
display: block;
width: 150px;
height: 146px;
margin-left: 50px;
float: left;
background-image: url(images/logo_anim_gris.gif);
}
#anim:hover {background-image: url(images/logo_anim.gif);}
#galerie
{
display: block;
width: 150px;
height: 150px;
margin-left: 100px;
float: left;
background-image: url(images/logo_galerie_gris.gif);
}
#galerie:hover {background-image: url(images/logo_galerie.gif);}
#cv
{
display: block;
width: 150px;
height: 150px;
margin-left: 100px;
float: left;
background-image: url(images/logo_cv_gris.gif);
}
#cv:hover {background-image: url(images/logo_cv.gif);}

Reply

Marsh Posté le 27-10-2005 à 22:55:28

Reply

Marsh Posté le 28-10-2005 à 11:40:55

Tu peux virer le display à mon avis. Tu peux nous montrer le résultat?

Reply

Marsh Posté le 28-10-2005 à 19:07:47

Alors voilà un screenshot de ce que j'ai sous FF (en premier) et sous IE (en second), j'ai mis un fond jaune pour qu'on voit mieux les positions (la première icone, l'espèce de cube, est plus petite, ça c'est normal).

Le premier margin-left est doublé sous IE, quelle que soit sa valeur... :??:

La version online : http://laurentmenu.free.fr/tempo/test/essai.htm

Finalement, j'ai résolu le pb en organisant autrement mes blocs mais si quelqu'un connait la provenance du pb ci-dessus, je suis quand même curieux de le savoir.

EDIT : effectivement ça marche aussi sans les display mais ça ne résoud pas le pb

Message édité par Bulgrozz le 28-10-2005 à 19:10:27

Reply

Marsh Posté le 04-11-2005 à 14:45:55

Y'a un article assez interessant la-dessus sur pompage.net, sur l'utilisation des liste de definition, tres pratique si tu dois afficher des images avec des titres : http://www.pompage.net/pompe/listesdefinitions

Reply

Marsh Posté le 04-11-2005 à 15:22:15

Salut,
Dans ton cas en utilisant "display: inline;" ca doit corrige le probleme (je crois qu'il y a un bug sous ie qui double les margin quand l'objet est "flottant" mais pas sur).
Apres il y a peut etre des methodes plus "propres" pour faire ce que tu cherches a faire.
A+

---------------
Feed old school (+ de 350 transactions)

Reply

Marsh Posté le 04-11-2005 à 17:02:24

Merci messieurs :jap:

Reply

Blocks en ligne

Sujets relatifs:

Leave a Replay