Faire en sorte que els vignettes passent a la ligne.

Tout d'abors bonjours a tous.

J'ai decide d'ecrire ici car un probleme delicat s'est posé a moi, et j'aimerais le resoudre proprement.

Dans mon site web, j'utilise un menu en postion float a droite, afin que le texte "coule" autour. L'effet marche tres bien sur la plupars des pages.

J'ai cependant un probleme avec certainnes pages. Sur ces pages, j'utilise aussi des float mais cette fois-ci, a gauche, pour presenter des listes d'elements (applets java).

Cette presentation est tres pratique, car elle permet a ma liste de s'adapter a la taille de la fenetre, et d'aller a la ligne au bon moment. Mais cela pose un probleme quand elle tombe sur le bas du menu. En effet, les elements preferent aller en haut de la page plutot que d'aller a la ligne, ce qui est tres inestetique.

Un exemple vaut meiix qu'un long discrous, voici la page en question : http://deadal.nix.free.fr/cubetest/4x4x4.php

L'effet indesirable se produit presque avec toutes les resolutions. La liste des cubes arrive au niveau du menu et ne passe pas a la ligne mais prefere se caler sous le menu.

Si quelqu'un a deja ete confronté au probleme . . .

Bonjour et bienvenue sur ce forum,

Il s'agit d'un comportement normal des flottants.
Ce qu'il te faudrait, c'est un bloc qui contienne toutes les vignettes flottantes, et qui soit lui-même repoussé par le menu flottant.
À priori, on utilisera un conteneur neutre :

<div class="serie-vignettes">
	<div class="vignette">...</div>
	<div class="vignette">...</div>
	<div class="vignette">...</div>
	...
</div>

Problème : par défaut, les éléments flottants ne repoussent pas les blocs, mais uniquement leur contenu (texte, images, autres éléments flottants...), donc ça ne suffira pas.

Pour que le bloc div.serie-vignette perde la capacité à être survolé par un flottant, il faudra utiliser un contexte de formatage.

Marche à suivre :

<style type="text/css">
div.serie-vignette {
	overflow: auto;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div.serie-vignette {
	height: 1%;
	overflow: visible;
}
</style>
<![ endif]-->

Le overflow: auto crée le contexte de formatage (on peut aussi utiliser un overflow: hidden) dans tous les navigateurs modernes, dont IE7. Pour IE6 et inférieurs, c'est plus compliqué : on est obligé de leur adresser un correctif, via un commentaire conditionnel (voir la FAQ au sujet des commentaires conditionnels, si besoin). En attribuant à div.serie-vignette une hauteur fixe, on lui confère le layout (faire une recherche sur le concept de HasLayout si besoin), dont un des effets est d'empêcher le bloc qui a le layout de se glisser sous les flottants.
Modifié par Florent V. (04 Mar 2007 - 13:36)

Merci de ta reponse.

Cela devrait convenir. Dommage qu'on ne puisse faire Quelque chose qui limite la largeur sur laquelle s'etale les cubes seukement au niveau du menu.

Je pense que je vais faire comme tu me conseilles