[HTML&CSS]Probleme d'ecart entre image

Résolu/Fermé
emendiel Messages postés 29 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 8 février 2008 - 14 juin 2007 à 15:37
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 15 juin 2007 à 11:14
Bonjour a tous,

Alors voila j'ai un petit problème mais qui m'embête quand même.
Comme vous pouvez le voir sur l'aperçu mes images de menu on un espace entre elles, serait il possible de l'enlever que ce soit en CSS ou en HTML

http://img358.imageshack.us/img358/3545/blemwx5.jpg

Merci.
A voir également:

2 réponses

Lechuck Messages postés 67 Date d'inscription jeudi 2 octobre 2003 Statut Membre Dernière intervention 4 octobre 2012 3
14 juin 2007 à 15:52
Bonjour,

en HTML tu peux le faire en mettant tes images dans un tableau avec une bordre nulle, sans espace entre les cellules et dans les cellules <table cellpadding=0 cellspacing=0 border=0>. Sinon il y a les calques.
Bon courage

Nico
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
14 juin 2007 à 15:53
salut,

si tu as codé avec des <div> et une liste pour le menu, c'est un problème de marge, d'espacement ou des deux à la fois.
il faut essayer
{
margin:0;
padding:0;
}

soit l'un, soit l'autre, ou les deux.
tu le fais pour chaque élément en partant du <a> et si ça fait rien tu essaies avec son conteneur et ainsi de suite.
(là, ça doit être le <li>)
0
emendiel Messages postés 29 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 8 février 2008
14 juin 2007 à 16:00
merci je vais essayez par contre je l'ai fais sans liste je verrai si il vaut mieux que je fasse une liste
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
14 juin 2007 à 16:20
c'est plus simple à mettre en page mais c'est aussi une question de sémantique.

bon courage !
0
Emendiel > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
14 juin 2007 à 16:29
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)
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
14 juin 2007 à 19:48
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 !).
0
emendiel Messages postés 29 Date d'inscription jeudi 28 septembre 2006 Statut Membre Dernière intervention 8 février 2008 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
15 juin 2007 à 09:26
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 ^^
0