[CSS] Probleme de background 3 images

Version imprimable

08/01/2006, 13h41
nocy

[Résolu][CSS] Probleme de background 3 images

Bonjour

jai 3 images et je veux les mettres comme background une en top l'autre au milieu, et la derniere en bas, celle du top et du bas sont fixée

[list]
images/top.gif ---> height:8px;
images/bgtb.gif ---> height 100% ( suit le text )
images/bottom.gif --->height:8px;

feuille de style :

#test1 {
background-image:url(images/top.gif) top no-repeat;
background-image:url(images/bgtb.gif) center no-repeat;
background-image:url(images/bottom.gif) bottom no-repeat;
width:250px;
}

Html:
<div id="directory"><a href="#">liens 1</a><br />
<a href="#">liens 2 </a>
</div>

Probleme
rien ne s'affiche, quand je laisse une seule image sans le parametrage ca marche si je la parametre ca ne marche pas c'est pariel pour les deux autres.

J'espere que jai bien expliqué mon probleme, merci d'avance :wink:[/b]
08/01/2006, 15h30
Nesmontou

Salut, pour l'instant impossible de mettre 3 images en background avec le css, mais ça ne devrait plus tarder avec css3 : http://www.w3.org/TR/2005/WD-css3-ba...ckground-image

Pour l'instant, tu peux mettre tes images dans des div que tu positionnes comme tu veux et tu joues avec les z-index

Bon développement ;-)
08/01/2006, 16h33
nocy

Salut Nesmontou

Merci de votre message,
c'est des informations que j'ignorais, c'est normalement chui encore débutant, et c'est ma premiere fois ici, merci pour l'information.

en passant, voici en [html]
le tableau que je veuxréalisé, peut etre qu'il y en a d'autre façon d'ecrire ca en [css].

<table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250" height="8" style="background-image:url(images/top.gif);background-repeat:repeat-x;"></td>
</tr>
<tr>
<td width="250" style="background-image:url(images/bgtb.gif); background-repeat:repeat-y; width:250px;">a href="#">liens 1</a><br />
<a href="#">liens 2 </a></td>
</tr>
<tr>
<td width="250" height="8" style="background-image:url(images/bottom.gif);background-repeat:repeat-x;"></td>
</tr>
</table>

merci :wink:

Comme ca : :?:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#top {
background-image:url(images/top.gif) no-repeat;
width:250px;
height:8px;
} 
 
#center {
background-image:url(images/bgtb.gif) no-repeat;
width:250px;
} 
 
#bottom {
background-image:url(images/bottom.gif) no-repeat;
width:250px;
height:8px;
}

Code:

1
2
3
4
5
6
7
8
<div id="top"></div>
 
<div id="center">
  <a href="#">lien 1</a><br />
  <a href="#">lien 2 </a>
</div>
 
<div id="bottom"></div>

08/01/2006, 17h12
nocy

Salut ghostdogpr

merci pour votre réponce, cest ske je voulais faire :wink:

mais j'ai du apporter quelque modifications les voici :

#top {
background-image:url(images/top.gif);
background-repeat:no-repeat;
width:250px;
height:8px;
}
#center {
background-image:url(images/bgtb.gif);
background-repeat:repeat-y;
text-align:center;
width:250px;
}

#bottom {
background-image:url(images/bottom.gif);
background-repeat:no-repeat;
width:250px;
height:8px;
}

je ne sais pas pourquoi quand je fait : background-image:url(images/top.gif) no-repeat; no-repeat dans la meme ligne que background ca n'affiche rien (page blanche) es-que c'est du au browser IE et FireFox ou a mon editeur Dreamweaver 8 fr ??