[RÉSOLU] Espacement entre deux images

Bonjour,

Je suis en train de réaliser un menu, avec des images, en css.

Mon problème est le suivant : il y a un espace blanc entre chaque bouton du menu alors qu'ils devraient être accolés l'un à l'autre.
Je remarque également que mes images ne s'alignent pas bien au haut du fond blanc.

Voici le menu en question : http://www.pointdot.be/projets/maxjump/site

Quelqu'un aurait-il une solution à me proposer? Merci d'avance pour vos réponses.
Modifié par paskwalina (05 May 2010 - 18:35)

Essaye d'ajouter des commentaires, pour que le code ressemble à quelque chose du genre :

<ul>
   <li>...</li><!--
--><li>...</li><!--
--><li>...</li>
</ul>

Modifié par phpdoesnotcare (05 May 2010 - 02:06)

Ça lu,

Tu utilises un display inline dans tes puces. Or, il serait plus judicieux d'utiliser le petit float qui va bien.

#menu li{
	float:left;
	list-style-type:none;
}

Néanmoins, il y aura encore un petit blanc dû à tes images.

Bon code.
Modifié par Nolem (05 May 2010 - 04:32)

Yeah!! Merci Nolem pour ta réponse. La petite ligne blanche entre les boutons, c'est voulu.

Par contre, une dernière chose : cela ne se voit pas sur internet, mais dans mon dreamweaver, je ne comprends pas pourquoi les boutons-images ne sont pas alignés au "top" du fond blanc...
Quelqu'un connait la réponse?

Et l'eau,

paskwalina a écrit :

La petite ligne blanche entre les boutons, c'est voulu.

Ce n'est pas une bonne idée. Tu devrais plutôt gérer les espaces via le css (padding/margin). Si tu changes ton fond par exemple, tu vas devoir rééditer ton image. Or si tu le gères en css, c'est juste la règle adéquate à changer. Ceci est un exemple parmi tant d'autres.

paskwalina a écrit :

Par contre, une dernière chose : cela ne se voit pas sur internet, mais dans mon dreamweaver, je ne comprends pas pourquoi les boutons-images ne sont pas alignés au "top" du fond blanc...
Quelqu'un connait la réponse?

Je ne vois pas bien ce que tu veux dire.
Modifié par Nolem (05 May 2010 - 16:20)

Merci pour le conseil.

Pour ma 2e question, voici un aperçu de ce que je veux dire (le grisé, c'est la sélection des images qui devrait être alignée au logo) : http://www.pointdot.be/projets/maxjump/site/img/menu.jpg

Bon sang, mon écran réagit bizarrement au gris de ton image... On dirait que... qu'elle est... vivante ! x)

Bref, je ne sais pas si c'est ça, mais ça reste probable : c'est juste une sorte de "bug" lié au WYSIWYG. Le logiciel est "mal fait" en quelque sorte.

Donc, je ne peux rien faire? Normalement dans Dreamweaver on devrait pouvoir avoir un aperçu exact de ce qui sera sur internet, non?
Ou est-ce normal d'avoir des éléments qui bougent?

Très honnêtement, je ne sais pas. Quand j'utilisais encore Dreamweaver (càd il y a plusieurs années quand même) je ne respectais sans doute pas autant les standards du web (qui n'étaient pas non plus ce qu'ils sont aujourd'hui). Du coup, j'avais très souvent des différences d'affichage entre ce que me montrait le soft, et le rendu réel que j'avais dans un navigateur web.
Modifié par phpdoesnotcare (05 May 2010 - 16:49)

phpdoesnotcare a écrit :
Bon sang, mon écran réagit bizarrement au gris de ton image... On dirait que... qu'elle est... vivante ! x) [...]

Demande lui de te servir une mousse

phpdoesnotcare a écrit :

Bref, je ne sais pas si c'est ça, mais ça reste probable : c'est juste une sorte de "bug" lié au WYSIWYG. Le logiciel est "mal fait" en quelque sorte.

phpdoesnotcare a écrit :

Très honnêtement, je ne sais pas. Quand j'utilisais encore Dreamweaver (càd il y a plusieurs années quand même) je ne respectais sans doute pas autant les standards du web (qui n'étaient pas non plus ce qu'ils sont aujourd'hui). Du coup, j'avais très souvent des différences d'affichage entre ce que me montrait le soft, et le rendu réel que j'avais dans un navigateur web.

+1

Il me semble que c'est dû au moteur de rendu interne. Je me souviens dans Golive, le rendu interne était désastreux dès lors que je ne faisais pas un site full table made in old school.

À noter que chez moi dans Komodo, il ne comprend pas le CSS 3. Sinon, le rendu est fidèle (moteur interne Gecko basé sur feufeu).
Modifié par Nolem (05 May 2010 - 17:17)