CSS : galerie d'image façon Google Images
Fermé
Fetide68
Messages postés
746
Date d'inscription
dimanche 4 janvier 2009
Statut
Membre
Dernière intervention
16 septembre 2024
-
16 juil. 2014 à 19:57
bg62 Messages postés 23640 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 septembre 2024 - 17 juil. 2014 à 18:36
bg62 Messages postés 23640 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 2 septembre 2024 - 17 juil. 2014 à 18:36
A voir également:
- CSS : galerie d'image façon Google Images
- Enlever couleur lien css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
- Css download - Télécharger - HTML
- Css retour à la ligne ✓ - Forum CSS
- Tableau html bordure sans css ✓ - Forum HTML
2 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 17/07/2014 à 02:34
Modifié par animostab le 17/07/2014 à 02:34
Bonjour
la solution est en css avec les images dans un div ou la balise figure de html5 en display inline-block un petit calcul
exemple
html
css
tu peux rajouter un script si une image est trop haute qui reduit l'image
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
la solution est en css avec les images dans un div ou la balise figure de html5 en display inline-block un petit calcul
exemple
html
<div class="lesimages">
<figure><img src="image1.jpg"></figure>
<figure><img src="image2.jpg"></figure>
<figure><img src="image3.jpg"></figure>
<figure><img src="image4.jpg"></figure>
<figure><img src="image5.jpg"></figure>
<figure><img src="image6.jpg"></figure>
<figure><img src="image7.jpg"></figure>
<figure><img src="image8.jpg"></figure>
<figure><img src="image9.jpg"></figure>
<figure><img src="image10.jpg"></figure>
</div>
css
.lesimages {
width: 980px;
margin: 0 auto;
font-size: 0;
border:1px solid red;
}
figure {
display: inline-block;
width:154px;
height:auto;
margin:10px;
text-align:center;
padding:10px;
}
figure img {
vertical-align:middle;
width:100%;
border:1px solid black;
}
tu peux rajouter un script si une image est trop haute qui reduit l'image
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
bg62
Messages postés
23640
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
2 septembre 2024
2 381
17 juil. 2014 à 18:36
17 juil. 2014 à 18:36
lut;)
reprends la même recherche et regarde le code source, tu verras de suite qu'il n'y a pas que de la css et de plus que ce n'est pas de la ... tarte
bon courage:)
reprends la même recherche et regarde le code source, tu verras de suite qu'il n'y a pas que de la css et de plus que ce n'est pas de la ... tarte
bon courage:)
17 juil. 2014 à 02:11
Or sur Google, je trouve l'effet vraiment sympa...
Mais je garde ta solution sous le coude.
Au cas, pour t'aider en retour, si jamais. J'utilise beaucoup le framework CSS Knacss:
https://www.knacss.com/
Etant alsacien, j'en suis d'autant plus fier (même s'il n'est pas de moi).
Dans le script, tu as les grid et autogrid qui permettent des choses sympas...
Merci encore.
Je vais poursuivre les recherches....
Fetide