[Problème] images dans tableau sans aucun espace entre elles

[sfpierre]

Bonjour,
j'ai besoin de réaliser un bloc d'image, un peu comme sur ce site, mais 9 images en carré, avec d'autre qui s'ouvrent en" mousse on"

Mon pb est que si je les mets un à une, en responsive, elles se mettent les unes sous les autres, si je les mets dans un tableau, ce qui évite le retour à la ligne de ces dernières, j'ai des espaces entre chaque photo...

L'idéal serait une configuration css pour des tableau sans aucun espace ? Mais est ce possible ?
Merci pour votre aide.

[ghazal]

Re : images dans tableau sans aucun espace entre elles

Salut,
regarde là :

http://codepen.io/quatmo/pen/xKIze

Téléchargeable via le bouton Export, tout en bas à droite

et adapte pour joomla.
Ca s'appelle "effect-chico".

[sfpierre]

Re : images dans tableau sans aucun espace entre elles

Merci en effet c'est chouette !! en revanche, qd tu dis qu'il faut adapter pour joomla, cela veut dire que tu entre le code html dans l'article, en mettant les bonnes ref pour les images,mais pour le css, comment le mettre dans le template sans intérférer avec ce dernier ?

[ghazal]

Re : images dans tableau sans aucun espace entre elles

Ca dépend un peu de ton template.
Il faudrait rajouter une feuille css spécifique dans ton template.
Sais-tu comment faire ?

1ere chose à faire :
les specs de body à virer, tu n'en as pas besoin.
Ensuite, les noms de class css génériques comme "container" ou "grid", à changer car ils peuvent être utilisés dans le template, genre,
<div class="container">
.container
--> <div class="moncontainer">
--> .moncontainer

ensuite, dans, par ex.

a {
color: #4f7f90;
text-decoration: none;
outline: none;
}

Sur les balises html type a, h2, section, etc ..., préciser où, comme :
.moncontainer a {
color: #4f7f90;
text-decoration: none;
outline: none;
}
.moncontainer section
.moncontainer h2
.moncontainer figcaption

En revanche, à mon avis, pas la peine sur des balises type
<figure class="effect-lily">
puisqu'elles ont un nom de class très particulier.

Précise aussi une font-family, si tu ne veux que ce soit celle de ton template qui est reprise.
Sur .moncontainer, ca devrait le faire.

Bref, du taf.
Préparer et tester avant hors joomla.
Avec Firebug pour firefox activé, bien sur.

Insérer l'ensemble avec un éditeur non-WYSIWYG, pour éviter les "tambouilles" des éditeurs WYSIWYG.