[HTML] Tailles proportionnelles sous IE ?
Reivax962
Messages postés
3672
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,
Voilà un code html très simple :
Ben n'empêche qu'IE refuse de me les afficher correctement, il aggrandit la <table> pour que toutes les photos, en taille réelle, rentrent, et ensuite seulement il se rend compte que les photos en question, bah, il les fallait en modèle réduit...
Bref, c'est correct sous firefox, mais je n'arrive pas à les faire rentrer sous Internet Explorer, sans scrolling horizontal.
Quelqu'un a une idée pour me sortir de là ?
Merci,
Xavier
Voilà un code html très simple :
<body bgcolor="#525A73"> <span class='titre1'>Noel 2006</span><br /><br /> <table style='width:100%'> <tr> <td class='text1' style='padding: 5px;' valign='top'> <a href='Noel 2006/Noel 2006 001.jpg' class='text1' target='_BLANK' style='border: 0px none black;'> <img src='Noel 2006/Noel 2006 001.jpg' width='90%' /><br />Noel 2006 001.jpg </a> </td> <td class='text1' style='padding: 5px;' valign='top'> <a href='Noel 2006/Noel 2006 002.jpg' class='text1' target='_BLANK' style='border: 0px none black;'> <img src='Noel 2006/Noel 2006 002.jpg' width='90%' /><br />Noel 2006 002.jpg </a> </td> <td class='text1' style='padding: 5px;' valign='top'> <a href='Noel 2006/Noel 2006 003.jpg' class='text1' target='_BLANK' style='border: 0px none black;'> <img src='Noel 2006/Noel 2006 003.jpg' width='90%' /><br />Noel 2006 003.jpg </a> </td> <td class='text1' style='padding: 5px;' valign='top'> <a href='Noel 2006/Noel 2006 004.jpg' class='text1' target='_BLANK' style='border: 0px none black;'> <img src='Noel 2006/Noel 2006 004.jpg' width='90%' /><br />Noel 2006 004.jpg </a> </td> </tr> </table> </body>Comme vous pouvez le voir, c'est une simple page qui doit afficher quatre photos de sorte qu'elles tiennent sur une seule page sans scrolling. Rien de bien compliqué, hein ? C'est le B-A BA, n'est-ce pas ?
Ben n'empêche qu'IE refuse de me les afficher correctement, il aggrandit la <table> pour que toutes les photos, en taille réelle, rentrent, et ensuite seulement il se rend compte que les photos en question, bah, il les fallait en modèle réduit...
Bref, c'est correct sous firefox, mais je n'arrive pas à les faire rentrer sous Internet Explorer, sans scrolling horizontal.
Quelqu'un a une idée pour me sortir de là ?
Merci,
Xavier
A voir également:
- [HTML] Tailles proportionnelles sous IE ?
- Editeur html - Télécharger - HTML
- Ie tab - Télécharger - Outils pour navigateurs
- Bill ie cork ✓ - Forum Consommation & Internet
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
3 réponses
Désolé de te dire ça mais IE c'est un peu nul et firefox est gratuit: propose un lien de téléchargement sur ton site!!
coucou
Tu devrais peut-etre essayer avec une feuille de style et éviter les tables.
Aussi l'attribut valign n'est pas reconnu par w3c, et peut-etre devrais-tu utiliser de vraies miniatures.
Si tu n'y arrives pas donnes plus d'info sur la taille des images je regarderais dès que j'ai le temps, demain ou vendrdi ;)
A+
Tu devrais peut-etre essayer avec une feuille de style et éviter les tables.
Aussi l'attribut valign n'est pas reconnu par w3c, et peut-etre devrais-tu utiliser de vraies miniatures.
Si tu n'y arrives pas donnes plus d'info sur la taille des images je regarderais dès que j'ai le temps, demain ou vendrdi ;)
A+
Bonjour,
Je sais, les <table>, c'est pas l'idéal. M'enfin quand même...
Pour l'attribut valign, c'est juste une mauvaise habitude datant des versions antérieures d'HTML, mais ça ne gêne en rien le soucis ici.
Ensuite, je n'ai pas de réelles miniatures, tout simplement parce que j'ai créé ce site en 1h, en php, pour qu'il me fasse un aperçu rapide de toutes les images que j'ai à un emplacement de mon disque, par rubrique : je n'ai qu'à placer un répertoire avec des photos pour qu'elles apparaissent en tant que nouvelle rubrique. Le but est la simplicité de mise à jour : je n'ai pas l'intention, à chaque fois que je prends une nouvelle image, d'en faire une miniature. Je pourrais écrire un script qui vérifie à chaque affichage si une miniature existe ou pas, et la crée si elle n'existe pas, mais...
Avec des miniatures, le problème sera le même puisque je ne connais pas à l'avance la résolution du client : je serai toujours obligé de demander à afficher les photos sur un quart de la page si je veux en afficher 4 par ligne. Je ne peux pas fixer arbitrairement des tailles en pixels.
Les images peuvent avoir n'importe quelle taille. Bon, ce sont des photos de soirées, de vacances ou autre, donc c'est au minimum du 800x600, mais plus généralement du 1600x1200. Mais cela ne devrait pas poser de problème !
Merci en tous cas de te pencher sur ce problème. Il me semble quand même qu'IE 6 fonctionnaient sur ce genre de choses !
Je sais, les <table>, c'est pas l'idéal. M'enfin quand même...
Pour l'attribut valign, c'est juste une mauvaise habitude datant des versions antérieures d'HTML, mais ça ne gêne en rien le soucis ici.
Ensuite, je n'ai pas de réelles miniatures, tout simplement parce que j'ai créé ce site en 1h, en php, pour qu'il me fasse un aperçu rapide de toutes les images que j'ai à un emplacement de mon disque, par rubrique : je n'ai qu'à placer un répertoire avec des photos pour qu'elles apparaissent en tant que nouvelle rubrique. Le but est la simplicité de mise à jour : je n'ai pas l'intention, à chaque fois que je prends une nouvelle image, d'en faire une miniature. Je pourrais écrire un script qui vérifie à chaque affichage si une miniature existe ou pas, et la crée si elle n'existe pas, mais...
Avec des miniatures, le problème sera le même puisque je ne connais pas à l'avance la résolution du client : je serai toujours obligé de demander à afficher les photos sur un quart de la page si je veux en afficher 4 par ligne. Je ne peux pas fixer arbitrairement des tailles en pixels.
Les images peuvent avoir n'importe quelle taille. Bon, ce sont des photos de soirées, de vacances ou autre, donc c'est au minimum du 800x600, mais plus généralement du 1600x1200. Mais cela ne devrait pas poser de problème !
Merci en tous cas de te pencher sur ce problème. Il me semble quand même qu'IE 6 fonctionnaient sur ce genre de choses !
Ton ' width="90%" ' ne rétrecit pas beaucoup tes photos... Donc si tes photos sont grandes, c'est normal que tu déborde sur le coté!
Essaye avec une taille défini, genre ' width="150" ' ou alors diminuer encore plus ... ' width="40%" '
et oublie le skylog de cocacolapin... c'est une solution trop simple!
Essaye avec une taille défini, genre ' width="150" ' ou alors diminuer encore plus ... ' width="40%" '
et oublie le skylog de cocacolapin... c'est une solution trop simple!
Merci de t'occuper de moi :)
En fait, le width=90% n'est pas censé signifier "la taille de la photo doit être 90% de celle de l'originale", mais "la photo doit être redimensionner de sorte que sa largeur soit 90% de la place disponible dans son conteneur.". Or la place disponible en question, c'est une case du tableau, c'est à dire un quart de la page. C'est bien comme ça que FF le comprends !
Et d'ailleurs, la paradoxe, c'est que c'est AUSSI comme ça que IE le comprend. Sauf qu'à l'affichage du tableau, il a calculé que le tableau ferait plus que les 100% demandés à cause des images à l'intérieur (qu'il n'a pas encore redimensionnées). Bref, il fait tout à l'envers. Comment je m'en suis rendu compte ? Justement en mettant, comme tu le suggères, width='25%' directement sur l'image. La, oh surprise : les images se retrouvent toutes petites, MAIS espacées de sorte que la <table> a toujours la même dimension qu'avant ! Donc les images sont petites, mais les cases sont larges, et il faut scroller pour voir les deux dernières images...
J'ai bien essayé d'utiliser le style max-width:25% sur les cases du tableau ou sur le tableau lui-même, de mettre un <colgroup> pour définir à l'avance la tête du tableau, d'utiliser des styles overflow, mais rien n'y fait...
En fait, le width=90% n'est pas censé signifier "la taille de la photo doit être 90% de celle de l'originale", mais "la photo doit être redimensionner de sorte que sa largeur soit 90% de la place disponible dans son conteneur.". Or la place disponible en question, c'est une case du tableau, c'est à dire un quart de la page. C'est bien comme ça que FF le comprends !
Et d'ailleurs, la paradoxe, c'est que c'est AUSSI comme ça que IE le comprend. Sauf qu'à l'affichage du tableau, il a calculé que le tableau ferait plus que les 100% demandés à cause des images à l'intérieur (qu'il n'a pas encore redimensionnées). Bref, il fait tout à l'envers. Comment je m'en suis rendu compte ? Justement en mettant, comme tu le suggères, width='25%' directement sur l'image. La, oh surprise : les images se retrouvent toutes petites, MAIS espacées de sorte que la <table> a toujours la même dimension qu'avant ! Donc les images sont petites, mais les cases sont larges, et il faut scroller pour voir les deux dernières images...
J'ai bien essayé d'utiliser le style max-width:25% sur les cases du tableau ou sur le tableau lui-même, de mettre un <colgroup> pour définir à l'avance la tête du tableau, d'utiliser des styles overflow, mais rien n'y fait...
Je sais bien qu'IE est nul, mais ça ne résoud pas mon problème ^^'
Mon "site" est hébergé sur mon ordinateur, et le but n'est que de partager mes photos avec des amis, et certains ne peuvent pas installer Firefox sur leur machine (eh oui, les ordis prêtés par les entreprises, c'est bien, mais si on n'en est pas admin...)