résolution d'écran et background

[Guest CraJK]

Salut à tous, je sais pas si ça fait vraiment partie de l'accessibilité mais bon je laisse les modos arbitrer

Je voudrais savoir comment faire en sorte qu'un background dans un DIV s'affiche identiquement sur toutes les résolution d'écran sachant que malheureusement les 2 DIV en question sur mon site (page et texte) sont en pourcentage....

Héhé pas facile dans ce cas d'insérer une grande image en background sachant que je voudrais en plus découper l'image en 2 de sorte qu'elle en fasse qu'une.

[Denis]

Effectivement, le sujet est plus approprié dans XHTML/CSS que dans Accessibilité. C'Est pourquoi je viens de le déplacer.

[Dinostrate]

houlà mon cher CraJK

Faudrait que tu précises mieux, pour moi, ce n'est pas très clair

En plus, comme je suis un inconditionnel des pourcentages et de la relativité en général... cette question m'interpelle....

Dino

[Guest CraJK]

Oui, c'est vrai que même pour moi cela n'est pas trés clair alors récapitulons si tout le monde est ok

Disons que ma page est constitué comme suit :

Un div (page)sur les 3 quart de la page

Un div (texte)à l'intérieur du premier pour le texte de la page

Je voudrais mettre un background dans le premier (page) mais que dans le (texte) il soit transparent.

Donc j'ai pensé découpé mon image en 2, la première partie en foncé pour le page et la seconde en clair pour le texte.

Le problème est les 2 div sont en %, donc lorsque je decouppe cette image en largeur par exemple (200 et 400 px) cela coincide trés bien pour une résolution 800/600 mais les autres visiteurs ne voient que é images mal découpé avec beaucoup de blanc en plein milieu de l'écran.... (c'est clair là on me comprend ????)

Et vu que je ne connais pas de méthode pour découpper une image en pourcentage, je suis un peu bloqué ou a court d'imagination pour avoir la partie gauche(page) en sombre et la droite(texte) en transparent ou clair.

[Gribouille26]

J'ai pas de solution, mais je pense pas que ça soit possible car ton image à une définition, et si tu la grossie, elle va de toute façon être déformée...

As-tu essayer de mettre la taille de l'image à 100% de la div dans laquelle elle est contenue?

[Guest CraJK]

Salut et merci de ta réponse , je pense également comme toi, cela ne doit pas être possible.

[Denis]

En fait, suite à la relecture avec tes précisions je crois au contraire que c'est tout à fait possible... mais comme je ne l'ai jamais tenté moi-même, je ne puis t'en assurer pour l'instant.. je te lance quand même sur une piste, si tu veux l'essayer.

Le truc, ce serait d'avoir une seule image de background, affichée dans ton div conteneur (page). Dans le div du texte, tu spécifierais un background-color: blanc avec une transparence et le tour devrait être joué. Pour plus d'info sur l'application d'une transparence en CSS, suivre ce lien :

http://www.quirksmode.org/css/opacity.html

[Guest CraJK]

Féliciattion Denis

En un post tu viens de résoudre une semaine de galère et de test, je t'admire...

OUAHHHHHHH la puissance des CSS alors.

[Guest CraJK]

ARf, le seul problémze reste celui du terrbile validateur qui ne reconnait pas ce code en XHTML Strict.

J'ai eu beau écumé tous les sites fraçais que je connaissais je n'ai pas trouvé la soluce, j'en appelle donc à ceux qui lisent courrement l'anglais et qui pourrait aller faire un tour outre-atlantique voir si il n'y a pas la solution là-bas

[Denis]

Tout le plaisir fut pour moi.

Malheureusement, on ne peut plus rien faire au niveau de la validation puisque les règles CSS utilisées sont propriétaires et ne sont pas (encore du moins) intégrées officiellement dans les normes.

Le seul moyen que je pourrai imaginer pour utiliser ces règles ET demeurer CSS valide, ce serait de les inscrire par javascript et non par css directement... et encore, jamais je n'endosserai une telle approche personnellement. :

[Guest CraJK]

Et bien tout mon concept de validation tombe à l'eau pour l'instant jusqu'à ce que cette image opaque m'énerve et que je revienne à quelques choses de classiques.....

Tout me fait penser que le concept CSS2 n'est pas encore totalement au point (j'imagine) pour les graphistes.

Merci quand même du tuyau.

[goetsu]

une solution peut etre de n'utilisez qu'une image et dans ta div de texte tu met un png blanc avec un effet de transparence plus ou moins poussé selon que tu veux que l'image d'en dessous resorte plus ou moins.

Certes la transparence png ne marche pas sur ie mais avec un peu de code juste pour lui mais qui valide qd même ça fonctionne tres bien sur ie6 et ie 5.5

ex: sur mon site choisi le design soviet et regarde comme je fais la transparence pour les ombre porté autour de la zone de contenu.

C'est quelquechose de ce style:

<!--[if gte ie 5.5000]>
<style type="text/css">
#haut { 
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/soviet/bordhaut.png', sizingMethod='scale'); 
	background: none;
}
</style>
<![endif]-->

good luck

[Guest CraJK]

Pourquoi n'ai je jamais autant d'imagination que vous....

Bon je le gerde sous la main, j'ai repris le boulot alors j'ai beaucoup moins de temps actuellement et il faut que je me consacre au contenu.

Merci beaucoup.

[Denis]

Hésites pas à nous faire signe lorsque tu t'y remettras.