[Résolu]Eviter les "trous" avec float: left

Bonjour à tous,

Je m'arrache les cheveux depuis quelques heures sur un problème que je pensais pourtant simple...

J'aimerai positionner des blocs de façon précise (rien de spécial jusqu'ici me direz-vous). Plutôt que d’essayer de décrire le résultat souhaité, le voici en image :

http://imageshack.us/m/855/1866/capta.jpg

Avec un float: left; sur les blocs, j'obtiens des trous, par exemple 1, et 2 sont bien placés mais 3 se place à 5. J'ai donc essayé d'utiliser le plugin jQuery Masonry (http://desandro.com/resources/jquery-masonry/) mais celui-ci ne respecte l'ordre des blocs.

Connaissez-vous un moyen d'obtenir le résultat voulu ?

Merci
Modifié par Juli3n (18 May 2011 - 19:32)

Juli3n a écrit :
J'ai donc essayé d'utiliser le plugin jQuery Masonry (http://desandro.com/resources/jquery-masonry/) mais celui-ci ne respecte l'ordre des blocs.

C'est effectivement le mode de rendu de ce plugin qui optimise a sa façon l'affichage des floattants de taille disparate sur plusieurs ligne

Juli3n a écrit :

Connaissez-vous un moyen d'obtenir le résultat voulu ?

Non , a moins d' en faire un tetris like , hors de mes competences.

Merci pour ta réponse, le seul moyen selon toi est donc d'utiliser le positionnement absolu ?

Si tes blocs ont une taille prédéfinie (il me semble que c'est le cas), alors il n'y a pas vraiment de problème à le faire en absolu... c'est d'ailleurs bien plus simple que de le faire en flottant

Il m'est déjà arrivé d'avoir 10 pixels de différences entre Chrome et les autres navigateurs malgré un reset css sans que je puisse comprendre pourquoi. C'est pourquoi je suis un petit peu frileux à utiliser le positionnement absolu.

C'est là que ce n'est pas normal alors...

Aurais tu une version en ligne qu'on puisse regarder le code (et le résultat), et éventuellement te donner un coup de pouce ?

Maintenant, si le problème persiste (et que le positionnement absolu n'est pas approprié) alors en ce qui me concerne je ne m'y connais pas suffisamment pour pouvoir t'aider plus...

Merci pour ton aide, je vais mettre une version en ligne dans les prochains jours (je ne suis actuellement pas chez moi). En gros, uniquement sous Chrome, l'élément (ul) était décalé de 10 pixels à gauche. Chose bizarre, en zoomant sur la page, l'élément était bien positionné... Avec FF ou IE, aucun problème.

Merci encore

il FAUT utiliser des colonnes..

Quand tu fait un float, il faut que tu t’imagine un escalier.
Chaque bloc se positionne sur une marche qui s'adapte à sa hauteur, ensuite on met les marches les unes sous les autres 2 par 2. Du coup si ton premier bloc fait 50px de hauteur, que ton suivant fait 120px de hauteur alors le troisieme sera sous le premier avec un décalage de (120-50) 70px.

Ce comportement est normal il permet de hiérarchiser les blocs d'une composition DANS DES COLONNES.

pour reprendre ton image d'exemple :
col1 (width:300px float:left)
col2 (width:200px float:left)

dans col1 sous le bloc 1 :
col3(150px left)
col4(150px left)

j'espère que cela t'as aidé
Modifié par ptitvincent (17 May 2011 - 18:48)

moi aussi je verrais des colonnes , avec les colonnes CSS3 ça devrait être facile mais il faut changer l'ordre de tes blocs :

arf je vois pas le code je reviens ...


voilà tu mets tout le contenant en mode 2 colonnes
bloc 1
les blocs [ 3 6 4 7 9] dans un même conteneur lui aussi en mode 2 colonnes
puis les blocs 2 5 8 10 et 11
Modifié par Arialia (17 May 2011 - 19:24)

Je ne comprends pas la logique colonne que vous décrivez.

Celle-ci fonctionnerait pour mes blocs 1,3,4 et 1, 5, 8, 11 mais les blocs 7 et 9 me paraissent implacable selon cette logique : le bloc 7 serait à la même hauteur que le bloc 6 non ?

Je me suis un peu amusée avec les colonnes CSS voilà le résultat ( testé que sous FF4) :
http://www.arialia.fr/essais/colonnesCSS3/

bon par défaut les colonnes css font la même largeur ...
pas encore compris la valeur de column-width ....

je te conseil plutot de le faire avec des div en suivant le schema de logique que je t'ai donné plus haut

petit coup de pouce

<div id="gauche">

    <div id="bloc1"></div>

    <div id="col1">
        <div id="bloc3"></div>
        <div id="bloc6"></div>
     </div>

     <div id="col2">
         <div id="bloc4"></div>
         <div id="bloc7"></div>
         <div id="bloc9"></div>
     </div>

</div>

<div id="droite">

    <div id="bloc2"></div>
    <div id="bloc5"></div>
    <div id="bloc8"></div>

    <div id="col3">
        <div id="bloc10"></div>
        <div id="bloc11"></div>
     </div>

</div>

*{float:left;}

#gauche
{
   width : 300px;
}

#col1, #col2
{
    width : 150px;
}

#droite
{
    width : 200px;
}

#col3, col4
{
    width : 100px;
}

Voila, est-ce plus clair ainsi ?

Et tu n'as pas besoin de plus de règles avec cette construction.

Merci pour vos réponses.

Je vous tiens informés dans la soirée !

J'ai testé la méthode de ptitvincent, le résultat est impeccable ! Sans utiliser de positionnement relatif ou autre. Vraiment super ! Merci à toi Arialia, je préfère retenir la solution de ptitvincent car non CSS3 et donc plus compatible

Encore merci !

j'ai eu la flemme de le dire mais effectivement la solution de ptitvincent est la meilleure côté compatibilité navigateur , de plus des largeurs de colonnes comme les tiennes créent des artefacts vu que les colonnes CSS3 sont égales ...

au passage column-width indique la largeur de colonne : si le conteneur peut créer plusieurs colonnes de cette largeur il le fait sinon non

Merci pour l'info Ariala, je n'avais encore jamais vu ce paramètre, son "automatisation" est assez classe je trouve

@Juli3n - content d'avoir pu t'aider, à bientot.