Couper la fin d'une image dans une table pour faire une barre de % ?

Couper la fin d'une image dans une table pour faire une barre de % ? - HTML/CSS - Programmation

Marsh Posté le 11-11-2004 à 15:16:49    

Voilà, je voudrais pouvoir couper la fin d'une image afin d'obtenir par exemple ceci :
http://moncobaye.free.fr/barre2.jpg
à partir de cette image :
http://moncobaye.free.fr/barre.jpg
 
j'ai essayé comme ceci :

Code :
  1. <table width="200" border="1">
  2.   <tr>
  3.     <td width="40">
  4.       <img src="images/interface/barre.jpg" height="7">
  5.     </td>
  6.     <td width="160">
  7.       &nbsp;
  8.     </td>
  9.   </tr>
  10. </table>


 
Comment puis-je faire ça ?
 
Merci d'avance :jap:


Message édité par nero27 le 11-11-2004 à 15:22:54
Reply

Marsh Posté le 11-11-2004 à 15:16:49   

Reply

Marsh Posté le 11-11-2004 à 15:47:18    

:bounce:

Reply

Marsh Posté le 11-11-2004 à 16:10:24    

Code :
  1. <div style="width: 200px; border: 1px;">
  2.   <div style="overflow: hidden; width: 40px;">
  3.     <img src="images/interface/barre.jpg" height="7" alt="Progression : 20%">
  4.   </div>
  5. </div>


Message édité par antp le 11-11-2004 à 16:11:42

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 11-11-2004 à 17:44:12    

curiosité: c'est quoi le vrai besoin? ça serait pas plus simple et sobre de faire ça en monochrome? [:joce]


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 11-11-2004 à 21:42:41    

antp a écrit :

Code :
  1. <div style="width: 200px; border: 1px;">
  2.   <div style="overflow: hidden; width: 40px;">
  3.     <img src="images/interface/barre.jpg" height="7" alt="Progression : 20%">
  4.   </div>
  5. </div>




:hello:
Merci, je vais essayer ça ;)
 

the real moins moins a écrit :

curiosité: c'est quoi le vrai besoin? ça serait pas plus simple et sobre de faire ça en monochrome? [:joce]


Plus simple, mais pas adapté :o


Message édité par nero27 le 11-11-2004 à 21:43:07
Reply

Marsh Posté le 11-11-2004 à 21:50:39    

ben je dis pas, mais jme demandais à quoi ça pouvait servir... en gros à voir dans quoi ça s'integrait :p


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 11-11-2004 à 21:57:00    

the real moins moins a écrit :

ben je dis pas, mais jme demandais à quoi ça pouvait servir... en gros à voir dans quoi ça s'integrait :p


En fait, c'est pour indiquer le niveau de vie d'une bete dans un site ludique ;)
 
Sinon, Antp, ça fonctionne, mais est-ce que tu pourrais me commenter ce que chaque ligne fait que je puisse bien l'intégrer STP ?
(Je suis pas très fort en <div> :whistle:)


Message édité par nero27 le 11-11-2004 à 21:57:17
Reply

Marsh Posté le 11-11-2004 à 22:14:03    

un div c'est juste un bloc neutre (une table normalement c'est pour présenter des données sous forme de tableau :o)
 
au premier je donne une largeur de 200px et un bord de 1px
au second je donne une largeur de 40px et je lui dis que tout ce qui dépasse (overflow) doit être tronqué (hidden)
 
et l'image j'ai rajouté le "alt" qui est normalement obligatoire et qui doit indiquer un contenu alternatif à l'image si elle a une quelconque utilité visuelle (dans ce cas-ci elle sert à montrer la progression)
on pourrait lui ajouter un "title" pour une infobulle...


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 11-11-2004 à 22:24:16    

antp a écrit :

un div c'est juste un bloc neutre (une table normalement c'est pour présenter des données sous forme de tableau :o)
 
au premier je donne une largeur de 200px et un bord de 1px
au second je donne une largeur de 40px et je lui dis que tout ce qui dépasse (overflow) doit être tronqué (hidden)
 
et l'image j'ai rajouté le "alt" qui est normalement obligatoire et qui doit indiquer un contenu alternatif à l'image si elle a une quelconque utilité visuelle (dans ce cas-ci elle sert à montrer la progression)
on pourrait lui ajouter un "title" pour une infobulle...


Ok, merci beaucoup pour ton aide :jap:
(Va falloir que je m'intéresse de plus prêt aux <div> :D )
[:neowen]


Message édité par nero27 le 11-11-2004 à 22:42:43
Reply

Marsh Posté le 11-11-2004 à 23:01:08    

nero27 a écrit :

Ok, merci beaucoup pour ton aide :jap:
(Va falloir que je m'intéresse de plus prêt aux <div> :D )
[:neowen]


les <div> ne sont "que" l'une des briques utilisées dans la conception moderne de sites web [:cupra]


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

Marsh Posté le 11-11-2004 à 23:01:08   

Reply

Marsh Posté le 12-11-2004 à 01:54:37    

Masklinn a écrit :

les <div> ne sont "que" l'une des briques utilisées dans la conception moderne de sites web [:cupra]


Oui, je sais bien, mais je suis encore de la vieille école : j'ai appris le HTML en 98 !!!
pfioun y'a du travail à rattrapper :p

Reply

Sujets relatifs:

Leave a Replay

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