Alignement des images dans une galerie de miniatures

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par kgb203, 23 Janvier 2015.

  1. kgb203
    kgb203 Nouveau WRInaute
    Inscrit:
    6 Juillet 2003
    Messages:
    20
    J'aime reçus:
    0
    Bonjour à toutes et à tous,

    Je me tourne vers vous au sujet d'un problème pour lequel, malgré moult réflexion et autres bidouillages, je n'arrive pas à trouver de solution...
    Certains parmi vous ont certainement déjà été confrontés à la même problématique, et auront par conséquent, peut-être, une solution ?

    Cela concerne des galeries d'images dans un design réactif, images que je ne parviens pas à disposer comme je l'entends.

    Je vais essayer d'exposer le plus clairement possible mon problème :

    En haute résolution, par défaut, j'ai X rangées de 6 vignettes maximum. Le nombre total de vignettes varie selon la situation.
    Chacune des vignettes est stylée pour occuper 15% de la largeur du conteneur.
    Restent donc 10% de marges qui doivent se répartir entre les vignettes, MAIS ni devant la première, ni après la dernière de chaque rangée.

    En plaçant l'ensemble de la galerie dans un conteneur ayant pour propriété "text-align: justify;", cela ne fonctionne que si le nombre de vignettes est un multiple de 6 OU s'il est égal à "(6 * X) + 1".

    Dans le cas contraire, la présentation n'est plus celle qui est attendue (cf. captures d'écrans ci-dessous).

    [​IMG]
    [​IMG]

    Une solution eut été de placer chaque rangée d'images dans un conteneur lui étant propre, toujours avec un alignement justifié.
    Mais, le design étant réactif, cette solution n'est pas utilisable : lorsque la résolution diminue, le nombre de vignettes par rangée est susceptible de diminuer, et je ne peux pas me permettre un "display: none;" sur les dernières de chaque rangée, les vignettes devant toutes être affichées, qui plus est dans un ordre bien précis.

    J'ai tenté beaucoup de choses, mais rien ne s'est encore révélé satisfaisant, à moins de passer par un code assez sale en JS.

    Je suis peut-être passé à côté d'une astuce ou d'une propriété CSS, peut-être même toute bête ?
    Auriez-vous une idée ?

    Mon code de base :

    Code:
    <p class="galerie">
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    	<img src="xxxxxxxxxxxxxx" />
    </p>
    
    p.galerie {
    	position: relative;
    	text-align: justify;
    /*
    	-webkit-text-align-last: justify;
    	-moz-text-align-last: justify;
    	-ms-text-align-last: justify;
    	-o-text-align-last: justify;
    	text-align-last: justify;
    */
    }
    
    p.galerie img {
    	width: 15%;
    	margin: auto;
    	margin-top: 12px;
    	min-width: 80px;
    }
    /*
    	p.galerie:after { content: ""; display: inline-block; width: 100%; height: 1px; }
    */
    PS : toutes les miniatures seront toujours du même format...
     
  2. erestrebian
    erestrebian WRInaute occasionnel
    Inscrit:
    15 Juin 2007
    Messages:
    415
    J'aime reçus:
    0
    Bonjour,

    Dans le css, un float left sur l'image devrait permettre de solutionner la chose. Cependant, la balise p est normalement réservée à la présentation de texte et un div serait sans doute plus "juste".

    En espérant que ça aide,
     
  3. kgb203
    kgb203 Nouveau WRInaute
    Inscrit:
    6 Juillet 2003
    Messages:
    20
    J'aime reçus:
    0
    Bonjour Erestrebian,

    Je te remercie pour ta réponse.
    Tu as raison pour le div, j'ai apporté la modif (je comptais initialement ajouter un texte d'accroche au-dessus des vignettes, d'où le paragraphe).

    Hélas, le float, s'il aligne bien toutes les vignettes sur la gauche, supprime aussi les marges entre elles... :-(
     
  4. Blount
    Blount WRInaute impliqué
    Inscrit:
    18 Novembre 2010
    Messages:
    707
    J'aime reçus:
    0
    C'est vrai qu'elles sont chiantes ces marges :D

    À chaud comme ça, je te dirais bien de tenter un truc du genre : ajouter un conteneur dans ton conteneur.
    Si tu appliques une marge de 5px autour de tes images, tu peux annuler les marges des images en "extérieur" en mettant une marge négative au parent :
    Code:
    <div>
        <div style="margin: -5px;">
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
            <img src="xxxxxxxxxxxxxx" />
        </div>
    </div>
    
    Pour le coté "responsive", il faudra peut-être indiquer les tailles en %.
     
Chargement...
Similar Threads - Alignement images galerie Forum Date
Interro surprise pour les rois du CSS : Alignement en diagonale Développement d'un site Web ou d'une appli mobile 23 Juillet 2015
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
Alignement CSS + image Développement d'un site Web ou d'une appli mobile 17 Novembre 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
Alignement champ et fenêtre auto-completer Développement d'un site Web ou d'une appli mobile 29 Mars 2011
probleme alignement bouton en html Développement d'un site Web ou d'une appli mobile 14 Décembre 2010
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
Auto-Alignement d'une page web Développement d'un site Web ou d'une appli mobile 28 Octobre 2010
Problème d'alignement vertical en css Développement d'un site Web ou d'une appli mobile 14 Septembre 2010
css alignement input IE et firefox : perte de cheveux ! RESOLU Développement d'un site Web ou d'une appli mobile 5 Janvier 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice