[HTML/CSS] Grille d'images (3x5)
Résolu/Fermé
Digit@lChord
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
-
5 févr. 2012 à 13:36
Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 - 5 févr. 2012 à 16:30
Digit@lChord Messages postés 129 Date d'inscription mardi 24 novembre 2009 Statut Membre Dernière intervention 5 septembre 2012 - 5 févr. 2012 à 16:30
Bonjour,
Je cherche a faire une grille d'image (de miniatures) en css/html ou le titre de l'image s'afficherais par dessus chaque images.
En gros voici ce que je veut faire : http://img827.imageshack.us/img827/6869/correctgrid.png
Sauf que je n'arrive pas a placer le titre par dessus l'image et en bas de cette même image.
Du coup moi j'ai sa : http://cluster1.easy-hebergement.net/
Merci d'avance ! ;D
Je cherche a faire une grille d'image (de miniatures) en css/html ou le titre de l'image s'afficherais par dessus chaque images.
En gros voici ce que je veut faire : http://img827.imageshack.us/img827/6869/correctgrid.png
Sauf que je n'arrive pas a placer le titre par dessus l'image et en bas de cette même image.
Du coup moi j'ai sa : http://cluster1.easy-hebergement.net/
Merci d'avance ! ;D
A voir également:
- [HTML/CSS] Grille d'images (3x5)
- Editeur html - Télécharger - HTML
- Des images - Guide
- Images enregistrées - Forum Blender
- Ou sont enregistrées les images ✓ - Forum Bluetooth
- Image cliquable html ✓ - Forum Réseaux sociaux
2 réponses
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
Modifié par dariumis le 5/02/2012 à 14:07
Modifié par dariumis le 5/02/2012 à 14:07
Salut, il faut utiliser un position:absolute dans ton css sur le div "title" (div#grid li .title {}), puis je pense que tu devrait déclarer le div "title" après l'image pour que le titre ce retrouve vers le bas, puis jouer avec les margin du div "title".
Digit@lChord
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
Modifié par Digit@lChord le 5/02/2012 à 14:30
Modifié par Digit@lChord le 5/02/2012 à 14:30
Oui ^^ Je l'avais fait sauf que non, j'ai attribué a .title
- position: absolute;
- margin-top: 60px;
Et a priori, sa s'affichais correctement (exactement comme sa : http://img827.imageshack.us/img827/6869/correctgrid.png
Sauf que .title a une taille de police précise, une police précise, un padding précis, donc il ne s'affichera pas exactement de la même façon suivant les navigateurs...
Comparaison de Firefox et Chrome : http://img829.imageshack.us/img829/3443/firechromeb.png
Le .title sur firefox est plus grand que sur google chrome (d'1px vers le bas)
Certe ce n'est pas une très grande difference, mais pour des sites plus "professionnels" sa peu poser problème.
je suis sur qu'il y a un moyen de "coller" .title en bas de l'image mais je ne sais plus c'est quoi :(
- position: absolute;
- margin-top: 60px;
Et a priori, sa s'affichais correctement (exactement comme sa : http://img827.imageshack.us/img827/6869/correctgrid.png
Sauf que .title a une taille de police précise, une police précise, un padding précis, donc il ne s'affichera pas exactement de la même façon suivant les navigateurs...
Comparaison de Firefox et Chrome : http://img829.imageshack.us/img829/3443/firechromeb.png
Le .title sur firefox est plus grand que sur google chrome (d'1px vers le bas)
Certe ce n'est pas une très grande difference, mais pour des sites plus "professionnels" sa peu poser problème.
je suis sur qu'il y a un moyen de "coller" .title en bas de l'image mais je ne sais plus c'est quoi :(
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
5 févr. 2012 à 14:43
5 févr. 2012 à 14:43
Je viens de tester, moi perso je vois aucune différence entre chrome et ff sur ton site, par contre avec ie7 le fond du div "title" disparait, et avec ie 8 il est bien plus opaque que sur ff ou chrome.
Digit@lChord
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
5 févr. 2012 à 14:49
5 févr. 2012 à 14:49
Oui il faudra que je mette un background-color normal avec un simple "opacity:0.7" pour IE et son problème avec le rgba.
Et si toi tu ne vois aucune différence alors je pense que je vais le laisser comme sa pour le moment ;)
PS: tu utilise quoi pour voir à la fois IE 7 et IE 8 ?
Et si toi tu ne vois aucune différence alors je pense que je vais le laisser comme sa pour le moment ;)
PS: tu utilise quoi pour voir à la fois IE 7 et IE 8 ?
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
Modifié par dariumis le 5/02/2012 à 15:06
Modifié par dariumis le 5/02/2012 à 15:06
en fait quant tu es sur ie tu fais f12 et là il te propose de permuter de version ;), mais sinon le positionnement à l'aire correct sur ie aussi.
Digit@lChord
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
5 févr. 2012 à 16:30
5 févr. 2012 à 16:30
Ok merci :)
