Un tit casse tête de fond avec ombre portée

salut ...
je viens de réaliser un fond pour un site sous toshop et là je suis en train de me demander comment découper mes tranches pour faire en sorte que tout se passe bien...
Je vous explique...l'idée bien sur est que le fond fond avec les petits carrés dégradés reste en place tout le temps (ou à la limite continue en blanc si la page devient trop grande) et que l'interface du site scroll par dessus...
problème ... l'interface comporte une ombre portée de chaque côté ... on a un fond non uni qui en plus se dégrade peu à peu vers le blanc ...
alors là moi je suis perdu ... lol .. pourtant j'ai vu ce genre de config sur certains sites
Quelle est la méthode à appliquer selon vous ?
merci par avance
@+

J'ai probablement loupé quelque chose, mais je ne vois pas bien ce qu'il y a de particulièrement difficile. Si la largeur de ton design est fixe, c'est très simple: il te suffit de créer une division qui englobera l'entierté de ton contenu et auquel tu attribueras un fond d'une dizaine de pixels de haut (ton ombre) qui se répetera sur l'axe vertical.
Le fond quadrillé pourra être simplement appliqué à l'élément conteneur général, à savoir "body", voire "html" si tu travailles en application/xhtml+xml.

dons ça veut dire que je dois utiliser un png avec un transparence en opacité pour mon ombre ? ça ne pose pas de pb avec IE les png ?

j'aimerai que le fond avec les careaux ne bouge pas comme sur ce site
http://www.copious.co.uk/digital-agency/agency.php (c'est le fond du site qui bouge et pas le fond fond)

mais biens sur le fond du site doit bouger avec son ombre à lui ... et donc j'ai besoin de gérer la transparence de l'ombre par dessus le fond fond (carrés dégradés)

c'est un peu la dessus que je bute

dans l'idée ça ressemble un peu à ça (texture dégradée en fond) ...mais avec le fond à petit carrés statique
http://www.netdreams.co.uk/

a écrit :
division qui englobera l'entierté de ton contenu et auquel tu attribueras un fond d'une dizaine de pixels de haut (ton ombre) qui se répetera sur l'axe vertical.

si fais ça en jpg...vu que le fond est dégradé ..lors des répétitions verticales ça vas se voir non ?
++

je viens de tester avec des PNG ... ça marche impec sur un vrai navigateur comme Firefox ou opera..Bien sur ...mais sur la bouse que la plupart des gens utilisent ça donne ça

Il existe plusieurs manières de faire passer la transparence d'un PNG sur IE6, puisqu'IE7 le supporte nativement. Une petite recherche sur le forum devrait rapidement t'en apprendre plus!

Ok je viens de lire pas mal de choses là dessus ...
j'ai opté pour la méthode de la feuille de style dédiée à IE et de l'astuce crosoft pour afficher les png...

donc j'ai dans mon head

<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

et dans la feuille de style en question

#contenu {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg_contenu.png", sizingMethod="scale");

	width:785px;
	height: 500px;
}

le problème est que selon la sizing method que je choisis j'ai un problème ...
avec scale l'image s'étire en largeur et est déformée ...
avec image ... elle ne se répète pas sur l'axe Y et ma div #contenu ne s'agrandit pas à la taille de ce qu'elle contient mais à la hauteur de l'image de fond
et avec crop l'image ne se répère pas en y

what ze problème ?

seul moyen ...faire une image de 10000px de haut en espérant qu'un jour le contenu ne dépasse pas cette taille ... mais bon ça fait du coup 44Ko à charger au lieu de 1Ko ... vraiment pas top

zavez pas d'autre astuces ?

Salut

Tout d'abord, à quoi sert ce media="screen" ?

<link rel="stylesheet" type="text/css" href="css/ie.css" [b]media="screen"[/b] />

Ensuite, normalement c'est background-image: none;

#contenu {
[b]background-image: none;[/b]
... }

Autre chose, tu veux que ton image se répète en y ? Alors pourquoi précises-tu une hauteur fixe ?

height: 500px;

Voilà, y a donc des petites choses à revoir... Je te donne ma méthode qui a toujours marché, libre à toi de t'en inspirer

HTML

<!--[if lte IE 6]>
#milieu { /* exemple avec img de fond qui se répète en y */
background-image:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/fond.png', sizingMethod='scale'); }	
<![endif]-->

...

CSS

#milieu {
background:url("img/fond.png") repeat-y;
width:760px; }

Voilà

Benjamin D.C. a écrit :
Il existe plusieurs manières de faire passer la transparence d'un PNG sur IE6

Manières qui sont toutes plus ou moins problématiques, il me semble. Notamment, sauf erreur de ma part : pas de possibilité de répétition de l'image « de fond » ainsi insérée.

Il reste alors la possibilité de faire une image de 3000+ pixels de haut (qui peut avoir un poids raisonnable en PNG, si elle comporte peu de motifs). Ou bien de ne pas avoir d'ombre portée dans IE6 (toujours via le commentaire conditionnel, on bascule sur une image de fond plus simple, et opaque).

BeliG a écrit :
Tout d'abord, à quoi sert ce media="screen" ?

À faire que la feuille de style ne soit appliquée que pour le média "screen", je pense. Voir la spécification CSS.

BeliG a écrit :
Ensuite, normalement c'est background-image: none;

L'écriture condensée avec background marche aussi, il me semble.

BeliG a écrit :
Autre chose, tu veux que ton image se répète en y ? Alors pourquoi précises-tu une hauteur fixe ?

Probablement pour simuler une hauteur minimale dans IE6.
Modifié par Florent V. (25 May 2007 - 15:07)

Florent V. a écrit :
Probablement pour simuler une hauteur minimale dans IE6.

Ok. J'avoue j'ai écrit un peu (trop) vite (et donc sans réfléchir)

OK
merci méssieurs pour toutes vos réponses...
j'ai réussi à me débrouiller avec une image de grande taille ... le poids n'est pas très important pour cette fois vu que ça vas tourner en intranet donc bon ...
enfin tout ça pour dire que IE est toujours une grosse daube ...j'ai pas testé les dernières versions mais j'espère qu'ils ont fait des efforts...

vivement que les internautes mettent à jour leurs navigateurs qu'on ait un peu moins de problèmes d'interprétation de CSS parce que bon ... c'ets puissant CSS ..mais attention le temps pour débugger

merci à vous !
@++

Florent V. a écrit :

Manières qui sont toutes plus ou moins problématiques, il me semble. Notamment, sauf erreur de ma part : pas de possibilité de répétition de l'image « de fond » ainsi insérée.

Il reste alors la possibilité de faire une image de 3000+ pixels de haut (qui peut avoir un poids raisonnable en PNG, si elle comporte peu de motifs). Ou bien de ne pas avoir d'ombre portée dans IE6 (toujours via le commentaire conditionnel, on bascule sur une image de fond plus simple, et opaque).

PPfff... je suis obligé de plussoyer une fois de plus.

lol
plussoyer c'est faire un
+1
??

Exactement!