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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Cellule d'un tableau avec image étirable en background ?

pyrojb

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 !

Publicité

xtof_83

Freeride Spirit

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

0x90

→

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.

xtof_83

Freeride Spirit

0x90 a écrit :

ça va faire moche [:jocenbsp]

Mais tu as raison c'est ce qu'il veut...

Message cité 1 fois

0x90

→

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

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

xtof_83

Freeride Spirit

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

Message cité 1 fois

pyrojb

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 :

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

gatsu35

Blablaté par Harko

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

xtof_83

Freeride Spirit

Je vois mal ton truc dans un tableau

surtout si les fleches s'enchevetrent. et plus dans ce qu'a dis Gat...

pyrojb

gatsu35 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

Message cité 1 fois

Publicité

gatsu35

Blablaté par Harko

pyrojb a écrit :

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.

pyrojb

merci de l'info, je pensais aussi que ca venait de là...

sinon c'est pas faisable ?

xtof_83

Freeride Spirit

javascript

gatsu35

Blablaté par Harko

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

pyrojb

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

pyrojb

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 ?

0x90

→

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.

pyrojb

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

:jap:

nargy

Code :

<div id="test"></div>
<script>
<!--
function fleche(inid,width,height,color)
{
var t=document.createElement('div');
t.style.width=width+'px';
t.style.height=height+'px';
height=height/2;
var r=width/height;
for(y=0;y<height;y++)
{
var l=document.createElement('div');
l.style.width=(y*r)+'px';
l.style.height='1px';
l.style.background=color;
t.appendChild(l);
}
for(y=height;y>0;y--)
{
var l=document.createElement('div');
l.style.width=(y*r)+'px';
l.style.height='1px';
l.style.background=color;
t.appendChild(l);
}
document.getElementById(inid).appendChild(t);
}
fleche('test',150,100,'#0000FF');
-->
</script>

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

0x90

→

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.

nargy

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

0x90

→

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.

nargy

ouais, j'ai changé

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
javascript:history.back et image	Soucis avec un tableau simple
associer un texte à une image dans une galerie photo	lien image dans db sql please
Tableau dynamique et tri	[RESOLU] créer un tableau dynamique en php
Tableau : drole de problème Help please	[java]Edition de cellule d'un jTable
CSS et impression de tableau scrollé.	Stocker la valeur des registres dans un tableau
Plus de sujets relatifs à : Cellule d'un tableau avec image étirable en background ?

Page générée en 0.063 secondes