28173 sujets

CSS et mise en forme, CSS3

[Résolu] Display:inline de table

Bonjour,

et tout d'abord merci aux auteurs.
J'ai effectué une recherche dans le forum, cherché un peu partout (sans doute pas assez bien) mais je n'ai toujours pas de solution à mon problème.
Cela se passe sur cette page :

http://www.collection-appareils.com/historique/html/chrono.php

Mon objectif est de supprimer les espaces verticaux disgracieux qui séparent la frise tous les 7 ans.
Pourquoi 7 ans ? parce qu'il s'agit d'une suite de Tableaux à 7 colonnes que j'affiche par un display:inline. Alors que le display:block me permet de l'imprimer.
J'ai essayé plein de choses, mais je n'arrive pas à réduire ces espaces.
Il n'y a pas de DIV entre les tableaux.

Est-ce que quelqu'un a une idée ?

Merci de votre aide.
Modifié par Sylvain Halgand (24 Aug 2007 - 09:47)
Bonjour,

Déja tu aurais pu faire un peu d'effort car 507 erreur pour la norme ...

Ensuite pour ton probleme je pense que c'est tes tableaux, entre chaque tableau je pense qu'il y a un espace obligatoire... Donc il faudrai que fasse un seul tableau ou alors faire tout en div.
Merci, mais j'ai indiqué que je recourais à ces tableaux multiples afin de pouvoir imprimer, car qui est impossible avec un tableau unique d'une telle largeur. Auparavant, j'avais un tableau unique.
Bon je viens de regarder sous IE6 et il n'y a pas de decalage. Donc seulement FF merde un peu Smiley ohwell

essai de mettre dans ton css de ta table


margin-right: -.4em;


Faudra verifier avec IE pour voir s'il n'y a pas de superposition.
Administrateur
Sylvain Halgand a écrit :
et donc je ne sais plus trop quoi penser.

Ah pourtant je pensais que le billet était clair Smiley confus
L'idée est qu'il faut éviter de n'utiliser que la balise <div> pour remplacer une mise en page par tableau.
Il faut au contraire diversifier les éléments et surtout employer chaque élément selon sa fonction :
- <div> pour regrouper des blocs
- <p> pour des paragraphes, ou parties de texte simple
- <h1>, <h2>, etc. pour les niveaux de titre
- <ul> pour les listes (et les menus)
- etc.

Or, on n'a trop tendance à n'utiliser que des <div>, ce qui au final n'est pas plus intéressant que des tableaux.
Tout simplement Smiley smile
Salut,

Je confirme que le nombre d'erreurs sur la page n'aide pas du tout à trouver l'origine du problème.
Halindel a écrit :
Bon je viens de regarder sous IE6 et il n'y a pas de decalage. Donc seulement FF merde un peu Smiley ohwell

Non, je ne pense pas. Smiley cligne

Sans m'être plongé dans le code, je pense que s'il y a des espaces entre les <table>, il est normal que l'on retrouve ces espaces visuellement quand on passe en display:inline.
Halindel a écrit :

margin-right: -.4em;

Rah... Est-il possible d'éviter de proposer ce genre de solutions ? C'est vraiment typique du pire du développement Web : aucune réflexion et vision à très court terme.
Désoler Smiley sm je le ferai plus :'(

Mais pour IE 6 il y a pas de decalage alors sous FF il y a bien un espace et en enlever tout les marges cela ne change rien pour FF.
Il n'y a pas d'espace entre les tables dans le code.

Quand je dis que je ne sais quoi en penser, c'est que j'ai lu (et bien compris) le billet et que la première réponse qu'on me fait est de tout remplacer les tableaux par des DIV, donc en contradiction, alors que billet et intervention sont sur le même site, d'où ce désarroi.

Où trouvez-vous le nombre d'erreurs de la page ?

Pour info, je ne suis pas un "technicien" du web, mais avant tout un passionné d'appareils photo anciens, pour lequel le web n'est qu'un media de partage. Le contenu prime avant l'excellence technique du moyen. Cela étant si je peux améliorer les choses, je suis partant.
Administrateur
Sylvain Halgand a écrit :
Où trouvez-vous le nombre d'erreurs de la page ?

Le Validateur officiel du W3C offre ce genre d'informations :
http://validator.w3.org/

Si l'anglais n'est pas ton fort, tu peux suivre ce sujet intéressant Smiley cligne

a écrit :
Pour info, je ne suis pas un "technicien" du web, mais avant tout un passionné d'appareils photo anciens
Intéressant, je vais faire un tour sur ton site web Smiley smile

EDIT : Hey, je crois que je l'avais celui-là ! Smiley langue
Modifié par Raphael (22 Aug 2007 - 11:35)
Sylvain Halgand a écrit :
Il n'y a pas d'espace entre les tables dans le code.

Ils ressemblent pourtant beaucoup à des espaces...
  </table>
  <table border="0" cellspacing="0" class="sautDePage">

Sylvain Halgand a écrit :
Quand je dis que je ne sais quoi en penser, c'est que j'ai lu (et bien compris) le billet et que la première réponse qu'on me fait est de tout remplacer les tableaux par des DIV, donc en contradiction, alors que billet et intervention sont sur le même site, d'où ce désarroi.

Nous sommes ici sur un forum, et je pense que tu te doutes bien que Raphaël ne répond pas lui-même à toutes les questions qui sont posées ici, non ? Smiley cligne
Sylvain Halgand a écrit :
Où trouvez-vous le nombre d'erreurs de la page ?

Avec le validateur du W3C par exemple.
Sylvain Halgand a écrit :
Pour info, je ne suis pas un "technicien" du web, mais avant tout un passionné d'appareils photo anciens, pour lequel le web n'est qu'un media de partage. Le contenu prime avant l'excellence technique du moyen. Cela étant si je peux améliorer les choses, je suis partant.

Le problème, c'est que nous sommes justement ici sur un forum technique. Mais si tu veux améliorer les choses, tu es au bon endroit. Smiley smile
Modifié par Julien Royer (22 Aug 2007 - 11:36)
Administrateur
Sylvain Halgand a écrit :
Je me suis servi de : http://jigsaw.w3.org/css-validator/

Pas bon alors ? Il me sors une seule erreur (et des avertissements)
Je vais essayer l'officiel.

Ton validateur est parfaitement officiel... mais ne vérifie que les erreurs de CSS (comme son nom l'indique). Il ne vérifie pas le code (x)HTML.
Les deux parties sont dissociées, mais un code HTML "bancal" ne facilite pas la correction des erreurs d'affichage.
Modifié par Raphael (22 Aug 2007 - 11:39)
Modérateur
Bonjour,

La solution la plus simple , serait de mettre tes tables en float:left; , vu que tu donne une dimension fixe au div qui les englobes , il n'y a priori pas de soucis sur ce point la , cette regle sera interpreté de la même maniere d'un navigateur a l'autre .

gc
Merci Gc, ça marche impeccablement.

J'en ai profité pour corriger les erreurs de la page et elle est maintenant conforme.
Modifié par Sylvain Halgand (23 Aug 2007 - 11:36)
Sujet clos
Aller à