[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
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
A voir également:

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
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".
0
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
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 :(
0
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
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.
0
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
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 ?
0
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
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.
0
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
Ok merci :)
0