Mon retour d'expérience sur les CSS...

Bonjour,

Depuis 1 mois j'ai décidé de me plonger dans les CSS.

Aujourd'hui mon plus gros problème est que je travaille de façon trop empirique et que j'aimerais trouver des méthodes plus précises concernant par exemple :

=> le découpage des pages
=> éviter d'utiliser des dizaines de <div></div>
=> optimiser une mise en page pour tous les navigateurs
=> etc...
Je me suis rabattu sur des bouquins (Raphaël Goetter, transcender css etc...) mais je n'y ai pas trouvé non plus de méthode.

Du coup je suis un peu perdu et je me demande s'il existe réellement une méthode ou si c'est toujours au feeling ?
Auriez vous des infos là dessus ?
Merci de m'avoir lu jusqu'au bout

Salut,

Peut être que surfer un peu et visiter des sites conformes, regarder leur code, t'aidera à voir comment ils sont structurés. Pour commencer, c'est déja une bonne chose.

Tu peux aussi faire un tour du côté des tutoriels et de la FAQ, notamment la galerie de mise en page en CSS, qui répondent bien à ce genre d'interrogation.

Donner une règle absolue est peu envisageable car chaque site mérite sa propre structure en rapport avec son propre contenu, mais certaines pratiques assez courantes sont une sorte de base de travail. (A voir dans ta propre navigation sur le web et dans les liens que je t'ai donné)

Bon courage à toi.

pan a écrit :
Du coup je suis un peu perdu et je me demande s'il existe réellement une méthode ou si c'est toujours au feeling ?

Chaque professionnel qui connait bien le sujet et qui fait régulièrement de l'intégration web a sa méthode, acquise avec l'expérience, et qui ne repose pas (du moins pas pour l'essentiel) sur du «feeling».

À partir d'un design, il est généralement possible d'identifier:
- le code HTML nécessaire au balisage sémantique des contenus (code HTML «pur», sans DIV supplémentaires rajoutées pour des questions de mise en forme);
- les conteneurs et éléments à rajouter dans le code HTML pour servir de support au graphisme (principaux blocs conteneurs, qui peuvent être doublés dans certains cas si on doit utiliser des images de fond multiple; éléments de décoration vides si besoin);
- les images et découpes nécessaires à l'intégration (à noter que souvent on peut avoir besoin de créer une image à partir d'éléments du design, par exemple pour créer les fonds de boites décorées ou des images composites pour les techniques de sprites CSS... donc ça ne se limite pas à du découpage au sens strict).

Une fois tout ça en place (ou déjà en tête, dans les grandes lignes... on n'est pas obligé de tout préparer à l'avance), le code CSS devrait aller tout seul. Sauf qu'il faudra le débuguer pour IE 6-7 dans la plupart des cas.

Pour finir, un peu de lecture:
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css

Florent V. a écrit :

Chaque professionnel qui connait bien le sujet et qui fait régulièrement de l'intégration web a sa méthode, acquise avec l'expérience, et qui ne repose pas (du moins pas pour l'essentiel) sur du «feeling».

À partir d'un design, il est généralement possible d'identifier:
- le code HTML nécessaire au balisage sémantique des contenus (code HTML «pur», sans DIV supplémentaires rajoutées pour des questions de mise en forme);
- les conteneurs et éléments à rajouter dans le code HTML pour servir de support au graphisme (principaux blocs conteneurs, qui peuvent être doublés dans certains cas si on doit utiliser des images de fond multiple; éléments de décoration vides si besoin);
- les images et découpes nécessaires à l'intégration (à noter que souvent on peut avoir besoin de créer une image à partir d'éléments du design, par exemple pour créer les fonds de boites décorées ou des images composites pour les techniques de sprites CSS... donc ça ne se limite pas à du découpage au sens strict).

Une fois tout ça en place (ou déjà en tête, dans les grandes lignes... on n'est pas obligé de tout préparer à l'avance), le code CSS devrait aller tout seul. Sauf qu'il faudra le débuguer pour IE 6-7 dans la plupart des cas.

Pour finir, un peu de lecture:
http://blog.alsacreations.com/2007/04/07/344-demarche-integration-html-css

Très bon article en effet que j'avais déjà lu et dans lequel je vois
qu'il est indiqué que l'on ne doit "plus" découper les images...
Je ne vois toujours pas comment on peut faire pour ne pas découper les images

Définir les principales zones de la page (header, menu etc...) ne me pose pas de souci particulier.
Là où je butte c'est sur toutes les petites zones dans le contenu notamment dans les boutiques en ligne quand il y a une foule d'infos à afficher (taille, prix, article, quantité etc...)

Là inévitablement les div se multiplient et je ne vois pas comment faire autrement

pan a écrit :
Très bon article en effet que j'avais déjà lu et dans lequel je vois
qu'il est indiqué que l'on ne doit "plus" découper les images...
Je ne vois toujours pas comment on peut faire pour ne pas découper les images

En réalité il est indiqué que l'on ne doit plus découper les pages web, mais penser contenus (HTML) puis habillage (DIV regroupant les contenus, images de fond...). Les images, elles, on continue de les découper... même si la découpe à proprement parler ne suffit pas.

Par exemple, dans un design récemment intégré j'ai utilisé l'image de fond suivante pour certains éléments:



Ou encore l'image suivante:



Aucune des deux n'apparaissent telles quelles dans le design (y compris en n'exportant que certains calques, en masquent des textes de contenu, etc.). Il y a eu un travail de recomposition de ces images qui dépasse la simple découpe.

pan a écrit :
Là où je butte c'est sur toutes les petites zones dans le contenu notamment dans les boutiques en ligne quand il y a une foule d'infos à afficher (taille, prix, article, quantité etc...)

Là inévitablement les div se multiplient et je ne vois pas comment faire autrement

Eh bien suivant les contenus tu vas avoir besoin de listes, paragraphes, titres, éventuellement tableaux (de contenu), etc. À priori pas directement de DIV, sauf pour faire des effets visuels ou organiser les informations en blocs.