Forcer la largeur d'un tableau

Bonjour!

Je suis actuellement en train de retravailler mon portfolio et je rencontre un soucis de tableau.

J'ai un tableau (une ligne, une colonne) à largeur fixe. A l'intérieur, j'ai plusieurs tableaux (une ligne, une colonne), l'un à la suite de l'autre et contenant à chacun une image.

Sur mac, c'est nickel. Sur PC, firefox c'est nickel.
Internet explorer par contre explose carrément ma mise en page :'(
Il mets les tableaux l'un à coté de l'autre mais sans retourner à la ligne une fois arrivé au bout du grand tableau...

Voyez vous même sur ce lien:
http://www.baiographic.be/graphix/index.html

Donc j'aimerais forcer le retour ligne de tout ces petits tableaux à l'intérieur du grand tableau ^^

Sans doute un bout de code à ajouter pour contrer la faille d'IE?

J'utilise ce système de tableau afin que je puisse ajouter mes nouveaux travaux en début de page et que tout le reste se décale tout seul...
Ca fonctionne mais pas sur cette bête noire d'IE...

Merci à vous pour votre intérêt

Bonjour,

Il y a effectivement un bug d'IE dans ce cas particulier. Mais le bug principal de cette page serait plutôt la manière dont elle est intégrée, à coup de tableaux imbriqués. Disons que c'est une possibilité quand on est graphiste et pas codeur, mais on est quand même loin des critères de qualité mis en avant sur Alsacréations, que ce soit pour l'utilisation de CSS (presque absente) ou l'accessibilité (très mauvaise).

Enfin bref, pour un correctif rapide, tu pourrais éventuellement passer le tableau qui contient les petits tableaux avec les vignettes en table-layout:fixed, quoi que je ne suis pas sûr que ça aide vraiment IE6. Ou bien utiliser un DIV à la place, mais le bug d'IE6 avec width risque de se poser aussi. Au pire, utiliser des BR tous les trois tableaux...

Il serait plus que bon de revoir la structure complète de ta page...

Avoir un tableau d'une case qui contient plusieurs tableaux d'une case, c'est déjà illogique...

Le design que tu semble souhaiter (je n'ai qu'IE6 ici, donc je ne peux pas comparer avec FF) serait très facile à réaliser avec un peu de CSS en faisant "floater" les images 2 et 3 de chaque ligne à gauche et en mettant clear="left" aux images 1 à partir de la ligne 2.

Merci de vos réponses très rapides!

J'ai en effet omis de préciser que mes connaissances en web sont très basiques, j'utilise à peine les css, si ce n'est que pour le formatage de mon texte...

J'ai choisis l'imbrication de tableau pour me permettre de pouvoir ajouter à chaque fois un nouveau projet en haut de page, de manière à ce que tout se décale automatiquement, le but étant de classer mes travaux du plus récent au plus ancien.

J'ai effectivement essayé la commande table-layout:fixed dans ma feuille css mais ca explose complètement la mise en page, et ce sur tout les naviguateurs...

Ce qui est vraiment génant c'est que ca marche visiblement sur les naviguateurs courants SAUF sur IE, donc même si ma méthode est pas digne d'un codeur, elle fonctionne ou presque ^^

Y'a t'il une solution plus accessible pour me permettre de réaliser cela?
Une méthode qui serait également plus "propre"?

Encore merci à vous pour votre aide

A savoir aussi que j'ai fait simplement ma maquette de base sur photoshop, découpage avec fireworks et édition avec dreamweaver... le tout sur mac...

<p class="galerie">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</p>
<p class="galerie">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
</p>

p.galerie{
  clear:left;
}
p.galerie img{
  float:left;
}

à pauffiner bien sûr.

Ps. : ce n'est pas la solution la plus propre je pense, mais peut-etre la plus simple pour tes mises à jour.
Modifié par Yasashii (16 Jan 2009 - 15:57)

Merci pour ce code.
J'imagine que la deuxième partie doit aller dans ma feuille css?

Je n'ai que peu de connaissance en codage... Désolé si je parais idiot

Génial! Ca fonctionne même avec IE!
Merci beaucoup!

Il me reste juste 2 petits détails à régler:

Est-il possible avec cette solution de mettre un espace entre chaque vignette?
Car toutes les images se collent...

Ensuite j'aimerais mettre une marge car tout est aligné à l'extrême gauche, je voudrais aligner par rapport au titre de la rubrique. Je suppose que je dois mettre un margin left dans le css mais à quel endroit du code que tu m'as donné?

http://www.baiographic.be/graphix/index2.html

Encore merci!

Yeaaaah c'est ok j'ai réussi tout seul après 2h de bidouillage ^^
Simplement en ajoutant des marges dans le css donc.

Je n'y serai pas arrivé sans le code de Yasashii, un très grand merci à toi et Florent pour votre coup de pouce!