28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je ne trouve pas la réponse à un problème qui doit être très simple...

Comment choisit-on l'espacement entre les images qui sont à même la <div> ?

Je souhaite placer une trentaine d'images, les unes après les autres et les espacer en largeur et en hauteur. Mais je ne me vois pas créer une boite pour chaque image...

La page est ici

Merci !
Modifié par Djano (14 Nov 2005 - 14:47)
Bonjour,

Dans ta feuille de style, tu peux mettre :
#mondiv img {
margin:10px;
}

Où ton div porte l'id "mondiv".

a+
Merci beaucoup agilis, cela fonctionne, en effet.

Avant de résoudre, un autre petit problème qui s'est greffé par dessus :

Chaque image est accompagnée de son titre, et j'aurais bien voulu que le titre reste "collé" à son image... Là, les titres se retrouvent trop espacés.
Administrateur
Djano a écrit :

Chaque image est accompagnée de son titre, et j'aurais bien voulu que le titre reste "collé" à son image... Là, les titres se retrouvent trop espacés.

Tu as supprimé les marges (margin, padding) par défaut sur les balises <h*> ?
Je viens de le faire, ça ne fonctionne pas.

J'ai tenté un text-align : left, mais le titre se place en dessous de l'image, et non à sa suite (à droite)...
Administrateur
Sur ton lien d'exemple, je ne vois pas de titre associé à l'image, donc j'ai du mal à m'imaginer exactement ce que tu veux faire et ce que tu as déjà fait Smiley ohwell
Le titre, c'est juste le numéro du bulletin (n1, n2, n20...). Je l'ai mise en ligne avec les derniers essais...
Administrateur
Djano a écrit :
Le titre, c'est juste le numéro du bulletin (n1, n2, n20...). Je l'ai mise en ligne avec les derniers essais...

OK, mais dans ce cas, il faudrait le baliser comme tel (avec une balise de type bloc pour qu'il s'affiche sous l'image), puis faire les réglages habituels : supprimer toutes les marges sur la balise, puis décaler au besoin avec un positionnement relatif.

En fait, je te propose une bonne méthode de Pompage pour l'affichage de ta galerie photo : http://pompage.net/pompe/listesdefinitions/
Merci Raphaël, très interressant ce tuto.

Et cette solution s'applique très bien à ce que je voulais faire, une sorte de gallerie vite faite, en fait.

Yep !