Accordéon: centrer les images

[maximumuse]

Bonjour à toutes et tous  

J'ai installé un menu accordéon, merci pour le tuto et le code, chapeau !  

Bien sûr je suis en train de l'adapter au forum, pour les couleurs c'est assez facile à trouver, mais pour les images c'est plus délicat.

Aucune difficulté pour changer d'image, c'est dans le code HTML

mais impossible de régler leur alignement, de plus je n'arrive pas à comprendre quelle est leur taille idéale, elles sont dans un container figure.

J'ai bidouillé le CSS dans .accordion figure full, avec margin: auto ou tex-align: middle,  mais il se produit des trucs bizarre et aucun centrage.

voilà le site:

http://cinema.forums-actifs.com/

Merci d'avance

[Invité]

Salut maximumuse,

il faut modifier le div qui est géré en pourcentage ici:

Code:

.accordion figure .full { width: 100%; height: 100%; }

et ici:

Code:

.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white ;}


Ceci devrait suffire:
On change le pourcentage en pixels

Code:


.accordion .slide > div { height: 300px; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white; }
.accordion figure .full { width: 100%; height: 290px;margin:auto; }


Code:


.accordion .slide > div


Est le conteneur, donc plus important que

Code:

 
.accordion figure .full


Qui lui contiendra l'image et on lui applique un margin:auto pour centrer l'image.

En gros , il faut que tu appliques toujours une valeur sur la hauteur plus importante a:

Code:

.accordion .slide > div

et une valeur inférieure sur la hauteur a:

Code:

 
.accordion figure .full


a++

[maximumuse]

hé hé merci Milouze, pour la solution et surtout pour tes explications très claires !

sujet résolu

vive Vous