[HTML&CSS]Probleme d'ecart entre image
Résolu
emendiel
Messages postés
29
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
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.
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:
- [HTML&CSS]Probleme d'ecart entre image
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
2 réponses
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
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
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
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>)
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>)
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)
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,
mais en utilisant le html suivant :
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 !).
#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 !).
