Cellule d'un tableau avec image étirable en background ?

Cellule d'un tableau avec image étirable en background ? - HTML/CSS - Programmation

Marsh Posté le 10-04-2006 à 18:49:13    

Bonjour à tous,
 
voici ce que j'ai :
 
une image de 100x100 "monimage.jpg"
un tableau à 4 cellules :
Une cellule fait 200x150, une autre 200x250
L'autre 50x150 et la dernière 50x250
 
 
Ce que je veux :
je veux que l'image de 100x100 s'adapte a la taille de chaque cellule.
je ne veux PAS simplement mettre l'image ! Je veux qu'elle soit en arrière plan pour y mettre du texte devant ! (donc a priori src img="monimage.jpg" avec height et width ne me convient pas)
 
Donc comment mettre une image en arrière plan avec une taille différente ? (je ne veux pas couper l'image ni la mettre plusieurs fois, je veux l'image qui s'adapte et se déforme)
 
Merci à vous !
 

Reply

Marsh Posté le 10-04-2006 à 18:49:13   

Reply

Marsh Posté le 10-04-2006 à 18:53:46    

On utilise pas des tableaux pour la mise ne page, On utilise pas des tableaux pour la mise ne page, On utilise pas des tableaux pour la mise ne page.
 
Bon alors fait avec des div, et met tom image en background. dans le css ;)
 
Si tu comprends rien à ce que je dis :D, n'est pas peur et lis :
 
www.alsacreations.com
www.openweb.eu.org
www.csszengarden.com


Message édité par xtof_83 le 19-04-2006 à 02:11:06
Reply

Marsh Posté le 10-04-2006 à 19:02:40    

Nan, il veut pas qu'elle tile il veut qu'elle s'étire. ;)
 
Si ma mémoire est bonne y'a pas de vrai solution propre à ce pb mais tu peut essayer un truc :
- mettre ton image dans la cellule en position:absolute;width:100%;height:100%;
- mettre ton texte dans un div que tu positionne par dessus ton image a coup de z-index.

Message cité 1 fois

---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 10-04-2006 à 19:24:56    

0x90 a écrit :

Nan, il veut pas qu'elle tile il veut qu'elle s'étire. ;)
 
Si ma mémoire est bonne y'a pas de vrai solution propre à ce pb mais tu peut essayer un truc :
- mettre ton image dans la cellule en position:absolute;width:100%;height:100%;
- mettre ton texte dans un div que tu positionne par dessus ton image a coup de z-index.


 
ça va faire moche  [:jocenbsp]  
 
Mais tu as raison c'est ce qu'il veut...

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 19:27:22    

xtof_83 a écrit :

ça va faire moche  [:jocenbsp]  
 
Mais tu as raison c'est ce qu'il veut...


 
 
Ouais c'est rarement joli le resize mais bon :/
( j'ai une autre idée qui rendra joli, mais qui peut tuer le serveur sur place, à chaque resize tu va demander au serveur ( à coup de js ) de génerer l'image à la bonne taille ( à grand coup de gd ) à partir d'une version haute résolution .... :D )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 10-04-2006 à 19:36:37    

et je pense pas que ce soit du niveau de la personne qui a écrit ce sujet ;)

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 20:29:35    

xtof_83 a écrit :

et je pense pas que ce soit du niveau de la personne qui a écrit ce sujet ;)


 
J'ai beau avoir essayé d'être clair dans mon topic pour ceux qui ont du mal à comprendre... Et ba ça a pas raté... yen a un qui n'a pas suivi.
 
... qui a parlé de mise en page ?
 
En gros je veux générer une page html de ce genre :
 
http://www.hylcd.com/images/roadmap.gif
 
Je passe des noms et des dates en entrée, le tout ressortirait une roadmap de ce genre.
Chaque flèche serait donc une cellule d'une table avec un fond en forme de "===>" qui s'étirerait plus ou moins en largeur (durée) et longueur (importance).
 
J'ai tenté rapidement avec background-image et background-size sans succès, je dois sûrement mal m'y prendre...

Reply

Marsh Posté le 10-04-2006 à 20:47:30    

background-size ça n'existe pas
ensuite il est impossible d'etirer une image de fond
 
sinon tu pourrait très bien avoir le corps de la flèche en tant que background et le bout de la flèche en tant qu'image

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 21:03:07    

Je vois mal ton truc dans un tableau ;)
 
surtout si les fleches s'enchevetrent. et plus dans ce qu'a dis Gat...

Reply

Marsh Posté le 10-04-2006 à 21:13:29    

gatsu35 a écrit :

background-size ça n'existe pas
ensuite il est impossible d'etirer une image de fond
 
sinon tu pourrait très bien avoir le corps de la flèche en tant que background et le bout de la flèche en tant qu'image


 
Ouais mais les fleches peuvent avoir une largeur différente... et si la flèche est super courte (plus courte que le bout de la flêche... :/)
 
Pour le background-size c'est en css que je l'ai trouvé : http://www.w3.org/TR/2002/WD-css3-background-20020802/
 
Sinon les fleches ne vont pas s'enchevetrer ! C'est simple avec une couleur de fond ca marche, je veux remplacer la couleur de fond par une fleche c tout...
 
 
merci d'avance

Message cité 1 fois
Reply

Marsh Posté le 10-04-2006 à 21:13:29   

Reply

Marsh Posté le 10-04-2006 à 21:16:22    

pyrojb a écrit :

Ouais mais les fleches peuvent avoir une largeur différente... et si la flèche est super courte (plus courte que le bout de la flêche... :/)
 
Pour le background-size c'est en css que je l'ai trouvé : http://www.w3.org/TR/2002/WD-css3-background-20020802/
 
Sinon les fleches ne vont pas s'enchevetrer ! C'est simple avec une couleur de fond ca marche, je veux remplacer la couleur de fond par une fleche c tout...
 
 
merci d'avance


La seule norme CSS supportée par tous les navigateurs est la CSS2 et encore IE6 ne supporte qu'une infime partie des CSS2.
donc pour les CSS3 tu peux encore te brosser pendant au moins 3 ans minimum et encore je suis généreux.

Reply

Marsh Posté le 10-04-2006 à 21:17:21    

:(
merci de l'info, je pensais aussi que ca venait de là...
 
sinon c'est pas faisable ?

Reply

Marsh Posté le 10-04-2006 à 21:21:51    

javascript :D

Reply

Marsh Posté le 10-04-2006 à 21:23:31    

sinon des <img> placés en CSS (style="" )
et en absolute, sans oublié de placer ton bloc parent en position:relative.

Message cité 2 fois
Reply

Marsh Posté le 10-04-2006 à 21:30:03    

gatsu35 a écrit :

sinon des <img> placés en CSS (style="" )
et en absolute, sans oublié de placer ton bloc parent en position:relative.


 
et tu peux mettre du texte par dessus ? (pas en balise alt... je veux pouvoir imprimer le tout...)

Reply

Marsh Posté le 10-04-2006 à 21:32:03    

gatsu35 a écrit :

sinon des <img> placés en CSS (style="" )
et en absolute, sans oublié de placer ton bloc parent en position:relative.


 
Mmm... je fais comment pour mettre du texte dessus ? Ca ne résoud pas le pb pour autant. Je me trompe ?
Tu implémenterais ca comment ?

Reply

Marsh Posté le 10-04-2006 à 22:12:22    

Je l'ai déja dit, en la mettant en absolut et jouant avec les z-index.
 
Sinon jviens de bidouiller ca, c'est perfectible mais y'a une idée pour tes flèches je pense ;)
http://deuxfleurs.org/stuff/arrow/arrows.html
( déja le 1er truc à perfectionner c'est utiliser un gif transpa pour éviter d'utiliser un png transparent sous IE, ou alors de choisir une fois pour toute la couleur de la flêche )


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 10-04-2006 à 22:23:38    

merci bcp, je regarderai tout ca demain.
N'hésitez pas à répondre si jamais vous avez d'autres suggestions !
 
:jap:

Reply

Marsh Posté le 11-04-2006 à 12:33:40    

Code :
  1. <div id="test"></div>
  2. <script>
  3. <!--
  4. function fleche(inid,width,height,color)
  5. {
  6.   var t=document.createElement('div');
  7.   t.style.width=width+'px';
  8.   t.style.height=height+'px';
  9.   height=height/2;
  10.   var r=width/height;
  11.   for(y=0;y<height;y++)
  12.   {
  13.     var l=document.createElement('div');
  14.     l.style.width=(y*r)+'px';
  15.     l.style.height='1px';
  16.     l.style.background=color;
  17.     t.appendChild(l);
  18.   }
  19.   for(y=height;y>0;y--)
  20.   {
  21.     var l=document.createElement('div');
  22.     l.style.width=(y*r)+'px';
  23.     l.style.height='1px';
  24.     l.style.background=color;
  25.     t.appendChild(l);
  26.   }
  27.   document.getElementById(inid).appendChild(t);
  28. }
  30. fleche('test',150,100,'#0000FF');
  32. -->
  33. </script>


Message édité par nargy le 11-04-2006 à 12:50:40
Reply

Marsh Posté le 11-04-2006 à 12:39:03    

Génial, c'est dépendant de javascript et c'est nettement plus lourd :/


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 11-04-2006 à 12:52:14    

hehe, moins lourd que la méthode de resize via le serveur :)

Reply

Marsh Posté le 11-04-2006 à 13:03:24    

Mais plus que la methode avec les 3 <div>, surtout qu'au lieu d'une image d'un pixel t'aurais pu mettre un <div> avec une background-color ;)


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
Reply

Marsh Posté le 11-04-2006 à 13:06:01    

ouais, j'ai changé

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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