[HTML&CSS]Probleme d'ecart entre image [Résolu]

j'ai essayer mais rien ne marche je vous avoue que je ne comprend pas voici mes bout de code

HTML :

<div id="menu">
<div class="element_menu">
<img src="images/menu.png"/>
<a href="index.html"><img src="images/accueil.png" border="0"/></a>
<a href="page2.html"><img src="images/forum.png" border="0"/></a>
<a href="page3.html"><img src="images/membres.png" border="0"/></a>
</div>

CSS :

#menu
{
float: left;
width: 140px;
}

.element_menu
{
margin:0;
padding:0;
margin-bottom: 100px;
}

.element_menu div
{
margin:0;
padding:0;
}


.element_menu img
{
margin:0;
padding:0;
}

.element_menu a
{
margin:0;
padding:0;
}

sur le CSS j'ai essayer d'appliquer a tout et ca ne change rien (mes images font 140*20)

re,

#menu
{
float: left;
}
.element_menu
{
margin: 0 0 100px 0;
padding:0;
background-image:url("images/menu.png");
background-position:top left;
background-repeat:no-repeat;
list-style-type:none;
}
.element_menu li{
margin: 0 0 100px 0;
padding:0;
}
.element_menu li a
{
margin:0;
padding:0;
display:block;
width:140px;
height:120px;
visibility:hidden;
} 
.accueil{
background-image:url("images/accueil.png");
background-position:top left;
background-repeat:no-repeat;
}
.forum{
background-image:url("images/forum.png");
background-position:top left;
background-repeat:no-repeat;
}
.membres{
background-image:url("images/membres.png");
background-position:top left;
background-repeat:no-repeat;
}

mais en utilisant le html suivant :

<div id="menu">
	<ul class="element_menu">
		<li class="accueil"><a href="index.html">Accueil</a></li>
		<li class="forum"><a href="page2.html">Forum</a></li>
		<li class="membres"><a href="page3.html">Membres</a></li>
	</ul> 
</div>

si tu utilises des images qui sont purement décoratives il faut les placer en image de fond d'un fond existant. <img> est réservée aux images qui font parties du contenu de la page, là encore, une question de sémantique !
-;o)

essaie ce code, il devrait passer, mais il faut vérifier qu'il prenne la bonne dimension…
comme ça tu as un menu graphique (joli à voir) mais qui peut aussi être affiché par un navigateur texte et il devient donc accessible à tous, tout le temps (un peu plus en tout cas !).

Alors j'ai essayer ton code je comprend ce que tu veut faire mais une chose bizarre ce produit les liens et les images disparaissent j'essaie d'adapter je re post plus tard ^^

C'est bon j'ai trouver la solution c tout bete ^^

il suffit de mettre ca :

img {
border: none;
display: block;
}

p****n Dalida, mais tu fais n'importe quoi !!!

un texte avec {visibility:hidden}, accessible ?
débile !

pour ceux qui comme moi ont pensé à ce post et se sont dit que j'étais complètement dans l'erreur, je dis oui !!!

à la place de :

a{
visibility:hidden
}

on utilisera plus intelligemment un :

a{
text-indent:-140px;
overflow:hidden;
}

ou autre méthode de remplacement de texte qui soit accessible !

désolé pour le retard de neurones, grève de cerveau = service minimum !
-;o)