afficher une image via la css

**benkunz** · 18/05/2008, 08h33

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 :

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

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

à ceci :

Code :

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

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

mon fileDefault est défini comme ca :

Code :

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

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

**htr999** · 18/05/2008, 10h20

salut
dans ton code CSS, essaie d'ajouter

Code :

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

padding-left: 20px;

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

Code :

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

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

a+

**benkunz** · 18/05/2008, 11h17

ca marche... mais pas tout le temps

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

**htr999** · 18/05/2008, 11h35

salut
j'ai essayé à la volé ceci et justement ça ne marche pas

Code :

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

1
2
3
<table><tr><td>
<a target='_blank' href='".$url."' class='fileDefault'>Icone</a>
</td></tr></table>

et puis j'ai ajouté

Code :

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

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 :

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

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

**benkunz** · 18/05/2008, 13h01

ca deborde toujours...

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

**htr999** · 18/05/2008, 13h22

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

Code :

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

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 :

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

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

de ta CSS

afficher une image via la css

CSS

Vue hybride

Discussions similaires

Partager

Partager