28220 sujets

CSS et mise en forme, CSS3

Probleme mise en page sans tableaux : assez particulier

Bonjour à tous,


J'ai commencé à chercher pour faire un layout sans tableaux html. Le soucis c'est que ce que je souhaite faire est deja assez compliqué pour debuter (quoi que,j'ai reussi a faire les tutos et à les comprendre mais ca ne suffit pas pour ce que je veux faire).

Donc voici ce que je souhaite faire : http://zaxworld.free.fr
Le truc, c'est que je souhaite faire ce genre de choses mais avec une particularité :
Dans les menus de gauche et droite, je place plusieurs modules (imaginons : module1 module2 dans la colonne gauche et module3 et module4 dans la colonne de droite. entre deux : le contenu)

Donc en gros mon principe serait de mettre chacun des modules dans des divs non imbriqués. afin de pouvoir changer leur disposition sans toucher au code html (mettre module1 à droite et module3 a gauche par exemple).

Donc j'ai fait des tests mais le probleme qui se pose alors c'est le chevauchement. J'explique en gros mon test avec lequel j'ai reussi a avoir ce que je veux :

J'utilise des positions absolues et des tailles de blocs en pourcentages. Comme ça, ca passe au poil mais probleme : le chevauchement des blocs lors du redimensionnement de la fenetre de navigation.

Donc a coté de ça j'ai fait un second test : utiliser un float:left. Mais là le probleme qui se pose est que dans le menu de gauche, une fois que les differents modules sont placés, la partie du milieu se place en dessous à droite du menu gauche Smiley decu

Voila, donc je lance un appel à l'aide car j'ai beau chercher partout je ne trouve pas ce que je cherche ou alors ca pose des problemes (comme le chevauchement...)

Merci d'avance
++
zax-tfh a écrit :
J'utilise des positions absolues et des tailles de blocs en pourcentages. Comme ça, ca passe au poil mais probleme : le chevauchement des blocs lors du redimensionnement de la fenetre de navigation.


Si tu positionnes pour une largeur de conteneur initiale donné (ou une fourchette de largeur), c'est normal.

zax-tfh a écrit :

Donc a coté de ça j'ai fait un second test : utiliser un float:left. Mais là le probleme qui se pose est que dans le menu de gauche, une fois que les differents modules sont placés, la partie du milieu se place en dessous à droite du menu gauche Smiley decu


Problème de modèle de boîte (box-model) propriétaire IE sans rapport avec les flottants, qui sont la solution qui convient ici. Fais une recherche sur le sujet dans ce forum.
Salut,

merci pour la reponse, je suis tombé sur quelques articles en poussant les recherches vers cette direction. Malheureusement, je crains que l'utilisation du float va impliquer une contrainte d'ordre dans le html non ? c'est a dire que le premier div va etre le plus a gauche. et ça, je ne peux pas. en fait, les divs ne sont pas ordonés ou plutot, quand je parle de pouvoir changer la disposition des blocs cela implique de ne pas toucher au html et donc de conserver l'ordre des divs.

En fait, j'ai beau lire les tutos et tout ça, je n'arrive pas a avoir LE tilt...je comprend bien ce que les propriétés font, mais je pense que dans mon cas il me faut ruser et combiner les propriétés mais ca ne me saute pas encore aux yeux Smiley decu

je me demande donc si, dans mon cas, je ne ferais pas mieux de passer par du absolute...
Tu ne pourras pas faire cela :

<body>
<div id="module_1"></div>
<div id="module_2"></div>
<div id="module_3"></div>
<div id="module_4"></div>

<div id="la_page"></div>
</body>

et changer a loisir les places de module_x juste en touchant le code CSS tout en gardant un design fluide : c'est a dire avec chacun des modules qui s'adapte a son contenu et chacun des modules se trouvant dans la meme colonne bien en dessous les uns des autres.

Avec position obsolute : tes modules ne se placeront plus les uns sous les autres sans ajustement (pénibles et peu fiables) de ta part au cas par cas.

Avec des float : pas possible non plus et la il faut lire les quelques regles (il y en a 9 ou 10) qui regissent le positionnement des blocs float pour le comprendre.

Donc une des solutions c'est de fait des modules imbriqués dans un conteneur que tu placeras a droite et/ou a gauche comme je l'ai fait par exemple ici : http://afbilou.free.fr/gabarit/gabarit_01.html
dans ce cas là ok, j'avais deja vu la solution. Je me posais juste la question de savoir s'il etait possible de faire ce que je voulais au dessus car ca aurait été un must !

Bon eh bien, je pense que je vais voir autrement alors, c'est pas grave.
Merci bien !
Je pense que tu souhaitais faire cela :
http://afbilou.free.fr/gabarit/gabarit_02.html
Malheureusement ca ne marche pas car un element float ne peut etre positionné dans la page au dessus d'un element (float ou non) qui se trouve avant lui dans le flux du code HTML.
Cette regle explique que le module 3 soit plus bas que ce que l'on souhaite !le module 3 etant ecris dans le code HTML apres le module 2, il ne peut pas se trouver plus haut que lui a l'affichage via un float.

NB : il y a un bug de positionnement sous IE qui fait que le resultat est celui que l'on souhaite ... mais c une mauvaise gestion de la part d'IE qui e respecte donc pas la regle citée plus haut.
Heu... Et si vous vous souveniez, tout de même, qu'un document HTML doit être cohérent en version brut, sans CSS, positionnement et tout le tralala ? Smiley cligne

Après, on pourra expliquer comment combiner float et déplacement avec la position relative, par exemple, pour intervertir la position de deux éléments.

Mais après : d'abord, ensuite et encore à la fin, un HTML qui tient la route, svp
c'est justement cette question de positionnement brut que je n'arrive pas à saisir dans mon cas particulier.
Car si je souhaite pouvoir intervertir, il faut que les elements soient détachés (donc aucune imbrication de div). Or, je ne demande que ca de pouvoir faire quelque chose de clean au niveau du positionnement (ce que je fais sans css). Mais pour la suite, ca ne compliquerai pas, voire rendrai pas impossible le repositionnement ? (cf mon exemple de module1.... ou on interverti un element du menu de gauche avec un du menu de droite, si imbrication il y a, les modules ont le block menu comme parent donc impossible d'intervertir)


merci pour vos precisions
Sujet clos
Aller à