Salut à tous !

J'essaye actuellement de faire un site web pour présenter mes créations graphiques et autres machins et sur l'une des pages, j'aimerais faire un effet de tuiles comme on peut voir sur windows 8, mais avec des images.

J'utilise Materialize CSS et je galère un peu, n'étant pas un développeur web. Avec la doc je me débrouille mais dès qu'il s'agit de trucs un peu plus avancés c'est la fin.

Donc pour le moment, j'en arrive à quelque chose de ce genre : http://puu.sh/nICAk/960e4fae7d.jpg

J'aimerais juste faire en sorte qu'il n'y ai plus d'espacement verticale entre les images.

Voici le code du CSS pour la partie des images :

.portfolio img
{
float: left;
line-height: 0;
width: 32%;
margin: 2px;
}

Merci d'avance pour votre aide !

essaye :

padding:0px;
margin:0px;

Ce que tu cherches à faire, c'est ce qu'on appelle un "effet masonry", et c'est pas faisable en css... en tout cas pas sans utiliser flexbox (qui est suffisamment compris par les navigateurs pour pouvoir être utilisé), ou un plugin js comme, par exemple, masonry ou isotope.

D'accord merci Lisarael, une dernière petite question du coup, est-ce que c'est possible de conjuguer Materialize avec flexbox ?

Je n'ai jamais travaillé avec materialize, mais ça reste du css... donc oui, moyennant plus ou moins de bidouille.

D'accord, merci de ta réponse, je vais essayer ça de mon côté.
Dès que j'ai des réponses, je viendrais surement les mettre ici histoire d'aider ceux qui se posent les mêmes questions.

Qu'est-ce que j'aime apporter une réponse sans que l'auteur n'en ai rien à faire

Mdr!
Je ne pense pas que ta solution aurait résolut de le problème, quand j'avais souhaiter utiliser le même agencement d'images sur un ancien projet, j'etais parti sur du JS avec masonry. Vraiment bien fait au passage.

En CSS pure, je ne pense pas que ce soit possible nonplus, le pauvre est vite perdu lorsque les images n'ont pas la même hauteur.

Bon courage.

Le 17 mars 2016 à 16:55:59 Oga95 a écrit :
(...) En CSS pure, je ne pense pas que ce soit possible nonplus, le pauvre est vite perdu lorsque les images n'ont pas la même hauteur.

Avec flexbox et object-fit, c'est jouable.

Le 16 mars 2016 à 22:03:06 lisarael a écrit :
Ce que tu cherches à faire, c'est ce qu'on appelle un "effet masonry", et c'est pas faisable en css... en tout cas pas sans utiliser flexbox (qui est suffisamment compris par les navigateurs pour pouvoir être utilisé), ou un plugin js comme, par exemple, masonry ou isotope.

Mon examen de janvier avec flex-box (une semaine avant la remise) :

Sinon, je te conseil d'utiliser directement masonry (un code javascript) pour avoir ce que tu veux. Je l'ai utilisé pour un projet de portfolio et assez facile à paramétrer.
=> http://masonry.desandro.com/

Ahah merci les gars !

Finalement je m'en suis sorti avec Masonry, c'est top ce truc !