taille d'image
taille d'image - HTML/CSS - Programmation
Marsh Posté le 08-07-2005 à 15:28:32
Tu appelles les soeurs haliwell, sinon en les redimmensionnant tu as la solution PHP/GD, mais faut que ton hébergeur le propose.
---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Marsh Posté le 08-07-2005 à 15:33:06
Si tu redimensionnes ton image "dynamiquement" en fonction de la définition de l'écran du visiteur, saches que ton image sera de mauvaise qualité.
Il vaut mieux, ou prendre un motif qui boucle (sans que cela ne se voit trop), ou mettre ton image une seule fois avec ses bords qui partent en fondu vers la couleur de background choisie.
C'est mon avis.
Message édité par Beral2 le 08-07-2005 à 15:35:48
Marsh Posté le 11-07-2005 à 08:52:38
Et bien j'ai trouvé avec une image "elastique" sur internet
ça marche pas mal pour mes fotos.
Beral2 c koi tonidée de motif qui boucle ?
Merci
Marsh Posté le 11-07-2005 à 16:30:58
Une "vraie" texture, du genre granulé, sable, paille, pierre... le tout très léger, peu contrasté et clair pour ne pas amoindrir la lisibilité du contenu (qui reste l'essentiel).
Pour le bouclage, utilise le filtre Photoshop Other/offset "Wrap around" puis le tampon. Ce "filtre" qui est plutôt un décalage de l'image doit certainement exister dans d'autres logiciels.
Marsh Posté le 12-07-2005 à 09:20:36
| Beral2 a écrit : Une "vraie" texture, du genre granulé, sable, paille, pierre... le tout très léger, peu contrasté et clair pour ne pas amoindrir la lisibilité du contenu (qui reste l'essentiel). |
Oui c'est vrai ca peut etre plus joli une texture vrai. as tu des examples de sites ?
Mais je voudrais que les images de ma page soit ajustées en taille en fonction de la résolution de l'écran ! j'arrive à la faire avec une photo seul (via le style #photo
{ width: 100%;
height: auto;}
mais j'arrive pas a faire cela avec la page que j'ai faite ci-desous.
Alors a votre bon coeur 
MErci
MaDe
code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Avion ...</title>
<style type="text/css">
#scrollbox {width:100px; height:100px; margin-left:18px; background:#ffe; overflow:auto; border:1px solid #aaa;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:2px; float:left;}
a.slidea {background:url(thumb/t_PICT0008.jpg);}
a.slideb {background:url(thumb/t_PICT0009.jpg) ;}
a.slidec {background:url(thumb/t_PICT0010.jpg) ;}
.slidek {display:block; position:absolute; width:400px; height:250px; top:44px; left:18px; padding:0; border:1px solid #000;}
a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block ; position:absolute; width=675; height:506px; top:75px; left:240px; padding:20px; font-style:italic; color:#000; background:#fff;}
#thumbs {width:169; height:40px;}
#photo
{ width: 100%;
height: 100%;
}
#photo1
{ width: 100;
height: 75;
}
</style>
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#A1A5A9" vlink="#A1A5A9" alink="#666666">
<table border="0" width="95%" cellspacing="1" >
<tr>
<td width="40%" valign="middle" height="30" ><h1 align="center">Avion</h1></td>
<td width="60%" valign="middle" align="right"><INPUT TYPE="submit" VALUE="Page prédédente" onclick='history.go(-1)'></td>
</tr>
</table>
<div align="left">
<table border="4" bordercolor="#FFFFFF" cellpadding="2" height="464" width="187">
<tr>
<td width="169" align="center" height="456"><div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Avion" id="photo1"><span><img src="original/PICT0008.jpg" alt="Avion" title="Avion" id="photo"/><br />Avion<br />MaDe</span></a>
<a class="gallery slideb" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0009.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>
<a class="gallery slidec" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0010.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Marsh Posté le 12-07-2005 à 14:30:25
Les gens comprendront-ils un jour l'avantage d'user et d'abuser de [code ][ /code] ?
On se le demande ...
---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Marsh Posté le 13-07-2005 à 09:17:56
ca rend le bordel lissible ...
Code :
|
Marsh Posté le 13-07-2005 à 09:54:45
oui c vrai c un peu plus lisible, enfin j'ai toujours pas trouvé ma solution, et comme je suis nul c pas gagné
Marsh Posté le 13-07-2005 à 10:06:56
Le code HTML est complètement érroné :
- attribut xmlns et xml:lang sur l'élément html, alors que la DTD est de type HTML4
- attribut lang sur html qui indique une langue anglaise, alors que y'a du français partout
- css dans l'html -> à mettre dans fichier séparé
- attribut n'existant plus sur body : bgcolor, text, etc... Ca sert à quoi d'utiliser du CSS si c'est pour mettre des machins obsolètes ?
- tableau de mise en page
- Lien vers page précédente ultra-douteux (basé sur JS, pas bien)
- Attributs obsolètes sur div et table (align, bordercolor). Pareil, CSS CSS CSS
- img avec id pareil (photo1) : un id doit être unique sur tout le document, on ne peut pas avoir plusieurs éléments avec un même id
Donc corrige déjà tout ça, allège un peu la structure, et après on verra
Marsh Posté le 13-07-2005 à 10:59:30
oula trop cho pour moi, je crois je vais lacher l'affaire. et faire un truc plutot basique
Sujets relatifs:
- Inserer une image HTML qui ne doit pas dépasser une certaine taille...
- [javascript] Taille d'une image
- [Javascript] Ouvrir une image dans une popup de même taille
- Taille d'une image
- Taille de l'Image en Gardant Proportions
- taille d'une image
- Taille Image
- [prog simple] Petit prog pour changer auto la taille d'une image
- taille d'image pour fonction PHP
Marsh Posté le 08-07-2005 à 14:19:40
Bonjour, je fait un site wbe et je voulais qu emes image soit visible sur tout la page qque soit la resoltuin , c'est a dire sans les redimensionner avant a une taille type.
Merci