Discussion :

[cortex024]

Bonjour,

J'ai une cellule dans laquelle je met toute une suite d'images pour qu'elles soient l'une à côté de l'autre...
C'est mon menu, et une image sur 2 est un lien...

J'ai remarqué qu'il y avait un espace à gauche et à droite de l'image...

Pourtant, mon tableau a cellSpacing=0 et cellPadding=0.
Et ce TD est dans une classe où:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
line-height:30px;
  padding:0px;
  margin:0px;

Comment éviter ces espaces?

Merci

[blueice]

Pas bien compris.
Les tableaux ne doivent pas être utilisés pour la mise en page.

Essaye de déclarer en début de CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
* { margin:0; padding:0;}

Ne pas oublier :

Il n'y a pas besoin de spécifier une unité pour la valeur 0 (zéro), car 0 pixel = 0 centimètre = 0 pour toutes autres unités de longueur.
Il n'est pas rare de voir quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

padding:0px;

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

padding:0;

Alors que ce n'est pas faux d'indiquer une unité lorsque la valeur est 0 (zéro), c'est une perte de temps et d'espace.
De même, la valeur doit être immédiatement suivie par une unité de mesure et il ne faut pas d'espace entre les deux.



Sinon donne nous plus de code ou l'exemple en ligne, que l'on puisse tester et t'aider correctement.

[cortex024]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table cellSpacing=0 cellPadding=0 bgColor="#dae0ea" width="100%" border="0">
<tr>
<td class="menu_hauteur" width="100%" height="30">
<IMG src="images/separation.png" height="30" border="0" alt="">
<IMG src="images/accueil.png" height="30" border="0" alt="accueil">
<IMG src="images/separation.png" height="30" border="0" alt="">
 
etc.....

et dans le css la classe menu_hauteur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
padding:0px;
  margin:0px;

Et en fait, entre chaque images j'ai un espace, alors que je voudrais que toutes les images soient collées...

j'ai ajouté dans la classe de mon css "font-size=0", et tous les espaces entre les images ont disparus... enfin presque.

J'ai une différence entre IE7 et firefox...

Avec firefox, tout est nickel
Mais avec IE7, j'ai un espace d'1 pixel entre les images, et 1 pixel en dessous de l'image...

En fait, avec IE7, je n'ai aucune différence quand je met font-size=0 ou font-size=1px.
Avec Firefox bien, avec font-size=0 c'est ok, et avec font-size=1px, j'ai le même résultat que sous IE (1 pixel à côtés, et 1 en dessous).

Comment régler ce problème d'IE...

Merci

[trotters213]

Tu devrais faire plus attention à ton code pour commencer.
Définir un doctype XHTML (disponibles ici), fermer toutes tes balises, séparer les styles du contenu, ça pourrait déjà arranger certaines choses

[cortex024]

j'ai un doctype html, toutes mes balises sont fermées et je ne dois avoir aucunes erreurs car ma page est valide W3C...

Il s'agit simplement d'une différence d'affichange entre IE7 et Firefox que j'aimerais regler...

réussir à avoir le même affichage avec IE qu'avec firefox, c-a-d l'affichage logique, je ne vois pas pourquoi il se mele de me mettre un espace comme ca

[MasterOfChakhaL]

Dans un message précédent, tu dis qu'une image sur deux est un lien. Je ne vois pas de lien dans le code html que tu fournis...

S'il s'agit de mettre trois image à la suite, pourquoi ne pas tenter quelque chose comme ca.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="menu">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#menu { 
  height: 30px;
  width: 100%;
}
#menu img {
  float: left;
}

[cortex024]

Je viens de comprendre... le problème est résolu....

IE me casse vraiment de plus en plus les ...... c'est chaque fois pareil il me fait perdre un temps dingue à cause d'absurdités....


c'est déjà mieux avec la version 7 mais.....

Il s'agissait en fait de blanc dans mon code html, donc même pas d'espace inécables...

enfin, tant que c'est résolu...

Merci à tous pour votre aide