positionnement des floats

[nyl auster]

bonjour à tous, je vais essayer de faire court. Je dois réaliser la structure d'un site à vocation pro (à moyen terme). Dès qu'on pourra embaucher un informaticien, on le fera, pour l'instant je suis chargé de réaliser la structure xhtml/css (enfin j'essaie de conserver le xhtml)bien que je sois débutant, j'essaie de faire au mieux. J'utilise notepad++ pour travailler.

J'ai réellement besoin d'un avis extérieur (même si je rencotre un expert d'ici peu, je voudrais avoir plusieurs sons de cloches); alors j'espère qu'un âme charitable voudra bin m'aider

voici un petit aperçu de la page d'acceuil, avec les principaux blocs. Les blocs en BLEU sont des pubs positionnéees en absolu, les float sont en VERT.

j'ai utilisé auparavant tous les positionnements pour la réaliser (tableaux, absolu, mélange entre absolu, tableaux, float); la dernière étant basé sur un systeme de float. (afin d'éviter d'utiliser des tableaux, et parce que en absolu l'agrandissement des polices était catastrophiques

Pour me faciliter la tache, j'ai regrouper plusieurs petits blocs dans un blocs spécifique, comme par exemple les trois petits blocs à gauche en haut sont contenus dans un grand bloc vert, que je déclare en float:left.

Le grand bloc à coté est aussi déclaré en float. Mais pour positionner les blocs de l'étage en dessous, je les ai regroupé (cf le cadre rouge) dans un grand bloc que je déclare en clear:left; et dans le quel j'applique à nouveau la technique des floats.

Idem pour en dessous, je réunis l'étage dans un grand bloc déclaré en "clear:left", puis j'utilise à l'intérieur les floats pour positionner les deux derniers blocsen bas .

Cette méthode es-elle valable, la création deces blocs supplémentaires n'est-elle pas un souci?

Modifié 24 Janvier 2007 par nyl auster

[nyl auster]

salut, bon mes explications sont un peu approximatives mais en gros est ce que ma méthode de réunir "par étage" des blocs de flottants est valable? (afin de pouvoir utiliser la propriété clear:float)? n'est-ce pas trop compliquer la page?

Quel serait selon vous la meilleure méthode pour cete mise en page?

Modifié 26 Janvier 2007 par nyl auster

[ghost]

Bonjour,

Ton croquis n'est pas visible, tu n'aurais pas un exemple en ligne ?

[nyl auster]

désolé pour le croquis pas beau, je l'ai fait avec un mulôt mort et paint

Le site est encore en local, mais je vais faire un croquis plus clair cette après midi, en espérant que tu sois encore dans le coin pour abréger mes tortures intérieures concernant le choix de positionnement à faire (ce smiley est tellement inutile qu'il fallait que je le mette.)

"Bonjour,

Ton croquis n'est pas visible, tu n'aurais pas un exemple en ligne ?"

tu veux dire que tu ne vois pas du tout mon croquis? parce qu'il apparait chez moi...

si jamais quelqu'un ne le voit pas, qu'il essaie en cliquant sur ce lien

http://www.midgard-hills.com/images/plan.jpg

Modifié 28 Janvier 2007 par nyl auster

[ghost]

Re,

Il manque quelques détails notamment si la hauteur est fixe et si il doit être extensible ?

[nyl auster]

Re,

Il manque quelques détails notamment si la hauteur est fixe et si il doit être extensible ?

Avec la cnfiguration en float, la page est extensible (le pied de page étant en clear:both, il tire le bloc conteur principal). mon croquis est une axpproximation pour montrer simplement le principe de réunir plusieurs float dans un bloc invisble pour faciliter la mise en page; et vous demander si cela était une méthode utilisée ou une mauvaise idée.

-

[ghost]

Re,

Bon je divise ton site en 2, a gauche un conteneur regroupant tous tes petits blocs et le header je suppose (width 75% en gros) et à droite un conteneur comprenant tes 2 blocs verticaux bleus (25%). Le tout dans un bloc global. (ouf !)

A mon humble avis, l'idée du positionnement en float dans le conteneur gauche et selon ton découpage est bonne, sauf qu'il est possible si ce conteneur ou celui de droite est en float qu'il y ait des interactions fâcheuses de tes clears dans ton conteneur gauche sur l'ensemble de la mise en page. En clair, un clear dans un conteneur lui même même déja en float on est pas sûr de ce qu'il va "clearer" !!. Mais c'est à tester (il y a des navigateurs ou ça passe d'autres non ...)

Pour remédier à cela, il faudrait éliminer le float sur les conteneurs droite ou gauche et là qu'un moyen en passer un en absolute et l'autre dans le flux avec un margin adéquat. Là un autre problème car un seul des 2 conteneurs pourra pousser le global (celui dans le flux). Si un des 2 conteneurs est toujours plus court que l'autre c'est jouable a coup de min-height etc mais si c'est aléatoire ben voir si la manip inverse est possible (avec les mêmes problèmes de blocs passant par dessus )...

Pour résumer, AMHA, pour ce type de mise en page ben ... Rien ne vaut un tableau pour éviter de monter une "usine à gaz" et avoir quelque chose de robuste au niveau compatibilité entre navigateurs. Mais d'autres plus érudits auront peut être d'autres solutions.

Bon courage.

[nyl auster]

héhé oui, tu as mis le doigt dessus, je pourrais aussi faire une version tableau qui aurait l'avantage d'être stable, mais vu que je suis en xhtml strict etc...j'aimerais essayé de faire une mise en page sans tableau. Bien que l'avantage du tableau c'est quand même sa stabilité, j'ai du mla à avoir autant confiance dans les floats qui sont mal compris par certais naviguateurs...

En clair, un clear dans un conteneur lui même même déja en float on est pas sûr de ce qu'il va "clearer" !!.

ha je je ne savais pas, mais dans mon cas y'a pas de clear à l'intérieur de mes conteneur floats autant que je me souvienne. Je vais quand même vérifier dans le doute.

Le résultat sous IE6, Firefox, Opera, Netscape, konqueror était identique (à peu de chose près); mais pour ce qui est de version antérieure de ces naviguateurs, je n'en ai aucun idée

merci de ton avis en tous cas !

PS: les gros blocs bleus (en haut et à droite) correspondent en fait à des pubs positionnées dans le flux (en haut) et en absolu (à droite), donc pas de souci de côté là;-)

Modifié 29 Janvier 2007 par nyl auster

[ghost]

Bonjour,

C'est donc tout bon, pas de soucis pour ton positionnement si ce n'est de garder un height suffisant pour que les pub (droite) ne passe pas sur le footer, ton bloc gauche reste dans le fux et ton ton footer n'a pas besoin de clear ...

[Monique]

Bonjour,

Ta structure étant assez complexe, une bonne méthode de travail c'est d'aller du général au particulier pour la construire.

Tu détermines d'abord les deux blocs principaux avec leur identificateur et les règles de style qui vont bien.

Puis dans chacun d'eux tu ajoutes les "sous-blocs", dans ceux-ci, les éventuels "sous-sous-blocs"...

Il est important de choisir des noms significatifs pour les identificateurs (id si le bloc est unique) ou les classes (class si un bloc ayant les mêmes règles de style est utilisé plusieurs fois), cela aide à s'y retrouver dans son code.

Il est utile de définir une couleur de fond provisoire pour chaque blocs, cela aide à visualiser leur position et l'espace réellement occupé.

Il est bon de prendre l'habitude de fermer immédiatement toute balise ouverte, avant même d'y ajouter du contenu... et de toujours ajouter du contenu, même fictif (un élément vide n'a pas le même comportement à l'affichage).

Quand de nombreux blocs sont imbriqués, il devient vite difficile de savoir auquel correspond une balise de fermeture, un commentaire est très utile pour y voir plus clair

<div id="contenu"> </div> <!-- fin bloc contenu -->

Et un dernier conseil pour la route : à chaque étape importante, faire une copie de sauvegarde quand le résultat obtenu est satisfaisant. Cela évite de devoir tout reprendre à zéro quand plus rien ne va à la suite d'une série de modifications

[nyl auster]

ok merci bien pour vos conseils, j'en conclus que je peux garder cette manière de procéder pour la structure finale. J'ai bien fait des sauvegardes à chaque étape, ce qu fait que j'ai aujourd'hui le choix entre une structure en:

-position absolues

-mélange float + quelques absolues

-tout en tableau

je suis un peu inquiet du résultat de la structure float sur d'anciens navigateurs mais cette méthode a l'avantage d'être conforme aux dernières recommandations du W3C et d'avoir un code source assez clair; donc je vais garder la structure basée principalement sur des floats (qui permet en plus un bon agrandissement des polices.)

Merci de vos avis

Modifié 29 Janvier 2007 par nyl auster

[Sarc]

Bonjour,

Effectivement la structure peut paraître compliquée, au premier abord... Mais nul doute qu'elle peut être simplifiée par le principe du "collage de maternelle" (expliqué dans un autre sujet, et pas assez important pour que je mette un lien !).

Ce qu'il manque sur ton croquis, ce sont les fonds. (Finalement je crois que je vais repartir sur mon collage maternelle). Tu te rappelles, quand on collait des gomettes et des morceaux de papiers découpés sur une grande feuille blanche ? Eh bien, c'est pareil ici. Sur ton croquis, je vois pas bien qui est quoi, et comment il est. Le cadre bleu en haut n'a pas besoin d'être positionné en absolu. C'est le premier élément de la page, il est donc placé par rapport "à la page blanche", donc un simple positionnement suffit. Il doit être centré dans la page, ou pas ? S'il n'est pas centré, tout sera plus simple... S'il est centré, un peu moins.

Ensuite, je trouve que tu as tendance trop souvent à parler de blocs... Les trois "trucs" en haut à gauche, regroupés, sont-ils vraiment des données à mettre en bloc ? A vue de nez, ça peut être tabulaire (à savoir plusieurs lignes, divisées parfois en plusieurs colonnes), donc pas besoin de les déclarer en "div", mais plutôt de placer une table au bon endroit...

etc, etc.

Je te conseille de dessiner ta page sous un logiciel de dessin : colorie tes zones (jaune, rouge, bleu, vert, orange, des couleurs flashantes, pour bien visualiser tes gomettes à coller les unes par dessus les autres). Puis rajoute du texte avec ton logiciel, rajoute des images à l'endroit où devront être mises des images, des exemples de publicités là où sera la publicité, etc...

Avec une image de ton site en tête, tu différencieras mieux les divers éléments, et on pourra alors discuter du code à adopter.

Avec un "croquis" sans réellement savoir qui va où et pourquoi, il est difficile de te conseiller.

Cependant tout ce qu'a dit Monique avant moi est à suivre

Voilà, si tu rajoutes une image, je pourrai donner un meilleur avis !

Bonne soirée

[nyl auster]

Le cadre bleu en haut n'a pas besoin d'être positionné en absolu. C'est le premier élément de la page

salut, je reppasserais lire ton message en entier mais je passe dans le coin pour préciser que mea culpa c'est de ma faute: il manque le haut du shéma contenant la bannière =+ le logo.

Cette pub esteffectivement positionnée dans le flux

Ensuite, je trouve que tu as tendance trop souvent à parler de blocs... Les trois "trucs" en haut à gauche, regroupés, sont-ils vraiment des données à mettre en bloc ? A vue de nez, ça peut être tabulaire (à savoir plusieurs lignes, divisées parfois en plusieurs colonnes), donc pas besoin de les déclarer en "div", mais plutôt de placer une table au bon endroit..

j'appele bloc aussi les éléments h1 ou les img déclarée en display block (tous les blocs en haut à gauche sont en fait des "h1" et des "img", regroupées dans un div.