[Résolu] Espacement entre les onglets ('<a><img /></a&

Bonsoir à tous,
j'ai un léger problème avec mes onglets : <a><img /></a> , ceci est la structure du code correspondant à un onglet.
Tous mes onglets de ma barre de menu sont espacés de quelques pixels 3/4px entre eux, et à moins d'aligner tous les '<a><img /></a>', les espacements n'arrivent pas à disparaitre ..... .

Je vais vous mettre mon code xHTML et CSS, comme ça vous comprendrez peut-etre mieux :

Code xHTML :

<!-- Barre Menu Horizontal -->
<div id="up">
	<div id="menu_deb"></div>
    <div id="menu_onglets">			<!-- Partie du menu contenant tous les Liens -->
<a href="index.php"><img src="css/images/onglets_COMMON/ACCUEIL_og2m_normal.gif" alt="Accueil" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/GROUPE_og2m_normal.gif" alt="Le Groupe" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/MEDIAS_og2m_normal.gif" alt="M&eacute;dias" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/FORUM_og2m_normal.gif" alt="Forum" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/LIVRE-OR_og2m_normal.gif" alt="Livre D'Or" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/CONTACT_og2m_normal.gif" alt="Contactez-Nous" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/LIENS_og2m_normal.gif" alt="Liens" width="80" height="150" /></a>    </div>
    <div id="menu_fin"></div>
</div>

Code CSS :

/* Barre Menu Horizontal */
#up {
border:1px #CDC252 dashed;
width:900px;
height:153px;
margin:auto;
}

#up #menu_deb {
background-image:url(images/decor_COMMON/barre_deb.gif);
width:174px;
height:150px;
margin:0;
padding:0;
float:left;
}

#up #menu_onglets {
margin:0;
padding:0;
width:584px;
height:150px;
display:inline;
float:left;
/*border:1px double #CC2200;*/
}

#up #menu_onglets img{
border:0;
margin:0;
padding:0;
}

#up #menu_fin {
background-image:url(images/decor_COMMON/barre_fin.gif);
width:140px;
height:153px;
margin:0;
padding:0;
float:right;
}

Je vous y joint deux images qui seront à mon avis plus explicative :
l'ensemble :
http://img105.imageshack.us/img105/7425/ensemblews5.png

l'espacement (zoom) :
http://img105.imageshack.us/img105/4143/barremenuprecisss8.png

Voilà, j'espère que vous pourrez me donner une solution pour "Faire Disparaitre L'Espacement" SANS "Devoir Aligner Les Lignes de Codes des Onglets : '<a><img /></a>' " (C'est à dire :
à la place de :

<a href="index.php"><img src="css/images/onglets_COMMON/ACCUEIL_og2m_normal.gif" alt="Accueil" width="80" height="150" /></a>
<a href="#"><img src="css/images/onglets_COMMON/GROUPE_og2m_normal.gif" alt="Le Groupe" width="80" height="150" /></a>

Il y a (ce qui marche pour l'instant, mais pas très propre...) :

<a href="index.php"><img src="css/images/onglets_COMMON/ACCUEIL_og2m_normal.gif" alt="Accueil" width="80" height="150" /></a><a href="#"><img src="css/images/onglets_COMMON/GROUPE_og2m_normal.gif" alt="Le Groupe" width="80" height="150" /></a>

Merci beaucoup !!
Modifié par johon03 (05 Aug 2007 - 14:01)

Bonjour,
pour commencer tu devrais passer par un liste non-ordonnée (<ul>) qui aurait l'avantage de rendre ton menu plus lisible et mieux présenté en l'absence de CSS.

Tu as quelques déclarations inutiles:

#up {
border:1px #CDC252 dashed;
width:900px;
height:153px;
margin:auto;
}

#up #menu_deb {
background-image:url(images/decor_COMMON/barre_deb.gif);
width:174px;
height:150px;
float:left;
}

#up #menu_onglets {
width:584px;
height:150px;
float:left;
/*border:1px double #CC2200;*/
}

#up #menu_onglets img {
border:0;
}

#up #menu_fin {
background-image:url(images/decor_COMMON/barre_fin.gif);
width:140px;
height:153px;
float:right;
}

Tu n'as pas besoin de padding et margin à 0 sur les images ou tes divs puisque si tu ne les as pas défini dans ta CSS, ceux-ci sont déja à 0.

Le display:inline combiné au float:left n'a aucune utilité si ce n'est de corriger un bug d'IE6.

Pour éviter ce genre de désagrément, tu devrais concertir tes liens en boîte de bloc via un diplay:block, mais coomme cette déclaration à pour effet de générer des retours chariot avant et aprés l'élement auquel elle s'applique, il faut se tourner vers un float:left qui fait passer la valeur calculée du display à block de manière transparente.

Sinon tu as ce tutoriel
Modifié par Hermann (01 Aug 2007 - 13:07)

Merci beaucoup ça m'a résolu le problème de l'espacement, mais maintenant j'ai un autre problème, c'est l'image de fin de la barre du menu :
L'image est ICI
Le Code est changé, il est le suivant :
Code xHTML :

<div id="up">
	<div id="menu_deb"></div>
    <ul id="menu_onglets">			<!-- Partie du menu contenant tous les Liens -->
<li><a href="index.php"><img src="css/images/onglets_COMMON/ACCUEIL_og2m_normal.gif" alt="Accueil" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/GROUPE_og2m_normal.gif" alt="Le Groupe" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/MEDIAS_og2m_normal.gif" alt="M&eacute;dias" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/FORUM_og2m_normal.gif" alt="Forum" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/LIVRE-OR_og2m_normal.gif" alt="Livre D'Or" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/CONTACT_og2m_normal.gif" alt="Contactez-Nous" width="80" height="150" /></a></li>
<li><a href="#"><img src="css/images/onglets_COMMON/LIENS_og2m_normal.gif" alt="Liens" width="80" height="150" /></a></li>
	</ul>
    <div id="menu_fin"></div>
</div>

Code CSS :

#up {
/*border:1px #CDC252 dashed;*/
width:900px;
height:150px;
margin:auto;
}

#up #menu_deb {
background-image:url(images/decor_COMMON/barre_deb.gif);
width:174px;
height:150px;
float:left;
}

#up #menu_onglets {
width:584px;
height:150px;
list-style:none;
margin:0;
/*border:1px double #CC2200;*/
}

#up #menu_onglets a {
display:block;
float:left;
}

#up #menu_onglets img{
border:0;
}

#up #menu_fin {
background-image:url(images/decor_COMMON/barre_fin.gif);
width:140px;
height:153px;
float:right;
}

Voilà, j'ai essayé de le modifier, je vais encore tenter d'autres choses si j'en trouve, mais si pouvez m'aider, je pense que ça ira plus vite et je vous en remercierais !

Merci d'Avance en tout cas, déjà pour ce problème résolu !

Tu as une autre manière plus efficace d'intégrer tes images de "menu_debb et menu_fin") même si ça demande un calage au pixel prés :
en imbricant ton ul dans un div contenu un background réunissant tes deux images. Tu n'as teste que sur IE?

ton code commenté

#up #menu_onglets {
width:584px;
height:150px;
list-style:none;
margin:0; /*pour IE et les anciennes version d'Opera*/
padding:0; /*nécessaire pour les navigateurs alternatif (autre que IE)*/
/*border:1px double #CC2200;*/
}
#up #menu_onglets a {
display:block; /*tu n'as pas compris ce que j'expliquais plus haut > déclaration inutile*/
float:left;
}

Si tu restes sur cette solution, tu dois rendre aussi ton menu ul flottant (float:left).
Quant a ton div de droite tu as deux solutions (en ayant préalablement supprimé le float:right):
> sois tu lui appliques une marge gauche de la largeur du menu+div gauche
> sois tu lui appliques un overflow:hidden pour les navigateur alternatifs.
Modifié par Hermann (02 Aug 2007 - 13:17)

j'y arrive pas ..
Pour le code (le display:block;) c'est que j'avais oublié de l'effacer, mais ça me modifie rien, que je le mette ou non.

Ensuite je suis sous FireFox, et pas IE (mais puisque tu y pense, je viens de vérifier ce que ça donnait sous IE et c'est ...... une catastrophe)
Ca me fait c**** parce que c'est pourtant pas si difficile quoi !
bon, je me reprend .. .

Info : Il vaut mieux que je laisse le "float:right" à mon #menu_fin car ça fait le même résultat que pour "overflow:hidden" à la différence que float:right est bon sous IE alors que overflow me met l'image en bas.

Sinon, voici la différence entre FF et IE, en image :
- Sous FireFox
- Sous IE

Comme on peut le voir, tout est réglé (du moins sous FF) sauf l'espace entre les onglets et l'image de #menu_fin. (résolu avec la marge de gauche définie mais si ça pouvait se faire automatiquement sans de marge définie, ça serait plus .... portable au niveau des résolutions

Fin bon, si je dois faire avec je trouverais une solution un jour ou l'autre mais si je peux faire autrement : ça serait bien .

Merci à toi en tout cas. Si tu peux me venir en aide une énième fois encore ...
Merci !

PS : le code CSS (juste le CSS que j'ai modifié) :

#up {
border:1px #CDC252 dashed;
width:874px;
height:150px;
margin:auto;
}

#up #menu_deb {
background-image:url(images/decor_COMMON/barre_deb.gif);
width:174px;
height:150px;
float:left;
}

#up #menu_onglets {
width:584px;
height:150px;
list-style:none;
margin:0;
padding:0;
float:left;
/*border:1px double #CC2200;*/
}

#up #menu_onglets a {
float:left;
}

#up #menu_onglets img{
border:0;
}

#up #menu_fin {
background-image:url(images/decor_COMMON/barre_fin.gif);
width:140px;
height:153px;
margin:0 0 0 734px;
padding:0;
}

EDIT : C'est bon pour le problème du menu en escalier sous IE. La solution ?
J'ai créé dans ma page CSS :

#up #menu_onglets li {
display:inline
}

Maintenant sur ce point c'est bon, sauf que maintenant eh bien , ça me fait ça sous IE (sous FF, rien n'a changé ,ouf ) :
- Image ICI.
Modifié par johon03 (04 Aug 2007 - 01:32)

Pas de Réponse ??

Edit : En fait c'est bon ! J'ai réussi, tout va mieux maintenant !
Merci encore !
Modifié par johon03 (05 Aug 2007 - 14:02)