28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème : Espacement entre une suite d'images

Bonjour,


Je voudrais créer un menu horizontal d'exactement 574px de largeur et composé de 7 images de 82px (7 x 82 = 574 !)
A l'origine il s'agit d'un menu en javascript et je me suis dit qu'il serait mieux de n'utiliser que Html + Css, mais j'avais oublié que c'était pas si évident que ça à mettre en oeuvre =)

Voici le code HTML du menu :


<div id="main_menu">
	<ul id="menu">
        <li><a id="menu_1" title="menu_1" accesskey="1" href="#"></a></li>
        <li><a id="menu_2" title="menu_2" accesskey="2" href="#"></a></li>
        <li><a id="menu_3" title="menu_3" accesskey="3" href="#"></a></li>
        <li><a id="menu_4" title="menu_4" accesskey="4" href="#"></a></li>
        <li><a id="menu_5" title="menu_5" accesskey="5" href="#"></a></li>
        <li><a id="menu_6" title="menu_6" accesskey="6" href="#"></a></li>
        <li><a id="menu_7" title="menu_7" accesskey="7" href="#"></a></li>
    </ul>
</div>



Et voici le CSS :


#main_menu {
    width: 574px;
    float: left;
    height: 48px;
}
ul#menu {
    list-style-type: none;
}
ul#menu li 
{
    display: inline;
    padding:0px;
    margin:0px;
}
ul#menu a {
    text-decoration: none;
    width: 82px;
    height: 47px;
    padding:0px;
    margin:0px;
	display: inline-block;
    /*display:-moz-inline-box;*/
}
a#menu_1 {
    background-image: url(images/menu_up_1.jpg);
}
a#menu_1:hover {
    background-image: url(images/menu_ov_1.jpg); 
}
a#menu_1:active {
    background-image: url(images/menu_sel_1.jpg); 
}
a#menu_2 {
    background-image: url(images/menu_up_2.jpg);
}
(...)


J'utilise donc
"display: inline-block;" ou "display:-moz-inline-box;" si le navigateur est firefox.

J'ai testé sur IE, Firefox et Opera, et ça ne marche correctement que sur IE.
Le problème sur Firefox et Opera est qu'il y a un espace d'environ 3 pixels entre les images. Le menu d'images ne tient donc plus sur une ligne en plus d'avoir ce problème esthétique d'espace blanc entre les images.

D'après la faq, je crois qu'il s'agit d'un problème de différence de modèles de boîtes entre les standards et Microsoft, pourtant je pensais qu'avec un margin de 0px sur les éléments (<li> et <a>), les marges disparaissent et les images se colleraient ?

Est-ce que vous pourriez m'éclairer sur ce sujet SVP ?

Merci d'avance =)
Modifié par mark_nikil (22 Nov 2006 - 12:31)
essaye d'ajouter la propriété css vertical-align:top; dans tes liens. C'est ce que j'ai fait pour virer l'espace entre les liens sur mon site et ça a marché.
Merci de la réponse.

Je viens de tester et ça ne change rien au problème.
Ceci dit, je ne suis pas sûr que cela ait rapport au problème, puisqu'il s'agit d'espaces entre des images alignés horizontalement.
Autant pour moi j'ai lu trop vite et je pensais à un menu vertical.

Pour ta question : Je crois qu'il faut mettre des margin et padding à 0 aussi pour ton ul et pas juste pour les li.

Autre chose : dans tes li change le display: inline-block; pour mettre display: block; car tu considére tes liens comme des bloques avec une taille.

Pour finir je mettrais des float: left pour chaque li.
Bon alors dans l'ordre...

bout-de-papier a écrit :

Pour ta question : Je crois qu'il faut mettre des margin et padding à 0 aussi pour ton ul et pas juste pour les li.

J'ai essayé d'en mettre partout, et ça ne changeait rien Smiley ohwell

bout-de-papier a écrit :

Autre chose : dans tes li change le display: inline-block; pour mettre display: block; car tu considére tes liens comme des bloques avec une taille.

"display: block;" n'est pas bon, car les liens-images s'empilent à la vertical du coup !

bout-de-papier a écrit :

Pour finir je mettrais des float: left pour chaque li.

Et là bingo le problème est réglé, merci ! Smiley smile
Je ne comprends pas bien ce que ça fait (j'étais persuadé que régler les margin/padding à 0 était suffisant), mais il n'y a plus d'espace entre les images =)


Bon sinon je rencontre un autre problème sur Firefox seulement, mais c'est un autre sujet et je vais essayer de me dépatouiller tout seul d'abord.
mpop a écrit :

En fait, ces espaces entre les li sont logiques, vu qu'ils sont présents dans le code, et que tu utilises des éléments en affichage de type en-ligne. Voir à ce sujet :
Impact sur le rendu de la mise en forme du code HTML.

Ah ok je comprends un peu mieux ! Thx.
J'avais complètement zappé ça, j'ai tendance à oublier que le code Html n'est pas indissociable au rendu =)
Sujet clos
Aller à