Blocks en ligne

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Blocks en ligne

Bulgrozz

Avec les règles à l'Aquitaine

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);}

Publicité

electroger

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

Bulgrozz

Avec les règles à l'Aquitaine

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

Gonzoide

Les cochons... dans l'espâââce

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

_pegaze_

Dux : La loi c'est moi

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)

Bulgrozz

Avec les règles à l'Aquitaine

Merci messieurs :jap:

FORUM HardWare.fr

Graphisme

Web design

Blocks en ligne

Sujets relatifs
Recherche Graphiste Flash pour jeu en ligne	comment mesurer les niveaux de gris d'une image sur une ligne
[ Blender ] Rendu en ligne de commande pour calcul distribué	Nouveau site en ligne d'infographie et webdesign
mettre en site en ligne	Cherche graphiste pour creation site web en ligne
Perception Nouvelle V5 en ligne	Animation Sylvenor - La Vidéo en ligne !
[Avis] Portfolio en ligne	Imprimerie en Ligne -- /!\ nouvel inscrit, passe ton chemin /!\
Plus de sujets relatifs à : Blocks en ligne

Page générée en 0.067 secondes