Design complexe en Full-CSS

[Info-Rital]

Ciao tout le monde !
On m'a envoyé un design pour que je le code et que j'en fasse un thème pour un CMS (nuked-klan).

Le problème c'est que tous les thèmes de ce CMS sont tous des thèmes très complexes(dans le sens, beaucoup d'images) et ils utilisent tous des mises en pages à l'aide de tableaux.

Or moi je fais des designs Full-css (positionnement CSS) et souvent avec juste une seule image : la bannière ou le logo.

Voilà ce fameux thème à coder : http://213.251.134.220/~linuxproje/decoupe2.gif

En plus à gauche et la bannière seront en Flash...

Don est-ce qu'il est possible de coder ça en Full-CSS et si oui, est-ce que c'est fesable sans trop de prises de têtes ?

Après pour l'adaptation pour le CMS ce sera plus difficile mais j'y arriverai si le mise en template HTML Full-CSS est possible.

Merci d'avance.

[golemboy]

oui, c'est possible mais tu devra virer tout tes les tableaux si tu veux faire du full CSS. Mais bon ça va être vraiment très prise de tête si tu veux suivre la découpe des images.

L'avantage c'est que une fois que tu aurras trouvé le bon template HTML et les bons styles tu pourra faire d'autres thèmes basés sur le même template avec moins de prise de tête.

Bon courage car ya du boulot ! !

[calimo]

À vrai dire la découpe des images "comme avec les tableaux" est une vraie galère avec les CSS... pour la simple raison qu'ils ne sont pas prévus pour !
Un design en CSS est beaucoup plus "souple", tu auras des déformations de partout, etc. Si tu veux vraiment le faire, il faut commencer par voir comment tes textes sont organisés, le <h1>, les titres, les textes, les listes de menu, et structurer ton contenu grâce à la sémantique HTML. Ensuite il faut diminuer le nombre d'images en fonction de ce que tu veux obtenir, et mettre les images comme arrière-plan de chacun de tes blocs.

Mais sois averti que

1. Tu va te faire c**er
2. Tu sera forcément déçu par le résultat. En effet, tu as un idéal : le design actuel en tableaux. Il y aura forcément quelques différences avec les CSS. Et forcément ces différence tu les verra comme des "défauts" --> « Les CSS c'est nul ! »

Je te conseille donc de

• Garder la mise en page en tableaux. Tu peux toujours la revoir, je ne connais pas le code original mais tu peux mettre les dimensions et arrière-plans (etc.) dans la feuille CSS pour séparer quand-même un minimum la structure de la forme, même si ce n'est pas parfait. Tu peux également vérifier que mis à part les tableaux la sémantique est respectée et que tu utilise correctement la syntaxe riche de balisage (hx pour les titres, des vraies listes etc., pas d'images vides ou alors avec un texte alternatif vide alt="").
• Trouver un autre CMS respectueux des standards (voir framasoft) et reprendre tout de 0 avec un nouveau design (regarde CSS Zen Garden pour t'inspirer des effets spéciaux)

[Info-Rital]

Oui c'est ce que je me disais aussi : quasi impossible, en tout cas très ch**nt.
Mais ce n'est pas une histoire de CMS, Nuked-Klan depuis la version 1.7 est completement standard et j'ai pu faire sans problèmes un thème Full-CSS.

Mais les 3/4 des thèmes de ce CMS sont des thèmes très lourds et complexes (pas forcement moches, certains sont très beaux) mais ils utilisent tous des structure à base de tableau.

Moi je deteste ces structures et les plupart d'entre eux utilisent Dreamweaver et le font à la souris, moi sous Linux, à part NVu, je n'ai rien de tel. Je suis habitué au webdesign au clavier mais tout de même, faire une mise en page en tableaux d'un design complexe au clavier, c'est très difficile (pas impossible) car on se perd rapidement et on a du mal à s'imaginer le résultats.

[Invité]

y a moyen de faire sans tableau et pas trop compliqué non plus :

tu mets en fond d'écran principal la barre de séparation verticale
ensuite
tu découpes en 2 div :

Code : Tout sélectionner

+--+----+
|    |      |
|    |      |
+--+----+

à gauche tu mets en fond ton image sans répétition
et à droite
tu mets 2 div dedans

Code : Tout sélectionner

+--+----+
|    |      |
|   +----+
|    |      |
|    |      |
+--+----+

au dessus ton image en fond
et en dessous le reste
c-a-d d'abord la colonne droit avec un float
et puis le restant.

pour positionner en hauteur : margin-top
et à gauche : margin-left
combiné avec des width pour les zones dans la colonne de droites ...

c'est si compliqué

mais en gros suis la logique de Calimo : d'abord le contenu puis appliquer la présentation ...

[css miraculix]

c tres simple en CSS
en decoupe auto c de la merde 100%

ya meme pas a se poser la question quelque soit le desin c'est XHTML strict + CSS
une feuille de structure
et une deuxieme feuille pour le reste (le dynamique)
avec imagesde fonds superposee ya aucun prob
et les bordures en background-repeat x ou y

[css miraculix]

calimo yaura AUCUNE difference avec le design si c'est bien fait .. AUCUNE
c'est juste une question de competence

je te fais ce truc 100% pareil sans TABLE
XHTML 1.1 + CSS

[Info-Rital]

Je veux bien te croire css miraculix mais si tu me montre comment on fait exactement (un petit cours ? sur MSN^^), je te revaudrai ça, et je ferai à mon tour, un dossier sur la création d'un thème comme ça en Full-CSS si j'ai bien compris comment on fait.