probleme redimensionnement image dans un tableau

Marsh Posté le 29-06-2008 à 03:10:52

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

Reply

Marsh Posté le 29-06-2008 à 03:10:52

Reply

Marsh Posté le 29-06-2008 à 08:58:24

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

Reply

Marsh Posté le 29-06-2008 à 11:42:14

mIRROR a écrit :

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

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>

Reply

Marsh Posté le 29-06-2008 à 12:45:13

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

Reply

Marsh Posté le 29-06-2008 à 14:07:51

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...

Reply

Marsh Posté le 29-06-2008 à 14:08:15

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>

Reply

Marsh Posté le 29-06-2008 à 14:18:10

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

Reply

Marsh Posté le 29-06-2008 à 14:24:23

mIRROR a écrit :

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 ?

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 !!

Reply

Marsh Posté le 29-06-2008 à 14:33:33

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

Reply

Marsh Posté le 29-06-2008 à 14:38:53

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

Reply

Marsh Posté le 29-06-2008 à 14:38:53

Reply

Marsh Posté le 29-06-2008 à 15:01:09

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>

Reply

Marsh Posté le 29-06-2008 à 15:05:10

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

Reply

Marsh Posté le 29-06-2008 à 15:13:39

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

Reply

Marsh Posté le 29-06-2008 à 15:38:37

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

Reply

Marsh Posté le 29-06-2008 à 15:43:04

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

Reply

Marsh Posté le 29-06-2008 à 16:48:13

mIRROR a écrit :

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

ca ne marche paS ...

Comment remplacer le frameset ? que suggeres tu ?

Reply

Marsh Posté le 29-06-2008 à 17:12:51

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

Reply

Marsh Posté le 29-06-2008 à 17:14:44

ok je vais chercher de ce coté alors.

merci pour ton aide !!!

mIRROR a écrit :

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] )

Reply

Marsh Posté le 29-06-2008 à 18:01:49

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 :

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é 1 fois

Reply

Marsh Posté le 29-06-2008 à 18:04:51

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%;}

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" ?

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

Reply

Marsh Posté le 29-06-2008 à 18:07:44

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)

Reply

Marsh Posté le 29-06-2008 à 18:10:36

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

Reply

Marsh Posté le

Reply

probleme redimensionnement image dans un tableau

Sujets relatifs:

Leave a Replay