probleme redimensionnement image dans un tableau

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : probleme redimensionnement image dans un tableau

junty

Bonjour,

J'ai un petit souci sur une de mes pages. En gros, j'ai un tableau contenant une ligne et 7 colonnes avec une image par colonne.

Je souhaiterais que le tableau prenne toute la largeur de la page. Il faudrait également que lorsqu'on redimensionne la fenetre du navigateur, les images soit réduites ou aggrandi en conséquences afin que les 6 tiennes toujours sur la page et qu'il n'apparaisse donc jamais de scroll bar. Ca, j'arrive a le faire simplement en mettant des width=100% la ou il faut bien... néanmoins, dans le sens inverse, quand on aggrandi la fenetre ou pour des ecran avec des resolution elevées, il arrive un moment ou la taille de l'image devient plus grande que la taille initiale et 1°/l'image va pixellisé (normal) 2°/ ca va créer une scroll bar vertical car en fait mon fichier est une barre de navigation dont la hauteur est petite......

Et je ne voudrai pas ca... Je m'arrache les cheveux sur ce probleme depuis 1 semaine ...

Comment faire pour que les images soit redimenssionées sans jamais dépasser 100% de leur valeur initiale ??

En gros pour résumer, lorsque la taille de la fenetre varie, la largeur des images varient proportionnelement en respectant ces conditions :
- les images peuvent etre reduites a volonté
- les images ne peuvent pas etre aggrandies au dela de leur taille initiale.
- que ca marche sous IE et Firefox (car la, soit ca marche plus ou moins sur l'un, soit sur l'autre mais jamais sur les 2 !!!!! :-()

J'espere que vous m'aurez compris !

MErci beaucoup pour vos réponses.

Voici précisément la page avec les images :

http://cabexpert.free.fr/top.html

++

Message édité par junty le 29-06-2008 à 03:20:33

Publicité

mIRROR

Chevreuillobolchévik

rapide coup d oeil:
- sur ie6 les images ne se redimensionnent jamais. je suis en 1024 et la page s ouvre avec une scrollbar horizontale
- sur firefox3 j ai beau essayer de jouer dans tous les sens ca se redimensionne bien. pas de scrollbar.

de toutes facon ta solution est inenvisageable en html tu devras passer par du JS

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

mIRROR a écrit :

oui... je suis pret a mettre du JS mais j'aimerai bien que ca s'affiche direct, qu'il n'y ait pas de message "Voulez-vous autoriser le contenue bloqué de cette page" (IE...)

j'ai réussi à faire ce que je voulais mais 1°) il met toujours ce message de sécurité 2°) si onredimensionne la fenetre ca ne change pas la taille des images...:

<HTML>
<head>
</head>
<BODY bgcolor=#672817>

<script type="text/javascript">
function imgsrc(imgurl)
{
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
}
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
var imgw = (larg-250)/6.5;
var oImg = new Image();
// oImg.src = imgurl;
document.writeln("<img src=\"" + imgurl + "\" width=\"" + imgw + "\" >" );
}
</script>
<center>
<table border=0 width="100%">
<tr>
<tD align=center width="14%">
<script language="javascript">
imgsrc('img3.jpg');
</script>
</td>
<tD align=center width="14%">
<script language="javascript">
imgsrc('img4.jpg');
</script>
</td>
<tD align=center width="14%">
<script language="javascript">
imgsrc('img1.jpg');
</script></td>

<tD align=center><IMG SRC="logo.jpg"></td>

<tD align=center width="14%">
<script language="javascript">
imgsrc('img2.jpg');
</script></td>
<tD align=center width="14%">
<script language="javascript">
imgsrc('img7.jpg');
</script></td>
<tD align=center width="14%">
<script language="javascript">
imgsrc('img3.jpg');
</script></td>
</tr>
</Table>
</center>
</BODY>
</HTML>

mIRROR

Chevreuillobolchévik

bon excuse moi j ai été stupide ca se fait tres bien en css

Code :

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
body {background-color:#672817;}
ul {overflow:hidden;_overflow:visible;zoom:1;}
ul, li {margin:0;padding:0;}
li {float:left;width:12.8%;}
li img {width:100%}
#logo {width:22.94%;}
</style>
</head>
<body>
<ul>
    <li><img src="top_fichiers/img3.jpg"></li>
    <li><img src="top_fichiers/img4.jpg"></li>
    <li><img src="top_fichiers/img1.jpg"></li>
    <li id="logo"><img src="top_fichiers/logo.jpg"></li>
    <li><img src="top_fichiers/img2.jpg"></li>
    <li><img src="top_fichiers/img7.jpg"></li>
    <li><img src="top_fichiers/img3.jpg"></li>
</ul>
</body></html>

edit:
pour eviter un eventuel bug je rajoute la ligne ul {....}
par contre pour la pixellisation on peut rien faire evidemment...

Message cité 1 fois
Message édité par mIRROR le 29-06-2008 à 12:50:31

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

Merci beaucoup mIRROR !!

C'est vraiment pas mal..

par contre, je vais faire mon chieur, mais j'aimerais encore améliorer quelques trucs :

- est-ce possible de faire en sorte que les puces des LI n'apparaissent pas car ca fait des points noirs... (au pire je pense qu'on peut les mettre de la couleur du fond pour les rendre invisibles)..
- est-ce possible que la largeur globale de cette barre d'image soit toujours de 100% et que les images soient réparties équitablement...? parce que la tout reste aligné à gauche... à défaut j'essaierai en dernier recours de centrer tout ca.

Merci !!!

mIRROR a écrit :

bon excuse moi j ai été stupide ca se fait tres bien en css

Code :

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
body {background-color:#672817;}
ul {overflow:hidden;_overflow:visible;zoom:1;}
ul, li {margin:0;padding:0;}
li {float:left;width:12.8%;}
li img {width:100%}
#logo {width:22.94%;}
</style>
</head>
<body>
<ul>
    <li><img src="top_fichiers/img3.jpg"></li>
    <li><img src="top_fichiers/img4.jpg"></li>
    <li><img src="top_fichiers/img1.jpg"></li>
    <li id="logo"><img src="top_fichiers/logo.jpg"></li>
    <li><img src="top_fichiers/img2.jpg"></li>
    <li><img src="top_fichiers/img7.jpg"></li>
    <li><img src="top_fichiers/img3.jpg"></li>
</ul>
</body></html>

edit:
pour eviter un eventuel bug je rajoute la ligne ul {....}
par contre pour la pixellisation on peut rien faire evidemment...

junty

Voici mon code à ce stade :

<HTML>
<head>
<style>
body {background-color:#672817;}
ul {overflow:hidden;_overflow:visible;zoom:1;}
ul, li {margin:0;padding:0;}
li {float:left;width:10%;}
li img {width:100%}
#logo {width:250;}
</style>
</head>
<BODY bgcolor=#672817>
<table border=0 width=100%>
<tr>
<td align=center>
<ul>
<li><img src="img3.jpg"></li>
<li><img src="img4.jpg"></li>
<li><img src="img1.jpg"></li>
<li id="logo"><img src="logo.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img7.jpg"></li>
<li><img src="img3.jpg"></li>
</ul>
</td>
</tr>
</table>
</BODY>
</HTML>

mIRROR

Chevreuillobolchévik

scuse j ai pas calculé les puces [:tinostar]

dans ta css tu rajoutes list-style-type:none; sur les li

par contre je situe pas le probleme du "aligné a gauche"
ptet que ma resolutione est trop basse :??:

tu me fais un screen ?

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

mIRROR a écrit :

nikel pour les puces

en gros pour le pb d'alignement :

j'ai ca : http://img296.imageshack.us/my.php [...] fc0ov5.jpg
je voudrais ca : http://img211.imageshack.us/my.php [...] 2a9sl2.jpg

c'est a dire ke les images soient "réparties" équitablement sur la largeur de la page (j'ai fait la 2eme image avec une TABLE)

aurais-tu une idée mIRROR ?

merci beaucoup pour ton aide !!

mIRROR

Chevreuillobolchévik

putain ca m epate c est en pourcentages ca devrait pas arriver
laisse moi un peu de temps

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

mIRROR

Chevreuillobolchévik

j aime pas trop ca mais ca devrait marcher

Code :

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
body {background-color:#672817;_text-align:center;}
ul, li {margin:0;padding:0;}
ul {overflow:hidden;_overflow:visible;zoom:1;width:100%;margin:0 auto;_margin:0;}
li {float:left;width:12.8%;list-style-type:none;}
li img {width:100%}
#logo {width:22.94%;}
</style>
</head>
<body>
<ul>
    <li><img src="top_fichiers/img3.jpg"></li>
    <li><img src="top_fichiers/img4.jpg"></li>
    <li><img src="top_fichiers/img1.jpg"></li>
    <li id="logo"><img src="top_fichiers/logo.jpg"></li>
    <li><img src="top_fichiers/img2.jpg"></li>
    <li><img src="top_fichiers/img7.jpg"></li>
    <li><img src="top_fichiers/img3.jpg"></li>
</ul>
</body></html>

Message cité 1 fois
Message édité par mIRROR le 29-06-2008 à 14:41:15

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Publicité

junty

hmm c un peu ca mais pas totalement...

en fait, peut-on faire ce que tu as fait en CSS mais appliqué à un tableau (pour gérer la largeur des TD au lieu des UL/LI ?

je pense qu'avec un tableau ca marcherait.

mIRROR a écrit :

j aime pas trop ca mais ca devrait marcher

Code :

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style>
body {background-color:#672817;_text-align:center;}
ul, li {margin:0;padding:0;}
ul {overflow:hidden;_overflow:visible;zoom:1;width:100%;margin:0 auto;_margin:0;}
li {float:left;width:12.8%;list-style-type:none;}
li img {width:100%}
#logo {width:22.94%;}
</style>
</head>
<body>
<ul>
    <li><img src="top_fichiers/img3.jpg"></li>
    <li><img src="top_fichiers/img4.jpg"></li>
    <li><img src="top_fichiers/img1.jpg"></li>
    <li id="logo"><img src="top_fichiers/logo.jpg"></li>
    <li><img src="top_fichiers/img2.jpg"></li>
    <li><img src="top_fichiers/img7.jpg"></li>
    <li><img src="top_fichiers/img3.jpg"></li>
</ul>
</body></html>

mIRROR

Chevreuillobolchévik

oui mais moi je refuse de mettre ca dans un tableau [:cosmoschtroumpf]
que ce soit en js ou en html t as dix ans de retard, donc l exercice est plutot didactique

qu est ce qui marche pas la :??:

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

mIRROR

Chevreuillobolchévik

ie en 800*600

ie en 1024*728

ff en 800*600

ff en 1024*728

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

ouais je suis bien daccord que les Table c fini ..... :non: .... mais je sais pas comment faire d'autres.. je debute a peine en CSS et je pense que les DIV c comme les table...

bref le probleme est que quand jaggrandi la fenetre ou par exemple chez moi ou jai une resolution d e1600 en largeur, les images sont plus grandes que leur taille initiale
et je ne veux pas pour la simple raison que ce fichier top.html est un bandeau en haut dans un frameset et qu'il fait que 130 pixels de haut. il faut donc pas que la hauteur des images ne depasse 120 pixel environ... sinon je vois apparaitre des SCrollbars..

tu comprends ?

mIRROR a écrit :

ie en 800*600
http://img165.imageshack.us/img165 [...] is1.th.jpg

ie en 1024*728
http://img176.imageshack.us/img176 [...] he7.th.jpg

ff en 800*600
http://img369.imageshack.us/img369 [...] cn8.th.jpg

ff en 1024*728
http://img174.imageshack.us/img174 [...] al8.th.jpg

mIRROR

Chevreuillobolchévik

un frameset [:ciler]

ok je comprends mieux
t as bloqué ta hauteur a 130px et c est pour ca que ca deconne
essaie avec text-align:center; dans tes li

mais surtout vire moi ces frames
c est super simple a faire en php

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

mIRROR a écrit :

ca ne marche paS ...

Comment remplacer le frameset ? que suggeres tu ?

mIRROR

Chevreuillobolchévik

le probleme est simple:
pour conserver le ratio de tes images tu ne peux ***PAS*** bloquer en hauteur ton menu
donc ceci reste forcement impossible en frames
et si tu laisses tes elements s agrandir en largeur c est logique de les laisser s etendre en hauteur pour conserver le ratio
et dans ce cas tu n auras aucun probleme de scrollbar
ma premiere solution est nickel, c est juste que j avais pas capté que tu etais en frameset

pour remplacer ton frameset, le mieux reste un include php ou eventuellement un ssi (server side include)
les deux solutions sont facilement abordables par des debutants (surtout la seconde, j ai meme bossé pour un gros client qui s en servait [:tinostar] )

Message cité 2 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

ok je vais chercher de ce coté alors.

merci pour ton aide !!!

mIRROR a écrit :

junty

juste une question dans ton code :

Code :

ul {overflow:hidden;_overflow:visible;zoom:1;list-style-type:none;_text-align:center;}
ul, li {margin:0;padding:0;_text-align:center;}
li {float:left;width:10%;}
li img {width:90%;}

ligne 3 => ca veut dire que les attributs entre accolade s'appliquent aux LI. C'est bien ca ?

Comment faire pour qu'ils s'appliquent mais pas a tous les LI. C'est a dire par exemple pas au LI dont id="logo" ?

mIRROR a écrit :

Message cité 1 fois

mIRROR

Chevreuillobolchévik

junty a écrit :

juste une question dans ton code :

Code :

ul {overflow:hidden;_overflow:visible;zoom:1;list-style-type:none;_text-align:center;}
ul, li {margin:0;padding:0;_text-align:center;}
li {float:left;width:10%;}
li img {width:90%;}

c est pour ca qu il y a une ligne #logo
je declare les propriétés des li et ensuite je surcharge la propriété de #logo
(l ordre de déclaration est fondamental)

Message cité 1 fois

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

junty

oui mais les attributs Width de img semblent prioritaires sur celui de logo ??? :??: est-ce normal ?

mIRROR a écrit :

c est pour ca qu il y a une ligne #logo
je declare les propriétés des li et ensuite je surcharge la propriété de #logo
(l ordre de déclaration est fondamental)

mIRROR

Chevreuillobolchévik

non ca ne l est pas
et tes screens prouvent que oui

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

probleme redimensionnement image dans un tableau

Sujets relatifs
Problème avec Servlet	[résolu]Problème Carateres japonais UTF8 et IE7 php
[VBA] Existe-t'il une fonction capable de trier un tableau?	Problème redirection 301 htaccess
[ORACLE] Problème de création de clé étrangère	MS-DOS : Boucle For, IF et Find imbriqués, probleme d'affectation
[Resolu] Problème portabilité entre PC sous WinXP	Menu déroulant en JVS: problème d'affichage
[RESOLU] Problème PHP4 --> PHP5	[Résolu][HTML]Problème avec la balise <a href>
Plus de sujets relatifs à : probleme redimensionnement image dans un tableau

Page générée en 0.105 secondes