[HTML/CSS] Grille d'images (3x5)
Résolu
Digit@lChord
Messages postés
129
Date d'inscription
Statut
Membre
Dernière intervention
-
Digit@lChord Messages postés 129 Date d'inscription Statut Membre Dernière intervention -
Digit@lChord Messages postés 129 Date d'inscription Statut Membre Dernière intervention -
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
- Grille tombola vierge à imprimer 50 cases - Télécharger - Création musicale
- Images enregistrées - Forum Blender
- Visualisez cette image avec un logiciel d'édition d'images. combien y a-t-il de pixels noirs sur le camion ? ✓ - Forum Python
2 réponses
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".
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 :(
