[nv tuto][en ligne]Design à 2 colonnes

Salut

Vu le nombre de questions qui tournent autour de la réalisation d'un site avec 2 colonnes de même hauteur (tant en ce qui concerne la hauteur des colonnes elles-mêmes que les différents bugs & erreurs d'interprétation d'IE) je me disais qu'il serait peut-être utile de réaliser une variante du tutoriel Réalisation d'un design complet avec 2 colonnes.

Mais comme évidemment, il y a plusieurs cas de figure, ainsi que plusieurs façons d'aborder le problème, il faudrait cerner un cas particulier, le plus utile possible.

Edit: j'ai une proposition à soumettre ici. Voir plus loin dans le sujet pour les critiques & suggestions
Modifié par Sopo (08 Nov 2006 - 17:36)

Rebonjour,

A ce sujet, j'aurais une petite remarque... Du fait que ce tutoriel s'adresse principalement aux débutants, je trouverais judicieux d'insérer quelques éléments sur cette page tel que des titres de différents niveaux, deux, trois paragraphes, une liste, un petit formulaire (recherche) et une image. De même, il serait bien d'indiquer comment lier une feuille de style et un script externes. Enfin, vu qu'on préconise l'accessibilité, on pourrait donner l'exemple en insérant des liens qui s'y rapportent (navigation, plan du site, contact, etc...)

La difficulté, c'est de rester le plus simple possible mais bien souvent, lorsque ces éléments principaux ne sont pas indiqués, on retrouve ceux qui se servent de ce tuto en train d'ajouter du code invalide ou d'omettre certaines parties pour faire un bon site. Je pense donc que ces éléments courants (et non exhaustifs) sont indispensables pour donner l'exemple.

a écrit :
Un formulaire de recherche, il faut avoir le moteur derrière

ben non. Il s'agit simplement d'indiquer ces éléments, pas de tout développer derrière. Le but c'est de faire un design donc autant qu'il soit représentatif de la réalité non ? Si je te parle de ces éléments, c'est parce que celui qui se sert de cette page va forcémment en avoir besoin. On peut passer les liens d'évitement, les accesskeys et autres trucs du même genre par exemple mais une page sans image ou sans formulaire, c'est rare et pour le reste, il ne s'agit que de liens déjà "titrés" supplémentaires. Au final, ce ne serait pas beaucoup plus lourd.

Il ne vaudrait pas mieux dans ce cas consacrer un sujet complet aux formulaires ?

Représentatif de la réalité, je veux bien, mais il est impératif de simplifier pour que ça reste accessible aux débutants.

A force de prendre en compte trop de paramètres, on risque de noyer le poisson, non ?
Modifié par Sopo (28 Aug 2006 - 22:32)

Disons que je n'ai pas l'impression que ce soit de trop (un formulaire de recherche étant simple, une image aussi) mais attendons d'autres réactions.

Je dis çà plutôt pour tenter d'améliorer le tuto... ce n'est que mon avis.

koala64 a écrit :
Je dis çà plutôt pour tenter d'améliorer le tuto... ce n'est que mon avis.

Je n'en doute pas. Gare simplement à ne pas vouloir "trop" bien faire non plus ... amha

Okay pour moi, je partage bien vos avis !

Donc, pour le tuto en question :
- ajout d'une colonne sur une autre version (je tiens à conserver la version basique et à la compléter par autre chose)
- éventuellement ajout d'autres éléments pertinents (liste de ces éléments à discuter, mais à première vue je verrais bien des titres de niveau mais là je pense que ça suffit, on va rarement au delà, des listes <ul> et <ol> mises en forme (pour passer la question "padding sous IE/margin sous les autres" (ou le contraire je sais plus), un formulaire de recherche pourquoi pas mais je pense que Sopo à raison, mieux vaut consacrer un tutoriel complet à la question des formulaire (avec et sans upload, les différents champs, etc.), ce n'est pas si trivial et ça aurait bien sa place sur les tutos Alsa, notament en insistant sur l'importance des <label> (entre autre))

Donc, perso je serais assez motivé pour remettre un peu à jour ce tuto (il y a plusieurs éléments qui ne me plaisent pas) mais un coup de main ne serait pas de refus loin de là ! à la limite, tout le travail à ma place en en discuttant ensemble, ça me va aussi ^^ lol

Par contre pour le tuto sur les formulaire, il y avait un début de quelque chose sur le wiki, mais ça semble plutôt abandonné.

Olivier a écrit :
je tiens à conserver la version basique et à la compléter par autre chose

C'est à ça que je pensais, bifurquer à partir de la mise en forme du contenu vers une autre mise en page possible, avec une colonne flottante. Tout en laissant le tuto présent intact.

Olivier a écrit :
un coup de main ne serait pas de refus loin de là !

Je mettrai volontiers la main à la pâte, mais pas avant 2 semaines (exams & fête d'abord ). Par contre, il faudra débattre de la méthode à adopter pour les colonnes de même hauteur. Je suis un adepte des colonnes factices, mais ce n'est pas la solution la plus satisfaisante au niveau du code ...

Sopo a écrit :
Je suis un adepte des colonnes factices, mais ce n'est pas la solution la plus satisfaisante au niveau du code ...

Idem ! je ne jure que pas ça !

Pourquoi c'est pas satisfaisant niveau code ?

Niveau HTML,on y voit que du feu, ça ne change strictement rien (pour peu qu'on ait un pied de page, sinon il suffit d'un élément supplémentaire qui n'a aucune incidence sur le rendu sans CSS) et niveau CSS, ma foi, du flottant et des images de fond, c'est plutôt soft

a écrit :
Pourquoi c'est pas satisfaisant niveau code ?

Oh, il y en a qui sont frustrés parce que leurs blocs ne font pas "réellement" la même hauteur

Bon. J'ai enfin travaillé un peu pour la communauté, et j'ai rédigé un tutoriel de mise en page en 6 étapes. Ca pique un peu les yeux au niveau du choix des couleurs, mais c'est pas l'important. Il y a une liste non ordonnnée avec rollover en css, 2 colonnes de même hauteur, trois niveaux de titres, du flottant, de l'absolu, du factice & du filter:progid:blablabla me suis bien amusé. Un gros melting-pot de questions récurrentes sur le forum.

C'est par ici. Vous en pensez quoi ?

Celui qui est trop méchant, je le préviens, je le laisse finir

Edit : attention, jeu de mot à 3€ dans le titre ! Ouais, il est assez tard
Modifié par Sopo (07 Nov 2006 - 01:17)

Ah ben voilà un sujet qui a failli m'échapper ! (parfois, il vaut mieux me MPiser ).

Alors a priori c'est carrément très sympa, tout à fait utilisable et cela pourrait devenir un complément au tuto déjà existant.

Des choses en passant :
- il faudrait mettre l'accent sur les différences avec l'autre tuto existant pour que les gens ne soient pas trop embrouillés dans leur choix
- c'est un peu dommage d'en arriver à des hacks IE (ça décrédibilise un peu). Il n'y aurait pas moyen de se priver de hacks, même en simplifiant un peu ?
- dans l'introduction, expliquer en une ligne ce qu'il va se passer à chaque étape.

EDIT : je vois que certains hacks sont faits pour avoir des colonnes de même hauteur sur IE.
Après tout ce n'est pas si bête (même si je préfère les colonnes factices), mais dans ce cas, il faudrait peut-être développer un peu plus ce choix dans le tutoriel.
Modifié par Raphael (07 Nov 2006 - 18:38)

Sopo a écrit :
Y'a quelqu'un ?

Autour de 9000 inscrits aux dernières stats !

Bonjour Sopo !

Super tuto, je trouve.

Le fait d'aborder d'autres choses en sus du problème de colonnes est formateur.

Peut-être qu'en précisant les étapes, il serait possible d'accéder directement à la partie qui intéresse particulièrement.

Dans l'idée :

- Etape 1 : le code xhtml
- Etape 2 : positionnement (mise en place des colonnes)

Reprendre le titre de page des étapes, en fait ...

EDIT :

a écrit :
Une particularité à noter dans la structure de la page : la colonne "secondaire" qui contient le menu de navigation et les liens est placée avant le contenu principal de la page. On en reparlera à la prochaine étape.

Je trouve ça particulièrement gênant, surtout en terme d'accessibilité (voire de référencement).
Je suppose que c'est parce que la colonne de droite est en float right ?

Mais puisque le design est de largeur fixe, on connait la largeur de la colonne centrale et du coup il est possible de la flotter aussi, non ?

Cela règlerait le problème : on pourrait avoir une structure commençant par la colonne centrale puis la colonne de droite.

a écrit :
Vous aurez sans doute remarqué que le fond ne monte pas jusqu'au sommet de la page sous Firefox ou Opera. C'est dû à la fusion des marges, et on corrige en appliquant un overflow: auto; au header.

Ce n'est pas simplement à cause des marges par défaut du <h1> dans le header ?
Dans ce cas, il est plus simple d'annuler les marges haute de h1, non ?

Raphael a écrit :

- il faudrait mettre l'accent sur les différences avec l'autre tuto existant pour que les gens ne soient pas trop embrouillés dans leur choix

Oui, mon introduction est un peu courte

Raphael a écrit :
c'est un peu dommage d'en arriver à des hacks IE (ça décrédibilise un peu). Il n'y aurait pas moyen de se priver de hacks, même en simplifiant un peu ?

Là, je ne comprends pas trop. Le seul "hack" que j'aie utilisé, c'est l'utilisation de "filter" pour les images PNG transparentes en background. Ca me semblait intéressant à intégrer, mais bon ... D'autre part, tout est passé via les commentaires conditionnels, ce qui permet de conserver le code de base "clean".

Raphael a écrit :
dans l'introduction, expliquer en une ligne ce qu'il va se passer à chaque étape.

ça rejoint un peu la remarque de Véro, j'aquiesce sans réserves.

Raphael a écrit :
EDIT : je vois que certains hacks sont faits pour avoir des colonnes de même hauteur sur IE.
Après tout ce n'est pas si bête (même si je préfère les colonnes factices), mais dans ce cas, il faudrait peut-être développer un peu plus ce choix dans le tutoriel.

Là j'ai pas compris, j'ai utilisé les colonnes factices, justement

http://sopo.freezee.org/alsa/etape3.html

a écrit :
Accrochez-vous, c'est l'heure du tour de passe-passe. Vu qu'il est difficile d'obtenir 2 colonnes de même hauteur sans passer par l'utilisation d'un tableau, nous allons nous contenter d'en obtenir l'aspect, à l'aide des colonnes factices : on simule la présence des colonnes en utilisant l'arrière-plan de leur conteneur.

Ah ben là du coup je ne comprends plus l'utilité des hacks IE pour le min-height
Quel intérêt du min-height si tu utilises quand-même les colonnes factices ?

http://sopo.freezee.org/alsa/etape4.html

a écrit :
Ensuite, nous ajountons un effet de rollover en attribuant un arrière-plan au lien et au pseudo-élément hover correspondant.

Tu ne fournis aucune explication sur le rollover.
Les connaisseurs y reconnaitront les portes coulissantes, mais tu devrais expliquer au-moins le principe, puis laisser un lien vers ce tuto par exemple

a écrit :
D'autre part, tout est passé via les commentaires conditionnels, ce qui permet de conserver le code de base "clean".

En fait, dans les "hacks" je parlais aussi des commentaires conditionnels.
Je ne comprends pas par exemple le choix d'un "hack" pour le min-height. Rien n'y oblige il me semble.
Modifié par Raphael (07 Nov 2006 - 18:52)