28172 sujets

CSS et mise en forme, CSS3

Bonjour.

Je me pose quelques questions pour réaliser le design ci dessous (ceci est juste un exemple et non un design je précise).

upload/4463-help1.jpg


En effet, nous avons un fond sous forme de pattern qui peux être géré avec des repeat en x ou y.
Le problème se pose pour les feuilles.

En effet le contenu noir, est extensible autant que possible, comment gérer l'apparition des feuilles lorsque le contenu va s'allonger?

On aurait pu imaginer un fond pour le contenu comme étant le cadre rouge, ceci est une possibilité mais cela sous entends qu'il faudrait un fond avec transparence de préférence png, mais cela pose un problème pour IE6 par exemple.

Quel est selon vus la manière manière de réaliser ce genre de gabarit?

En vous remerciant par avance.
Modifié par marseille (20 May 2009 - 16:54)
Hello,

Je pense que l'idée de départ n'est pas mauvaise (background transparent correspondant au cadre rouge) et pour le faire fonctionner avec IE6 pourquoi ne pas remplacer les .png par des .gif ?

Sinon pourquoi ne pas incorporer tes feuilles directement sur les fonds latéraux? Ce sera peut-être moins héstétique car on verra plus la répétition des motifs mais bon... telle que la question est exprimée, ça pourrait convenir je pense...
marseille a écrit :
On aurait pu imaginer un fond pour le contenu comme étant le cadre rouge, ceci est une possibilité mais cela sous entends qu'il faudrait un fond avec transparence de préférence png, mais cela pose un problème pour IE6 par exemple.

Bah, tu vires ces décorations pour IE6 (via un commentaire conditionnel ou simplement en utilisant un sélecteur CSS 2 qu'IE6 ne comprend pas pour déclarer ce fond), et c'est réglé.
Le problème ici serait plutôt que cette image (cadre rouge) en PNG-32 risque d'être assez lourde (genre 40 Ko).
Merci à vous deux pour vos reflexions.

a écrit :
Bah, tu vires ces décorations pour IE6 (via un commentaire conditionnel ou simplement en utilisant un sélecteur CSS 2 qu'IE6 ne comprend pas pour déclarer ce fond), et c'est réglé.


Ceci me plait bien.

a écrit :
Le problème ici serait plutôt que cette image (cadre rouge) en PNG-32 risque d'être assez lourde (genre 40 Ko).


Effectivement, mais je vois pas trop comment contourner ce problème.

a écrit :
Sinon pourquoi ne pas incorporer tes feuilles directement sur les fonds latéraux? Ce sera peut-être moins héstétique car on verra plus la répétition des motifs mais bon... telle que la question est exprimée, ça pourrait convenir je pense...


J'ai eu cette idée, mais imaginons une immense résolution d'un écran, il faudrait prolonger en x l'image pour contourner ce problème.

Une idées serait peux être d'avoir un fond fixe qui serait une image contenant le fond et les feuilles et de faire un degradé tirant vers une couleur fixe afin d'appliquer un background-color pour ceux possédant une grande résolution.
Un peux dans le même style que ce site peux être http://www.webdesignerdepot.com/ et son fond http://www.webdesignerdepot.com/wp-content/themes/wdd2/img/bg-body10.jpg