[HTML/CSS] Grille d'images (3x5)

[Résolu/Fermé]
Signaler
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
-
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
-
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

2 réponses

Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
61
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".
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
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 :(
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
61
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.
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
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 ?
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
61
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.
Messages postés
129
Date d'inscription
mardi 24 novembre 2009
Statut
Membre
Dernière intervention
5 septembre 2012
8
Ok merci :)