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

(reprise du message précédent)

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)

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

a écrit :
Les noms de police sont écrits entre guillemets lorsqu'ils comportent des espaces. Sinon, les guillemets ne sont pas nécessaires.

J'aime beaucoup l'idée des petites notes entourées de rouge !
Un peu plus nombreuses et avec un petit picto, ce serait extra
Modifié par Raphael (07 Nov 2006 - 18:54)

Raphael 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 ?C'est vrai. Si on supprime les marges, plus de fusion des marges, évidemment

clb56 a écrit :
un seul regret pour ma part, que tu ne sois pas parti sur un exemple en largeur fluide.

C'est un petit peu plus compliqué à gérer, et comme j'avais déjà pas mal de truc à intégrer ...

La transformation du min-height en height pour IE sert à garder la mise en page sur toute la hauteur de la fenêtre au cas où le contenu ne la remplit pas complètement. Je vais vérifier, mais j'ai l'impression d'en avoir besoin

Sopo a écrit :
La transformation du min-height en height pour IE sert à garder la mise en page sur toute la hauteur de la fenêtre au cas où le contenu ne la remplit pas complètement. Je vais vérifier, mais j'ai l'impression d'en avoir besoin

Ahh ok ok. Alors je pense que tu devrais là aussi expliquer un peu ta démarche car ce n'est pas intuitif du tout. (une petite note avec un picto ? )

Sopo a écrit :
C'est vrai. Si on supprime les marges, plus de fusion des marges, évidemment .

Oui, et ça évite d'aller se perdre dans des propriétés comme overflow qui ne sont pas du tout intuitives et feront croire qu'il est vraiment complexe de faire une mise en page simple

Raphael a écrit :

Oui, et ça évite d'aller se perdre dans des propriétés comme overflow qui ne sont pas du tout intuitives et feront croire qu'il est vraiment complexe de faire une mise en page simple

Je garde le lien d'explication, et je supprime les marges, alors.

a écrit :
Je vais un peu regarder après des notes potentielles (et un picto, si j'ai le courage langue )

Bah, des icones libres de droits sont facilement trouvables

a écrit :
Et tâcher de passer la colonne de gauche en float: left. On pourrait positionner la colonne de droite en absolute, mais ça ne me plairait pas ... ça risque de donner de mauvaises idées au lecteur

Oui il vaut mieux éviter le positionnement absolu.
Pourquoi ne pas placer les deux colonnes en float left ?

a écrit :
Je garde le lien d'explication, et je supprime les marges, alors.

Ça me va

Raphael a écrit :
Pourquoi ne pas placer les deux colonnes en float left ?

Pour rien. Mais bien que ce soit à manier avec précaution, il me semble que le positionnement absolu serait un choix défendable ici (si ce n'était pas un tuto )

Hum. Passer les 2 colonnes en flottants tout en gardant le pied de page en bas va m'obliger à créer un contexte de formatage sur mon bloc central. Et donc à jouer avec la propriété overflow tout de même

C'est intéressant, mais ça ne va pas simplifier le problème. Vais tâcher d'expliquer ça correctement.

Bah il suffit de placer ce footer dans le conteneur global et lui donner un clear both, non ?

Ah non, ça marche pas. Le footer est positionné en absolu pour rester toujours en bas de la page. Il faut que je force le calcul de la hauteur autrement, d'où contexte de formatage

Sopo a écrit :
Ah non, ça marche pas. Le footer est positionné en absolu pour rester toujours en bas de la page. Il faut que je force le calcul de la hauteur autrement, d'où contexte de formatage

J'ai vraiment du mal à suivre : pourquoi ne pas laisser le footer dans le flux ? Il s'affichera bien en bas du site non ?

EDIT : ah je pense comprendre : toujours l'idée de vouloir un design de 100% même si le contenu ne va pas en bas de page ?
Ce n'est pas un peu trop contraignant et pas vraiment adapté au média qu'est le web ?

Bon en même temps il faut bien une originalité sinon ce tuto ressemblerait beaucoup à celui déjà existant.

Par contre il va bien falloir insister sur cette originalité et vraiment expliquer que cela implique des positionnements et des hacks qui ne seraient pas nécessaires pour une mise en page plus "classique".
Modifié par Raphael (07 Nov 2006 - 22:45)

En fait, j'ai pas choisi la mise en page la plus facile :

* colonnes de même hauteur ;
* occupation de toute la hauteur de la page, quel que soit le contenu ;
* pied de page collé au bas de la page, toujours quel que soit le contenu ;

edit : pourquoi pas adapté au média ? La page reste fluide en hauteur Par ailleurs, le "hack" pour obtenir cette hauteur est réellement minime. Je ne corrige en réalité que des bugs archi-connus d'IE dans les commentaires conditionnels (double marge des flottants, imcompréhension de min-height, ça passe tous les jours sur le forum)
Modifié par Sopo (07 Nov 2006 - 22:48)

Sopo a écrit :
En fait, j'ai pas choisi la mise en page la plus facile :

* colonnes de même hauteur ;
* occupation de toute la hauteur de la page, quel que soit le contenu ;
* pied de page collé au bas de la page, toujours quel que soit le contenu ;

Oui après réflexion : fonce avec ces originalités, mais prends le temps de bien l'expliquer en introduction.

Sopo a écrit :
edit : pourquoi pas adapté au média ? La page reste fluide en hauteur

Bah le web n'est pas un media paginé. C'est toujours une bidouille que de vouloir faire des pages en 100% de hauteur, car le concept même du web est de ne pas avoir de "hauteur" : un document de contenu scrolle tout bêtement.

Mais vu que ce genre de design est assez demandé, il pourrait être bon de proposer un tuto qui expose une des façons les moins pires de bidouiller pour cela
Modifié par Raphael (07 Nov 2006 - 22:49)

Raphael a écrit :
C'est toujours une bidouille que de vouloir faire des pages en 100% de hauteur, car le concept même du web est de ne pas avoir de "hauteur" : un document de contenu scrolle tout bêtement.

D'accord, c'est une bidouille esthétique. Mais tant qu'on ne contrarie pas le scroll dans la page, et tant que les bidouilles restent raisonnables (pas au détriment de l'accessibilité, par exemple), ça me semble acceptable ...

Le seul truc vraiment louche dans le tuto, c'est l'utilisation d'AlphaImageLoader pour les PNG transparents. J'hésite vraiment entre le laisser ou remplacer l'image de fond pour IE par une image sans transparence, quitte à avoir un décalage entre le fond de body et celui du conteneur principal (rayures non alignées).

A priori ça me va
L'ensemble passe correctement sur la plupart des navigateurs ?

Sopo a écrit :
Le seul truc vraiment louche dans le tuto, c'est l'utilisation d'AlphaImageLoader pour les PNG transparents. J'hésite vraiment entre le laisser ou remplacer l'image de fond pour IE par une image sans transparence, quitte à avoir un décalage entre le fond de body et celui du conteneur principal (rayures non alignées).

Oui j'y ai pensé aussi, mais je pense que si c'est bien expliqué, ça peut être un plus.
Il faut préciser aussi que ce genre de bidouille ne devrait plus avoir lieu sur IE7 qui doit gérer les png transparents.

ça passe sous firefox, IE6 et Opera. Si quelqu'un peut jeter un coup d'oeil pour savoir ce que ça donne sous KHTML, ce serait bien.

J'ai corrigé la plupart des points qui ont été soulevés, à part l'intro et le menu. Je t'ai même dégotté un tournevis de derrière les fagots