Discussion :

[yvanobi]

Bonjour, apres plusieurs recherches ... je m'en remet à vous.

en fait, plus que mon probleme, je cherche à connaitre la meilleur facon de réalisé une petite gallerie ...

en piece jointe, un gabarit au dimension. à voir pour comprendre.

je souhaite positionner 2 lignes de 5 vignettes.
mon probleme vient du fait, quà droite, je ne veux pas de padding. dois-je faire un style genre "class" avec padding right : 0 pour cette image ?

j'ai entendu dire qu'il etait possible de feinter un alignement avec un text-align justify pour les images, en est il de meme pour les div ? ( car mes vignettes doivent etre des divs, je pense ) au passage de la souris, le contour change de couleur.

sachant que ces vignettes sont constitué d'un lien, + d'une image dedans

pour cela, est il preferable d'utiliser .. :

- 2 ligne de div, avec des divs imbriquées dedans
- des balise paragraphe ?
- des ul, il ?

Voila, je cherche à connaitre la facon la plus optimisé de le faire.
Je pense que chacun à sa methode, mais peut etre y en a t-il une qui est plus adaptée dans ce cas ??

Merci beaucoup d'avance.

[adiGuba]

Salut,

j'ai entendu dire qu'il etait possible de feinter un alignement avec un text-align justify pour les images, en est il de meme pour les div ?

Tu dois pouvoir faire de même avec les DIV si tu les déclares comme des éléments inline-block :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display: inline-block;

Par contre je crois que ce n'est pas très bien supporté par tous les navigateurs...

( car mes vignettes doivent etre des divs, je pense ) au passage de la souris, le contour change de couleur.

Si c'est juste pour cela, pourquoi ne pas simplement utiliser la bordure des images, voir un padding !



Mais il reste le défaut du text-align:justify la dernière ligne n'est pas correctement aligné !
Si tu connais à l'avance la taille de tes vignettes et la largeur de ta zone il y a surement une meilleure façons de faire...


a++

[yvanobi]

Bon, je reviens avec mon problème qui apparait un peu plus " en condition réèl "

Voila, j'ai réalisé ce dont j'avais parlé, avec des balise li et ul

c'est visible ici :

http://e-vanographic.fr/print.html

j'ai opté pour les li, puisque je n'avais pas de réponses concertnant la meilleur facon de faire ..

par contre, j'ai toujours ( et ai constaté ) quelques problemes :

à contrario de la premiere page, le li, ne réagit pas comme une div, meme en " block" ici, au passage de la souris, mon fond ne change pas comme il devrait le faire, ( cf page index.html du site en question ) et il m'est impossible de lui appliquer une class ( par exemple, toutes les li ont un margin right de 25 px, sauf la derniere pour rentrer dans le gabarit ) j'ai du le mettre manuellement.

Quelqu'un peut-il m'expliquer pourquoi ?

Merci d'avance.

[adiGuba]

j'ai opté pour les li, puisque je n'avais pas de réponses concertnant la meilleur facon de faire ..

C'est une bonne solution pour représenter une liste d'élément

par contre, j'ai toujours ( et ai constaté ) quelques problemes :

à contrario de la premiere page, le li, ne réagit pas comme une div, meme en " block" ici, au passage de la souris, mon fond ne change pas comme il devrait le faire, ( cf page index.html du site en question )

Je ne comprend pas : le fond change bien de couleur pour un rose/mauve...

et il m'est impossible de lui appliquer une class ( par exemple, toutes les li ont un margin right de 25 px, sauf la derniere pour rentrer dans le gabarit ) j'ai du le mettre manuellement.

Pareil : je ne comprend pas pourquoi tu ne pourrais pas utiliser une classe CSS !?!?

a++

[yvanobi]

Merci de te préoccuper de mon probleme Adiguba ^^

voila quelques précision :

Effectivement le fond change, mais c'est juste le border qui change
mon <li> contient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
            <li>
                <a href>img src="blabla.jpg"/></a>
                <div class="def1">// Advertising</div>
            </li>

dans ce cas, meme le fond du div devrait changer de couleur avec un style genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#gallery li:hover {
	background-color:#925c92;
}

Et concernant les class, j'ai essayé d'appliquer une class

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.image_droit { margin-right:0; }

sur les <li class="image_droit">, et pas possible, j'ai du le mettre en manuel

Erreur toute bete ? une idée ?
Merci encore !

[adiGuba]

dans ce cas, meme le fond du div devrait changer de couleur avec un style genre :

#gallery li:hover {
background-color:#925c92;
}

Tu as fixé une hauteur de 120px à ton <li>
Donc ton DIV se retrouve en dessous et "sors" de ton <li>, avec une couleur de fond transparente (valeur par défaut). Il reste donc sur le noir.

Supprimes le height: 120px et cela devrait mieux marcher

Et concernant les class, j'ai essayé d'appliquer une class

.image_droit { margin-right:0; }

sur les <li class="image_droit">, et pas possible, j'ai du le mettre en manuel

Erreur toute bete ? une idée ?

Ce qui donne en gros ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#gallery li { margin-right: 25px; }
.image_droit { margin: 0; }

Les deux définitions sont applicables, et il prend la plus spécifique. Dans ce cas précis l'identification par ID semble prioritaire car plus détaillé...

Il faut détaillé ta définition pour qu'il n'y ai plus d'ambiguité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#gallery li { margin-right: 25px; }
#gallery li.image_droit { margin: 0; }

a++