[CSS] Affichage d'images sous Firefox & IE

**Flushovsky** · 12/06/2005, 12h22

Bonjour,

J'essaye de faire un tableau avec des coins arrondis dont les images sont appelées en CSS (voir exemple sur mon site : www.aubault.com ) Pour l'instant elles sont comprises dans le code html. Mais j'aimerais les sortir du code en utilisant une feuille de style css.

Mais lorsque je fait appel à des images à partir du CSS, rien ne s'affiche.

Voici le code html que j'utilise et la feuille de style qui lui est dédiée :

HTML :

<html>
<head>
<link href="images/test.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#000000">
<table width="30%">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="topleft"></td>
<td class="infoBoxHeading" align="center">CONNEXION</td>
<td class="topright"></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="1" class="infoBox">
<tr>
<td class="boxText" valign="middle">
<table width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
<tr>
<td width="910" height="50" valign="middle" class="boxText"><br><img src="images/puce.png"> <a href="zone_pro/auth_pro.php" target="_self">Section Pro.</a><br><br><img src="images/puce.png"> <a href="zone_privee/auth_prive.php" target="_self">Section Privée</a><br><br></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bottomleft"></td>
<td class="bottomcenter"></td>
<td class="bottomright"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Le CSS :

.body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color : #FFFFFF;
background: #000000;
}

.bgimage {
background-image : url(images/fond.jpg);
background-repeat : no-repeat ;
background-position: top right;
background-attachment : fixed ;
}

.infoBox {
background: #FFFFFF;
}

.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #FFFFFF;
color: #000000;
}

.infoBoxContents {
font-family: Verdana, Arial, sans-serif; font-size: 12px;
color: #FFFFFF;
background: #0052C7;
}

.infoBoxFooter {
font-family: Verdana, Arial, sans-serif; font-size: 10px;
color: #FFFFFF;
background: #0052C7;
height: 8px;
}

/* propriétés communes à l'ensemble des 4 coins */
.topleft, .topright, .bottomleft, .bottomright {
height: 18px; width: 8px;
background-repeat: no-repeat;
font-size:1px; /* correction d'un bug IE */
}

/* propriétés spécifiques à chaque coin */
.topleft {
background-image:url(images/topleft.gif);
}

.topright {
float: right;
background:url(images/topright.gif);
}

.bottomleft {
background:url(images/bottomleft.gif);
}

.bottomcenter {
background:url(images/bottomcenter.gif);
}

.bottomright {
float: right;
background: url(images/bottomright.gif);
}

Quelqu'un aurait une idée sur ce qui ne va pas ?

Merci

**ilood** · 12/06/2005, 12h36

A première vue c'est un problème de chemin.

Code :

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

<link href="images/test.css" rel="stylesheet" type="text/css">

Avec cette ligne tu declares que ta feuille de style se trouve dans le repertoire images.

Ensuite dans ta feuille de style

Code :

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

background-image : url(images/fond.jpg);

Tu declares que fond.jpg se trouve dans le repertoire images. (qui serait un sous repertoire du rep. qui accueille ta feuille de style). En clair d'apres ta déclaration tu as /images/images/fond.jpg.

Tu as deux solution. Tu mets la feuille de style test.css dans le dossier parent de images OU tu suprimes images/ dans ta feuille de style