Blocs flottants

Bonjour à tous,

je checrhe à faire quelque chose comme ça :



Je m'explique : Chaque bloc est une image ou un div. Je souhaite qu'ils viennent occuper tout l'espace disponible, même si ils sont situés après. Ce qui donne une page à géométrie variable en fonction de la résolution.
J'ai trouvé une page qui rend visuellement un peu ça, même si elle ne "flotte" pas :
http://www.csszengarden.com/?cssfile=005/005.css

Voyez-vous des solutions ?

Merci

Image complémentaire avec des blocs de tailles différentes (en bas).

Bonjour et bienvenue à toi...

Pour ma part, je pense que tu vas avoir pas mal de difficultés à réaliser ceci.
Je ne suis même pas totalement certaine qui tu puisses modifier à ce point la disposition des blocs à partir d'un même code HTML.

Mais si cela est quand même faisable, je doute que tu puisse partir de la même base CSS, car à part tes blocs 1-2-3-4-5, qui ne posent pas de soucis à priori, la position des autres blocs différe totalement d'une version à l'autre...
Modifié par Cygnus (09 Nov 2006 - 12:24)

Bonjour,

Même en prenant en compte qui soit "éventuellement" possible d'arriver à les ordonner et disposer de cette manière sans les placer, je doute que tu arrives cependant à modifier leur placement dans l'ordre du flux.
Sachant que celui ci fonctionne de gauche à droite et de haut en bas, je doute que tu arrive à positionner ton bloc 10 avant les blocs 8 et 9 en 800x600 et après en 1024x768. Pour celui la c'est sur. Je pense que tu auras de toute manière des problèmes pour les blocs 7 à 10.

Salut
J'ai pas essayé la chose, mais essaie au cas ou de mettre tout tes blocs en float: left sauf le 10 en float: right.

En même temps, même si en loccal, tu obtient l'effet escompté, un redimmensionement de la fenêtre fera de toute façon valser la mise en page avec des flottants...a+

Merci pour vos réponses. En fait le schéma plus haut est un schéma de principe. Ce que je souhaite c'est que les blocs flottent et s'auto-organisent en fonctions des espaces disponibles.

Effectivement, le HTML chargeant de haut en bas ça semble chaud. Mais si quelqu'un à des petis hacks, je suis preneur !

;)

Re,

d'autres personnes auraient-elles des infos ?
>>>
pour coccimaster : je cherche à obtenir des configurations différents en fonction de la résolution, du redimenssionement de la fenetre etc... ça doit bouger

Merci à tous
Modifié par hihihi35 (09 Nov 2006 - 19:05)

Toujours dans l'idée, comment faire pour que le bloc de texte aille à gauche ?

les blocs rouge sont des divs qui servent de "baseline". Dans le premier il y a 3 photos. Dans celui du dessous il y à un div texte. Tout est en float left, pourtant le bloc de texte reste à droite alors qu'il aurait la place d'etre à gauche.

Voilou

a écrit :
Effectivement, le HTML chargeant de haut en bas ça semble chaud. Mais si quelqu'un à des petis hacks, je suis preneur !

Les hacks, c'est le mal .

a écrit :
comment faire pour que le bloc de texte aille à gauche ?

Est-ce que tu as essayé de réduire sa largeur ? Il y a suffisament de place à gauche pour qu'il se glisse à côté de l'image ?

Bonjour,

je reviens à la charge pour savoir si quelqu'un aurait des solutions à mon problème. En vrac, j'ai pensé aux pseudo classes before et after pour donner des comportements aux images suivante et précedentes. Il y a également les propriétés display (j'aimerais trouver un "compromis" entre block et inline).

Avez-vous des idées ?

Merci