Page avec ombre portée

baulet · 28 Décembre 2006

Bonjour,

j'aimerais obtenir un effet d'hombre portée sur une page comme ceci:

en fond d'écran il y a un background, et la page comprend également un background.

pour l'instant, les hauteurs des blocks sont définies par "height =" .

sachant ques les différentes pages du sites n'auront pas la même hauteur, il sera nécessaire d'avoir une feuille de style par page, ce qui est peu élégant et fastidieux.

découpage :

un conteneur

--le bord haut

----la page

--le bord gauche

--le bord bas

effectué par des div.

il faudrait que le conteneur hérite de la hauteur de la page, plus la hauteur du bord bas.

également le bord gauche doit occuper toute la "place" entre le bord haut et le bord bas...

que pensez vous de ce raisonnement, et est ce possible?

faut il revoir mon découpage?

peut on laisser des balises div vides juste aux fins de mise en page?

la feuille de style:


body {
background:url(background1.gif) }

#conteneur {
	position:relative;
	margin: 0 auto;
	width: 750px;
	z-index: 0;
	height: 310px;}

#ombre-g {
	background:url(background3.gif) repeat-y;
	width: 750px;
	z-index: 0;
	position: relative;
	top: 10px;
	height: 290px;}

#ombre-h {
	background:url(ombre-h.gif);
	width: 750px;
	height: 10px;
	position: absolute;
	top: 0px;
	z-index: 1;}

#ombre-b {
	background:url(ombre-b.gif);
	width: 750px;
	height: 10px;
	z-index: 1;
	position: absolute;
	bottom: 0px;}

#page {
	width:740px;
	background: url(background2.gif);
	position: absolute;
	z-index: 2;
	left: 0px;
	top: 0px;
	height: 300px;}

extrait du html:

<body>
  <div id="conteneur">
	<div id="ombre-h">
	  <div id="page">
	  </div>
	</div>
	<div id="ombre-g"></div>
	<div id="ombre-b"></div>
  </div>
</body>

Merci de vous remarques et critiques

xpatval · 28 Décembre 2006

logiquement, et si j'ai bien comprenu (ce qui n'est pas forcément le cas...), il te suffit de déclarer ton image de fond dans ton conteneur. Là, quelque soit la taille de ton bloc central et de ton pied de page, l'image "défilera" d'elle-même (avec l'attribut repeat-y).

Seule l'image de fond du pied de page peut se révéler utile.

xpatval

baulet · 28 Décembre 2006

Re !!!

Bon j'ai trouvé !!!

mon découpage n'était pas bon

voici le bon découpage :

conteneur

--page

--ombre haut

--ombre gauche

/conteneur

ombre bas

de cette manière le conteneur "suit" la page automatiquement...

(page en relatif, ombre haut et gauche en absolu, ombre bas en relatif)

cela fonctionne avec firefox 2 et ie7...reste à tester sur de plus anciens...

xpatval : oui c'est ce que je fais...mais le problème n'est pas la

la discussion n'est pas close, si vous avez des avis et critiques, merci d'avance.

Connexion

Page avec ombre portée

Sujets conseillés

baulet

xpatval

baulet

Veuillez vous connecter pour commenter

Parcourir

Activité