Je suis en train de faire un site et pour l'esthétique, ej veux faire des cadres avec des bords ombrés, j'utilise alors des images mais...
une fois mon code (x)html et css fait, les bords ne s'affichent toujours pas :/
Par contre si j'utilise la fonction "éditer les CSS" du module Web Developper de Firefox,
ca s'affiche comme ca devrait --.
est-ce que quelqu'un saurait trouver la solution ?
Voici mon code (x)html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hoebeke J. - Site personnel - Acceuil</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="scripts/design1.css" rel="stylesheet" type="text/css"> <script src="scripts/animfunctions-versionMODIFIEEyoupie-copie3.js" type="text/javascript"></script> </head> <body > <div id="menu"> <img src="menu.png" alt="menu"/> </div> <div id="gallerie"> <div id="gallerie_images"> <div class="gallerie_cadres"> <div class="hg"></div> <div class="haut"></div> <div class="hd"></div> <div class="gauche"></div> <div class="contenu">Ici, c'est le contenu du cadre !</div> <div class="droite"></div> <div class="bg"></div> <div class="bas"></div> <div class="bd"></div> </div> </div> </div> </body> </html>
-----------------------
code CSS:
#resizercontainer
{
width:200px;
padding:15px;
border:solid black 1px;
margin:auto;
}
.elem-container
{
width:60px;
height:60px;
position:relative;
top:0;
bottom:0;
left:0;
margin:10px;
padding:0px;
background-color:gray;
}
body
{
margin:0;
cursor:auto;
}
#menu
{
margin:auto;
width:730px;
height:88px;
}
.gallerie_cadres {
width: 500px;
height: 500px;
}
.hg, .hd, .bg, .bd {
width: 16px;
height: 13px;
}
.haut, .bas {
width: 100px;
height: 13px;
}
.gauche, .droite {
width: 16px;
height: 100px;
background-repeat:repeat-y;
}
.contenu {
width: 100px;
height: 100px;
background-color:#555555;
}
.gallerie_cadres div { float: left; } /* S'apllique à tous les divs de .gallerie_cadres */
.hg, .gauche, .bg { clear: left; } /* Pour passer outre le float des blocs précédents */
.hg
{
background-image:url('coin-haut-droit.png');
}
.hd
{
background-image:url('coin-haut-gauche.png');
}
.bg
{
background-image:url('coin-bas-gauche.png');
}
.bd
{
background-image:url('coin-bas-droit.png');
}
.haut
{
background-image:url('bord-haut.png');
}
.bas
{
background-image:url('bord-bas.png');
}
.droite
{
background-image:url('bord-droit.png');
}
.gauche
{
background-image:url('bord-gauche.png');
}
-------
Voila.. j'espère que vous pourrez m'aider.
Merci d'avance !
Xogno
PS: voici un lien où vous pouvez voir que les bords ne s'affichent pas mais avec le module Web Developper, lorsqu'on utilise "Editer les CSS", ils s'affichent..
http://share_spot.byethost13.com/test%20site%20JESS/
Ça marche :)
Donc en fait lorsqu'ils sont dans le même dossier il faut mettre "../" ?
C'est donc different des balises "img" où src="nomimage.png" suffit ?