Problème CSS (bordures div avec des images)

Résolu
Xogno -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour,

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 voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

c est les chemins vers les images en CSS qui sont errones !

remplace les par 

.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'); 
}


A+
1
Xogno
 
MERCI ! :D
Ç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 ?
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
c est le chemin par rapport a l endroit ou ce trouve ta feuille CSS et pas a la page html ,puisque ces sur la CSS que tu met les chemins vers les images ;-))
0
Réponse 2 / 3
FairyNess Messages postés 215 Date d'inscription   Statut Membre Dernière intervention   446
 
si tu met un background-color (n'importe quelle couleur) au lieu d'un background-image histoire de tester, ça fonctionne ?

Le site est-il accessible en ligne ?
0
Réponse 3 / 3
Xogno
 
oui ca fonctionne

pour le site que j'ai mis il est accessible ici http://share_spot.byethost13.com/test%20site%20JESS/
je sais pas si c'est ça que tu veux dire par "accessible en ligne ?"
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
Superposé photo avec transparence
minime17 -
moiii -

12 réponses
Photoshop / Visualisation des pixels
Anthony -
Anthony -

2 réponses