je veux mourrir : css et background-image

**gonnarule** · 06/03/2006, 02h12

Bonjour tous !

voila bien 4heures (oui .. je suis tres persévérant) que je plante sur un problème...

Je voudrais sur mon site web afficher une ombre de chaque coté de mon div "contenu" (genre comme un peu bcp de sites en fait).
Donc je crée 2 div, 1 a gauche et 1 a droite de ma div "contenu" et j'y mets ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
.ombregauche {
position:absolute;
left:49px;
margin-top:-13px;
background:background-image;
background-image:url('images/ombreg.png');
background-repeat:repeat-y;
background-position:top left;
min-height:100%;
width:49px;
}

Mon ombre.png a une petite hauteur, donc je la repete en y sur toute la hauteur de mon document.

Je travaille avec Firefox 1.5 et webdevelopper, afin d'éditer ma css directement sous firefox (et quand j ai trouvé les bons réglage hop copié collé dans mon éditeur css).
Le truc, c que mon aspect est ok sous firefox AVEC webdevelopper en route (quand j edite la css).. mais des que je le ferme, nada, quetch, hop disparu l'ombre... (c la que je pleure).

Pour ceux qui veulent, voici le code de ma page, valide XHTML transi / strict (quoi que avec toutes les modif que j essai ptetre plus.. bref..)

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
 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
<title>gonnarule.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
 
 
<body id="mybody">
	<div class="conteneur" id="conteneurg">
	<div class="ombregauche" id="ombreg">tre</div>
		<div class="centre">
 
                         <!-- CONTENU -->
 
                </div>
	</div>
	<div class="ombredroite" id="ombred">tretre</div>
</body>
</html>

Les "tre" et "tretre" c pour voir où s'affiche mon div, vu que l'image ne s'affiche tout simplement pas.. damned !

Si qqun sait pourquoi mes background-image se cassent a katmandou ou je ne sais ou, merci de m'expliquer

**Johnbob** · 06/03/2006, 11h45

Pour réaliser cet effet "d'ombre" je te conseille la solution suivante:

- supposons que ton div central fasse 700px de large
- que ton effet d'ombre prenne 10px de large (donc 2*10px)

Il faut créer une image de 720px de large et de 1px de haut avec l'effet d'ombre aux deux extrémités de l'image.

Puis avoir un div central dans la page qui fait 720px (et qui contient l'image en background avec un repeat) et un autre div qui fait 700px et qui est centré dans le div précédant.

(Solution que j'ai vu sur de nombreux blogs)

**narnou** · 06/03/2006, 18h51

Envoyé par gonnarule

Code :

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

1
2
 
background-image:url('images/ombreg.png');

et

Code :

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

1
2
 
<link rel="stylesheet" href="styles/style.css" type="text/css" />

Je doute que ton répertoire "images" se trouve dans ton dossier "styles" :p

essaye ceci :

Code :

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

1
2
 
background-image:url('../images/ombreg.png');

Sinon la solution proposée par Jung au dessus peut-être efficace selon tes besoins

je veux mourrir : css et background-image

CSS

Vue hybride

Discussions similaires

Partager

Partager