[résolu]tableau avec CSS, pb sous IE

tableau avec CSS, pb sous IE [résolu] - HTML/CSS - Programmation

Marsh Posté le 23-02-2005 à 15:56:53    

Salut à tous,
 
j'ai un pb, et j'ai pas trouvé malgré mes recherches....
sur le site de mon asso, ya une section photos( http://www.media-lan.org/index.php?page=photos ) et je suis en train de la refaire tout bien style "pellicule".
 
Je fais donc un div d'une certaine largeur et hauteur, je le fou en scroll: auto ..blabla...
 
Les photos sont dans un tableau (je sais, fo pas), et le rendu est celui que j'attend... mais uniquement sous FF...
 
IE lui se fous de la largeur du div et me fous toutes les photos à la suite ce qui explose ma mise en page
--> j'ai foutu  table-layout: fixed; et là il arrete de m'éclater la largeur, mais plutot que de se servir du scrolling du div, il rétrécie les photos pour tout faire rentrer...
 
photos.php (juste ce qu'il vous faut)

Code :
  1. <div class="photo">
  2. SMFA1
  3.         <table class="diapo"><tr>
  4.            <td>photo1>/td><td>photo2</td>...etc...
  5.         </tr></table>
  6. </div>


 
feuille de style

Code :
  1. .photo
  2. {
  3. text-align: center;
  4. font-family: Verdana;
  5. font-size: 12px;
  6. color: #7B82AB;
  7. width: 90%;
  8. height: 200px;
  9. overflow: auto;
  10. }
  11. .diapo
  12. {
  13. border: 0;
  14. background-image: url('skin/classic/diapo.jpg');
  15. background-repeat: repeat-x;
  16. text-align: center;
  17. height: 150px;
  18. table-layout: fixed;
  19. overflow: auto;
  20. }


 
si vous aez soluce sans le tableau, pas de pb, je le tej...
 
PS: merci de ne pas me blinder de critique/reproche/remarque sur le reste du site, jusqu'à maintnant je ne m'occuper que du codage PHP/MySQL... je viens juste de reprendre derriere notre graphiste (au codage de merde il faut le reconnaitre) et ça m'a déjà pris des heure pour passr de 190 warningà 1 seul (la balise marquee)
Donc je sais que ça devrait pas etre mis en page par tableau...etc... mais si on puvait s'en tenir au pb précis et actuel des photos ça serait cool, merci d'avance ;)


Message édité par Xav_ le 23-02-2005 à 20:02:29

---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 15:56:53   

Reply

Marsh Posté le 23-02-2005 à 16:04:15    

Ben y a une solution toute conne qui va faire bondir tout le monde :) c'est tu vires ton table-layout:fixed et tu ajoutes une petite case vide entre chaque photo (style <td width=10>&nbsp;</td> )
 
Mais alors, avec les nouveaux standards c'est tout bueerkk! et ça doit bien ajouter 200 octets à la taille de ta page!


Message édité par LeMicky le 23-02-2005 à 16:04:43
Reply

Marsh Posté le 23-02-2005 à 16:08:34    

Dans ton code tu as ca :

Code :
  1. <table class="diapo"><tr>
  2.             <td>photo1>/td><td>photo2</td>...etc... 
  3.          </tr></table>


Petite question, etant donne que tu n'as qu'une seule ligne, pourquoi tu ne fais pas plutot une liste que tu changes ensuite pour qu'elle s'affiche en une seule ligne ??

Reply

Marsh Posté le 23-02-2005 à 16:09:40    

Autre solution, sans tableau! (y en a qui ont les yeux qui brillent) c'est sûrement en utilisant le postion:relativ (bon j'ai essayé une fois et ça a déconné ;) , peut-être est-ce juste parce que je l'avais mal utilisé ou peut-être est-ce parce que le navigateur ne le gère pas correctement, je ne saurais te dire).
Ou plus bourrin un postion:absolute et le calcul en php des coordonnées de chacune de tes images ;)

Reply

Marsh Posté le 23-02-2005 à 16:16:28    

cerel a écrit :

Dans ton code tu as ca :

Code :
  1. <table class="diapo"><tr>
  2.             <td>photo1>/td><td>photo2</td>...etc... 
  3.          </tr></table>


Petite question, etant donne que tu n'as qu'une seule ligne, pourquoi tu ne fais pas plutot une liste que tu changes ensuite pour qu'elle s'affiche en une seule ligne ??


 
spa bete, j'y avait meme pensé à moment donnée, sorry de faire ma feignasse, mais ya quoi à lui en CSS à la liste pour les élément s'affiche cote à cote plus que l'un en dessous de l'autre ???
 


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 16:35:48    

oki, suis passé à un liste  <ul> qui englobe les photos, cjhacune dans un <li>...
 
J'ai quasiment le résultat souhaité, sauf qu'au bout de 4 photos, les <li> passe à la ligne d'en dessous et le scrooling devient vertical au lieu d'horizontal :(


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 16:43:39    

Ca fait encore plus effet pellicule alors avec la pellicule découpé tout les n photos.

Reply

Marsh Posté le 23-02-2005 à 16:46:42    

pitete, mais c'est pas ça que je veux obtenir :( je sais pas encore comment, ni quand, mais j'y arriverai...


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 16:48:37    

on ne voit pas le résultat sur le site?

Reply

Marsh Posté le 23-02-2005 à 17:00:58    

nan, les résultats en cours étant nettement moins regardable que ce qui est sur le site, je continue de bidouiller en local ;)


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 17:00:58   

Reply

Marsh Posté le 23-02-2005 à 17:02:49    

Xav_ a écrit :

spa bete, j'y avait meme pensé à moment donnée, sorry de faire ma feignasse, mais ya quoi à lui en CSS à la liste pour les élément s'affiche cote à cote plus que l'un en dessous de l'autre ???


 
J'ai pas tout compris, mais si ta question etait de savoir comment faire pour que les elements de la liste s'affichent les uns a cote de autres et non plus en dessous, alors la reponse est par la :
http://www.alsacreations.com/artic [...] smenu2.htm
 
Sinon, essaye de donner une taille a ton ul et tu l'englobe dans un div (avec overflow). Comme ca si tu donne une taille a ton ul plus grande que le div, se dernier va faire apparaitre la barre de defilement au lieu de s'agrandir (n'oublie pas de donner une taille au div).


Message édité par cerel le 23-02-2005 à 17:04:34
Reply

Marsh Posté le 23-02-2005 à 17:05:09    

Xav, t'as regardé cette gallerie?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 23-02-2005 à 17:05:29    

cerel a écrit :

J'ai pas tout compris, mais si ta question etait de savoir comment faire pour que les elements de la liste s'affichent les uns a cote de autres et non plus en dessous, alors la reponse est par la :
http://www.alsacreations.com/artic [...] smenu2.htm


 
float: left;
spa suffisant, si tu as plus d'élément qu'il ne peux en loger à l'écran, ça revient à la ligne quand meme,, et ceux meme si mes <li> sont dans une <ul> scrollable...
J'ai déjà dis ce que ça faisait juste au-dessus :(


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 17:07:24    


 
supoer merci pour le lien, c'est ça que je veux (sans la partie JS ...etc...)
 
je me mail le lien et je regarde ça à la maison quand j'arrive (paske là c'est la débauche)...
 
de toute façon je vous tiens au jus et vous mettrai le code qui troune (quand je l'aurai ;) )


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 18:37:54    

oki, bon en gros il faut
- un div scrollable (overflow: auto) de la largeur souhaitée
- à l'intérieur un second div suffisement grand (width peu etre très important) pour ce qu'on veut afficher
- chacun des élément dans un span (comme ça, on fout les margin, padding etc... pour tout bien placer)
 
et ça roulaize !!!
 
le must serait de calculer le style en dynamique pour que le second div soit ajusté pile-pil niveau largeur, mais bon, c'est merdique à intégrer vite-fait dans un gros site déjà tout fait...
Donc pour l'instant je fait une peloche suffisement grande pour la plus grande des séries de photo, et ya de en "trou noire" sur les autres...
 
Merci à tous pour l'aide, je fini de paufiner et je met en ligne ;)


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 18:54:27    

Xav_ a écrit :

float: left;
spa suffisant, si tu as plus d'élément qu'il ne peux en loger à l'écran, ça revient à la ligne quand meme,, et ceux meme si mes <li> sont dans une <ul> scrollable...
J'ai déjà dis ce que ça faisait juste au-dessus :(


 
Marche pas avec opera sauf si on fixe la largeur du ul conteneur. :/ Et quand on a une galerie dynamique avec laquelle on peut ajouter des photos, on est pas censé connaitre la largeur de UL.
 
On peut évidemment calculer cette largeur via PHP et réécrire la CSS à chaque fois, mais c'est lourd.  :o  


---------------
Expert en expertises
Reply

Marsh Posté le 23-02-2005 à 18:56:32    

voilou, c'est en logne, c'est un peu moins bien que ce que j'avais fait au départ (enfin je trouve) mais au moins ça passe IE et FF sans viander la mise en page...
et pis j'suis content quand meme du rendu :P


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 23-02-2005 à 19:03:03    

pourquoi utiliser des liste ??
 
juste jouer sur les parametres de img ??


---------------
Nos estans firs di nosse pitite patreye...
Reply

Marsh Posté le 23-02-2005 à 19:34:34    

ben j'utilise pas les listes (<ul><li> ) comme dis plus haut, 2 div...


---------------
- Xav - ...There are no crimes when there are no laws... -- Xav's World
Reply

Marsh Posté le 26-02-2005 à 13:11:25    


J'ai fait un diaporama dans le genre. Maintenant j'ai un problème:

  • IE plante très fréquemment si on chipote autour de l'image agrandie :heink:... Chez vous aussi ?
  • Sous FF j'ai positionné .slidek en position absolue à la place des images agrandies. Du coup elles apparaissent en dessous de cette image d'intro...


Comprends pas comment y remédier.
 
Des idées ? Merci d'avance !


---------------
Got spyware ? | HFR HijackThis Tutorial
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed