Float : LE tuto ?

Je trouve que le positionnement float (voir ce gabarit d'Alsa : http://css.alsacreations.com/modeles/modele15.htm), qui, si j'ai tout compris permet de résoudre le fameux problème de longueur de colonne (vous savez cette fameuse colonne de gauche qui contient le menu et qui, si le centre est peu fourni, dépasse sur le footer !...), je trouve donc que ce positionnement float est singulièrement peu expliqué dans tous les sites que je peux consulter.

Que ce soit sur le site Openweb ou ici même sur Alsacréations, on reste toujours sur sa fin car ce positionnement nécessite de nombreuses subtilités.

Exemple : j'ai utilisé pour mon propre compte ce fameux gabarit sus-nommé. Or ayant divers problèmes de positionnement de floats dans les floats, je me renseigne et je lis je ne sais plus où qu'il faut que les block en positionnement float ait une largeur. Ce que je ne vois pas dans #centre du toujours sus-nommé gabarit...

Alors qui a tort, qui a raison. Le gabarit Alsa me semble bien fonctionner dans sa version en ligne très épurée...

Bref je me sens paumée et je pense qu'il serait utile d'avoir un tutorial vraiment bien ficelé en français sur la question (un peu l'équivalent de Floatutorial, tutoriaux sur le positionnement float.

En attendant pour les anglophones, le lien ci-dessus pourra les dépanner

Salut,

Et pourtant, si tu cherchais plus assidûment, tu trouverai des liens un peu partout vers les très complets articles suivants sur le site d'un des modérateurs de ce forum :

- Eléments flottants qui dépassent de l'élément parent
- Colonnes flottantes et place des éléments dans le flux HTML
- Organiser une série de flottants en colonnes
Modifié par Mikachu (16 Jan 2007 - 16:26)

J'ai du mal m'exprimer... Je ne dis pas que l'information n'existe pas mais qu'elle est extrêmement éparse et que par conséquent je ne dois pas être la seule à galérer pour réunir cette info afin de mener à bien un design qui tienne la route.

A ce sujet, il serait peut-être intéressant de monter un wiki des CSS qui permettrait à tous de mettre en commun ses connaissances et donc de monter LA source de référence sur le sujet (mais peut-être un tel wiki existe-t-il déjà ?).

caroder a écrit :
J'ai du mal m'exprimer... Je ne dis pas que l'information n'existe pas mais qu'elle est extrêmement éparse et que par conséquent je ne dois pas être la seule à galérer pour réunir cette info afin de mener à bien un design qui tienne la route.

Elle n'est pas tout à fait éparse puisque les trois pages citées sont toutes tirées du même site et sont également recensées sur la page suivante, en dessous du titre « CSS : Les flottants ».

Mais c'est vrai que ça n'est pas grand chose, et pour que ça soit complet il faut rajouter les articles présentant le concept de base (un article sur Alsacréations et un autre sur Openweb), et les tutoriels présentant des exemples de mise en page sur deux ou trois colonnes (un exemple sur covert prestige, un ou deux sur Alsacréations, plus les gabarits de page sur Alsacréations également).

Donc oui, c'est un peu éparpillé (mais raisonnablement, tout de même).

caroder a écrit :
A ce sujet, il serait peut-être intéressant de monter un wiki des CSS qui permettrait à tous de mettre en commun ses connaissances et donc de monter LA source de référence sur le sujet (mais peut-être un tel wiki existe-t-il déjà ?).

Hmm... il y a déjà eu des tests de wiki sur Alsacréations, et ça a été quelque peu abandonné.

Le problème d'avoir un wiki, c'est que les erreurs qui pourraient y être saisies ne seraient pas que des erreurs factuelles, mais aussi des erreurs de méthode... corriger une information erronée, c'est facile. Reprendre un article entier qui part sur une méthode casse-gueule et peu pertinente, c'est une autre paire de manches.

Le principe des tutoriels d'Alsacréations (proposés par les membres, corrigés et/ou validés par les modérateurs et administrateurs) me semble relativement efficace.

Reste à savoir si un tutoriel ou groupe de tutoriel sur « les flottants » serait pertinent. Le problème, c'est que les flottants n'ont pas été conçus pour servir à faire des mises en page générales sur plusieurs colonnes, mais pour placer des images et des petits blocs sur les bords d'un flux de contenu, ce contenu venant se loger autour. Utiliser les flottants pour faire des « colonnes », c'est un peu détourner l'outil d'origine, de même qu'on a par le passé détourné l'outil « tableau » pour faire de la mise en page.

Mais pourquoi pas, ça vaut peut-être le coup d'avoir un article « Tout vous saurez tout sur les flottants », quitte à le faire pointer vers les différentes ressources pertinentes disponibles.

caroder a écrit :
Exemple : j'ai utilisé pour mon propre compte ce fameux gabarit sus-nommé. Or ayant divers problèmes de positionnement de floats dans les floats, je me renseigne et je lis je ne sais plus où qu'il faut que les block en positionnement float ait une largeur. Ce que je ne vois pas dans #centre du toujours sus-nommé gabarit...

Il faut que les flottants aient une largeur (du moins s'ils ont un contenu dépassant quelques mots), oui. Mais div#centre dans le gabarit que tu pointes n'est pas un élément flottant !

Tu retrouveras un exemple proche de ce gabarit, mais avec des explications un tout petit peu plus développées, sur la page suivante :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
(tiens, une que Mikachu n'avait pas citée...)

Florent V. a écrit :

Tu retrouveras un exemple proche de ce gabarit, mais avec des explications un tout petit peu plus développées, sur la page suivante :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
(tiens, une que Mikachu n'avait pas citée...)

Oué je l'avais pas vu, c'est le bord** ton site

Mikachu a écrit :
Oué je l'avais pas vu, c'est le bord** ton site

Ben oué, c'est surtout des pages que je crée pour faire des tests ou bien pour pas réécrire 15 fois la même chose sur le forum. Pas vraiment une base documentaire, donc.

C'est pour ça qu'il faudrait que je reprenne les trucs vraiment exploitables pour les publier sur Alsacréations...

Remarque, sur http://www.covertprestige.info/ressources c'est le premier lien de la section « Tests et petits tutoriels HTML et CSS - Exemples de mise en page ».