Discussion :

[zulot]

voila je vous explique j'ai un td dont la taille varie.

Hors le fond est un dégradé, clair sur les cotés foncé au milieu.
donc ma couleur de fond du td est un gris.
mais a gauche et a droite je voudrais que se soit deux image.

Le problème est que je trouve pas comme faire.

Alors si quelqu'un peut m'aider merdi.

[Nesmontou]

J'ai rien compris

[zulot]

je recommence j'ai une case d'un tableau dont la longueur (width) varient.

Le fond de cette case est un dégradé de couleur.

donc je voudrais utilisé comme image de fond 2images en fait.
Le degradé a gauche et le dégradé a droite. et la couleur du milieu en background-color.

Hors le probleme est que j'arrive a affiché qu'une seule image celle de droite ou celle de gauche comme je le veux, mais pas les deux en meme temps.

Comment faire pour placer mes deux images correctement dans ma case de tableau????

[Nesmontou]

Ah OK. Tu peux utiliser la techniques des images coulissantes : http://www.ultra-fluide.com/ressourc...nu-onglets.htm

Dans le lien que je t'ai donné, elle est utilisée pour des onglets mais je pense que tu dois pouvoir l'adapter à ton cas

Bon développement ;-)

[Nesmontou]

Juste une remarque que j'ai oublié de te signaler, actuellement on ne peut pas mettre plusieurs images en background, mais c'est prévu pour le CSS 3 : http://www.w3.org/TR/2005/WD-css3-ba...ckground-image

[zulot]

Ah OK. Tu peux utiliser la techniques des images coulissantes : http://www.ultra-fluide.com/ressourc...nu-onglets.htm

Dans le lien que je t'ai donné, elle est utilisée pour des onglets mais je pense que tu dois pouvoir l'adapter à ton cas

Bon développement ;-)

tres interessant hors moi c'est une case de tableau et pas dans un div. Donc je vois pas trop comment faire.

[spirou]

Salut !!!

Comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<td>
  <div id="imgGauche"></div>
  <div id="imgDroite"></div>
</td>

Et :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
td{
  background: #......;
  height: ..px
 
#imgGauche{
  background: url(....);
  float: left;
}
 
#imgDroite{
  background: url(....);
  float:right;
}

Mettre !important au cas où tes images ne s'affichent pas.

Ca fonctionne parfaitement.

[Nesmontou]

+1 pour spirou

[Loceka]

Tu peux même faire plus simple, pour ne pas perdre de place à cause du deuxième div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
td {
  background-color : #000;
  background-image : url(img1.ext);
  background-repeat : no-repeat;
}
div {
  background-image : url(img2.ext);
  float:right;
}
</style>
...
<td><div>...</div></td>

Bon, esthétiquement c'est pas très beau, je l'accorde, car il y a normalement conflit entre les deux instructions, mais ça fonctionne avec IE6, Opera et Firefox (j'ai pas testé avec autre chose).

Une autre solution, encore moins belle car elle tient compte de l'ordre des instructions, mais qui fonctionne néanmoins :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
td {
  background : url(img1.ext) no-repeat right/left; //indiquer la position float désirée : right ou left.
  background-color : #000; //attention à renseigner la couleur de fond après l'image.
}
div {
  background-image:url(img2.ext);
  float:left/right; //tant qu'à faire, mettre left si on a mis right en haut et vice-versa.
}
</style>
...
<td><div>...</div></td>

[zulot]

Merci merci je vais essayer ca je vous dirais si ca fonctionne pour moi ;-)

[zulot]

Ok la derniere solution fonctionne pour moi merci a vous.

EDIT: euh non j'ai un probleme dans le div l'image n'est pas repeté en hauteur.....

[Loceka]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  background-repeat : repeat-y;

[zulot]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  background-repeat : repeat-y;

non non je l'ai mis ca fonctionne pas.

[spirou]

As tu mis une hauteur à ton div ?

Soit 100% ou la hauteur de ton <td>

[zulot]

exacte je m'en etait apercu c'est ca qui me manquait merci quand meme.

Sinon autre question la c'est un probleme entre firefox et IE pour 2choses totalement differente.

alors :

- j'ai une image de fond de cellule qui sous IE se place parfaitement a gauche, mais sous firefox j'ai le debut de l'image a droitela suite sur la gauche?
C'est quoi se bazard?

-Ensuite j'ai un form mais le probleme c'est que sous IE il prend 40px au moins, en gros j'ai un espace entre le bas de ma cellule saisie et la fin de mon cadre ce qui est pas jolie.
Comment faire pour faire disparaitre cette marge?

-Ah j'ai autre chose, comment ca se fait que la taille des polices sous IE et firefox ne soit pas les meme?