Débutant, coder en CSS un design...

Bonjour,

Je ne voudrais pas décourager qui que ce soit, mais intégrer ce design en étant un débutant risque de ne pas être une partie de plaisir. Ce design n'est pas très compliqué, mais il comporte une grosse difficulté: le cadre avec ombre portée sur fond de motif répété. Là, il ne va pas y avoir trente-six solutions: il faudra utiliser du PNG-24.

Bref, il va falloir:
- savoir exactement comment «découper» le design (au plus simple: en trois blocs header, content et footer... le bloc central sera alors subdivisé en 3 colonnes);
- travailler en largeur fixe (en pixels), sinon bonjour l'angoisse;
- savoir gérer la transparence PNG-24 avec Internet Explorer 6.

Allez, je donne un début de solution: il faut découper l'image du cadre en trois tranches verticales de largeur fixe (en pixels) correspondant aux trois blocs principaux que j'évoque plus haut. La première image sera en image de fond simple, la troisième également, mais la deuxième devra être une tranche (genre 50px de haut) répétée en hauteur (mode "scale" pour la propriété filter dans IE6).

Il n'y a que le dégradé gris sur toute la largeur en en-tête qui m'embête un peu. Il faudra peut-être faire une image de 2000px de large? Mais dans ce cas: 1) risque de poids important et 2) pas sûr que ça tombe raccord au pixel près avec les deux blocs suivants, si on a pas de bloc global. Donc ça sera peut-être plutôt un bloc positionné en absolu et en width: 100%, placé uniquement pour pour caser ce dégradé gris (lui aussi en transparence...).

Bref, c'est pas excessivement ardu mais ça va pas être simple non plus.

Au fait, en passant: et le design du texte, c'est remis à plus tard? (lien qui pourrait intéresser aussi bien l'intégrateur que la graphiste ).

Bonjour,

Je rejoins naturellement les propos de Florent, à l'exception de ceci:

Florent V. a écrit :

- savoir gérer la transparence PNG-24 avec Internet Explorer 6.
(mode "scale" pour la propriété filter dans IE6).

Ces indications, bien que judicieuses, ne me semblent pas appropriées dans un apprentissage des bases.
J'aurais fortement tendance à conseiller d'intégrer tout ça selon ce que spécifie les standards, et non en fonction d'un browser vieillissant.
Les limitations d'IE6 pourront être vues en fin de parcours, lorsque les comportements standards ont bien été acquis, mais pas avant.
Ceci dit, ce n'est que mon humble avis, et ça n'engage que moi…
Modifié par Benjamin D.C. (15 Jan 2008 - 14:48)

Merci pour vos réponses, je regarde ça (j'étudie ça en profondeur).

Au niveau navigateur, ça sera IE 7 et Firefox.( c'est tout).

Donc pour commencer je découpe mon design en 3 parties.

Petite précision, le centre (ou il aura mes informations mon texte mon contenue, etc..) va être plus grand. C'est dire qu'il risque de faire le double voir plus que le texte mis en exemple sur le design.

Cela ne va pas gêné, faut-il partir sur une autre découpe?

Désolé je débute donc je vais avoir beaucoup de question

Merci d'avance

guigui69

guigui69 a écrit :
Au niveau navigateur, ça sera IE 7 et Firefox.( c'est tout).

C'est une bonne base pour se faire la main. Mais tu pourrais rajouter facilement le support d'Opera et Safari (du moins dans leurs versions récentes), car si ça passe sur Firefox il y a fort à parier que ça passe aussi dans ces navigateurs... et il n'est jamais inutile d'avoir deux navigateurs potables pour faire ses tests (ex: Firefox 2 et Opera 9).

guigui69 a écrit :
Petite précision, le centre (ou il aura mes informations mon texte mon contenue, etc..) va être plus grand. C'est dire qu'il risque de faire le double voir plus que le texte mis en exemple sur le design.

Tant que ton image de fond est répétable (et répétée) en hauteur, et que tu ne figes pas la hauteur de ce bloc, ça devrait être bon.
Par contre, il te faudra sans doute explorer des subtilités telles que la fusion des marges ou le dépassement des flottants (recherche Google ou autre sur ces termes).

Et pour rebondir sur ce que disais Benjamin: bien sûr, les éventuels correctifs pour IE6 ne sont apportés que dans un deuxième temps (dans une feuille de styles de correctifs pour IE6 appelée via un commentaire conditionnel qui va bien, par exemple).