afficher une image via la css

Version imprimable

18/05/2008, 08h33
benkunz

afficher une image via la css
Salut,

Afin d'alléger le chargement d'une page qui contient un grand nombre de fois l'affichage de la meme image, je voudrais passer par les CSS. mais voila, ca me mets en l'air l'affichage quand je passe de :

Code:

<a target='_blank' href='".$url."'><img border='0' src='images/icone.gif'>Icone</a>

à ceci :

Code:

<a target='_blank' href='".$url."'><a class='fileDefault'> </a>Icone</a>

mon fileDefault est défini comme ca :
Code:

1 2 3 4 5 6 7 .fileDefault { height:20px; width:20px; display: block; background-image: url(../images/icone.gif); background-repeat:no-repeat; }
j'ai essayé d'associer mon class='fileDefault' a un lien comme ci dessus, mais aussi à un <p> et un <span> mais à chaque fois mon icone et la mention "Icone" se retrouvent séparé et je veux qu'il reste l'un a coté de l'autre...

Si vous avez des idées, n'hesitez pas.

merci
18/05/2008, 10h20
htr999

salut
dans ton code CSS, essaie d'ajouter

Code:

padding-left: 20px;

et là où tu veux mettre ton icone et le texte, insère comme ceci

Code:

<a target='_blank' href='".$url."' class='fileDefault'>Icone</a>

a+
18/05/2008, 11h17
benkunz

ca marche... mais pas tout le temps :oops:

la petite icone que je veux afficher va dans un cellule d'une table html. Si je ne me sers des css, la taille de la cellule ne pourra jamais etre inférieur au contenu de la cellule. et c'est bien pratique, j'ai pas a m'en soucier. par contre si je passe par la css et class='fileDefault', alors la taille minimale de ma cellule ne tient plus compte de son contenu et ca va plus...
http://img186.imageshack.us/img186/4810/image54us1.png
18/05/2008, 11h35
htr999
salut
j'ai essayé à la volé ceci et justement ça ne marche pas
Code:

1 2 3 <table><tr><td> <a target='_blank' href='".$url."' class='fileDefault'>Icone</a> </td></tr></table>
et puis j'ai ajouté

Code:

style="padding-right: 20px; border: 1px dotted;"

appliquée à chaque TD, ça a l'air de marcher. l'idée est que ton image de Icone fait 20px de width, alors on ajoute 20px de width à droite !.!
Code:

1 2 3 <table><tr><td style="padding-right: 20px; border: 1px dotted;"> <a target='_blank' href='".$url."' class='fileDefault'>Icone</a> </td></tr></table>
tiens moi au courant :P
18/05/2008, 13h01
benkunz

ca deborde toujours...

http://img362.imageshack.us/img362/5633/image55ql0.png

on dirait que la cellule n'a pas connaissance de son contenu quand ca vient d'une CSS... et ca va devenir un vrai casse tete si je dois me préoccuper du contenu pour adapter chaque cellule...

essaie ceci et dis-moi si tu peux l'adapter à ton code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
<head>
<style>
table tr td{
border: 1px dotted #000000;
}
 
td{
padding-right: 10px;
}
 
.fileDefault{
display: block;
background-image: url(bullet-over.gif);
background-repeat:no-repeat;
padding-left: 20px;
}
</style>
</head>
<body>
<table>
<tr>
	<td><a target='_blank' href='".$url."' class='fileDefault'>Icone isifj jql fef</a></td>
	<td><a target='_blank' href='".$url."' class='fileDefault'>Icone</a></td>
</tr>
<tr>
	<td><a target='_blank' href='".$url."' class='fileDefault'>Icone</a></td>
	<td><a target='_blank' href='".$url."' class='fileDefault'>Icones dfs fljskjfds</a></td>
</tr>
</table>
</body>
</html>

j'ai viré les styles des TD et les mettre dans la partie CSS
dans ce cas là c'est plus la peine d'utiliser padding-right, mais pour laisser un peu d'espace, je l'ai mis.
J'ai aussi viré

Code:

1
2
height:20px;
width:20px;

de ta CSS