28172 sujets

CSS et mise en forme, CSS3

Images en quinconce

Bonjour,

Pour mon premier message sur le forum, j'espère que je ne vais pas demander quelque chose qui a été traité un million de fois. Après pas mal de recherches sur internet, je ne trouve rien qui réponde à mon problème.

Je voudrais mettre en page des images en quinconce, sans présumer de la largeur de l'écran du visiteur.
J'aimerais une mise en page de ce style : www.krop.com/muller/

La première chose qui vient à l'esprit est du genre :
#conteneur {
    height: auto;
    display:inline;
}
#conteneur  .image {
    float:left;
}

<div id="conteneur">
    <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
    <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
    ...
</div>


Résultat :

http://nsa21.casimages.com/img/2012/04/09/120409094942494813.jpg

Mais le problème est que les images qui apparaissent à la ligne commencent sur l'axe vertical à la coordonnée la plus basse des images de la ligne du dessus. En d'autres termes, on a des espaces vides, contrairement à l'exemple.


Sinon, pour contourner le problème, on peut créer des "colonnes" et obtenir le résultat souhaité, mais du coup cela n'est plus indépendant de la résolution du visiteur donc ce n'est pas ce que je souhaites.


// voir à la fin pour plus de lisibilité


Résultat : (plus d'espace "vide", les images sont en quinconce)

http://nsa21.casimages.com/img/2012/04/09/120409095441367831.jpg


Avez vous une idée pour arriver au résultat de l'exemple sans colonnes ?

La méthode est peut-etre très simple, je n'ai pas fait de CSS depuis des années.

Merci par avance Smiley smile

--------------------------------------------------------------------

// code de l'exemple 2

	#header	{
		position:fixed;z-index:100;top:0;left:0;width:100%;background-color:#FFF;
	}
	#main	{
		margin:100px 20px 0 40px;
	}
	#conteneur {
		height: auto; border: 2px solid red;	background-color:#9FC; display:inline;
	}
	#conteneur  .image {
		margin:8px;	float:left;	background-color:#666;
	}

---

<div id="header" style="height:80px;">   <h1>Titre</h1> </div>

<div id="main">
    <div id="conteneur">
        <div style="width:340px;background-color:#ff0000;float:left;">
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:450"><img src="vide.gif" width="300" height="450"></div>
        </div>
        <div style="width:340px;background-color:#ff0000;float:left;">
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:300"><img src="vide.gif" width="300" height="300"></div>
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
        </div>
        <div style="width:340px;background-color:#ff0000;float:left;">
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
        </div>
        <div style="width:340px;background-color:#ff0000;float:left;">
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:200"><img src="vide.gif" width="300" height="200"></div>
            <div class="image" style="width:300;height:300"><img src="vide.gif" width="300" height="300"></div>
        </div>
    </div><!--conteneur-->

Modifié par photograph (09 Apr 2012 - 21:53)
Administrateur
Bonjour,

y a-t-il un ordre précis à tes blocs ? Met des numéros sur tes images si c'est le cas Smiley cligne
Si tu connais les problèmes de float et clear (enfin c'est pas vraiment un "problème", c'est juste comme ça que ça fonctionne et ce n'est pas fait pour ton exemple, a priori) et que tu ne t'en sors pas c'est que c'est pas possible ainsi.
J'ai entendu parler de la bibliothèque JS masonry qui parait-il fonctionne très bien mais j'ignore s'il existe des alternatives ... (fais une recherche sur http://stackoverflow.com de ce mot, tu auras bien plus de cas d'utilisation)
Modifié par Felipe (10 Apr 2012 - 10:38)
Merci pour vos réponses Smiley smile

Felipe : non, il n'y a pas d'ordre pour les blocs, du moment qu'il n'y ait plus les espaces vides.
Par exemple sur le lien de hophop, je souhaite arriver à l'image "after" en partant de la situation actuelle "before".

La solution a donc bien l'air d'être à rechercher de ce coté.

Merci
Sujet clos
Aller à