Sujet Précédent Sujet Suivant

Problème CSS (bordures div avec des images)

Résolu/Fermé
Xogno - 2 janv. 2011 à 18:13
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 2 janv. 2011 à 20:55
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
2 janv. 2011 à 19:53
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
Modifié par Xogno le 2/01/2011 à 20:49
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 2/01/2011 à 20:58
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 vendredi 29 mai 2009 Statut Membre Dernière intervention 19 février 2011 444
2 janv. 2011 à 19:05
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
2 janv. 2011 à 20:48
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
code couleur associé a une image
magic charly -
pandora -

9 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

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

2 réponses