Bonjour,

j'essaye d'implémenter sur mon site la labrairie Animated Masonry Gallery : http://simbyone.com/demo/animated-masonry-gallery-with-filters/

Voici ce que j'obtiens :

Comme vous pouvez le voir, lorsqu'il commence a y avoir un certain nombre de photo, celles-ci commencent à déborder sur mon footer.

Voici une image de la gallery avec le footer normal car pas beaucoup de photo :

Voici mon code Html :

{% block plateforme_content %}
    {% if albums is defined %}
        <div id="gallery">
            <div id="gallery-header" style="background-color: #fff;margin-bottom: 15px;">
                <div id="gallery-header-center">
                    <div id="gallery-header-center-left">
                        <div id="gallery-header-center-left-icon"><span class="iconb" data-icon="&#xe23a;"></span></div>
                        <div id="gallery-header-center-left-title">Tous les albums</div>
                    </div>
                    <div id="gallery-header-center-right">
                        <div class="gallery-header-center-right-links" id="filter-all">Tous les albums</div>
                        {% for album in albums %}
                            <div class="gallery-header-center-right-links" id="filter-{{ album.slug }}">{{ album.nom }}</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div id="gallery-content">
                <div id="gallery-content-center">
                    {% if photos is not empty %}
                        {% for photo in photos %}
                            <a data-fancybox="gallery" data-srcset="{{ asset('img/album/'~user.id~'/'~user.id~'_'~photo.album.nom~'/'~photo.imageName) }}" data-caption="<h4>{{ photo.titre }}</h4><p>{{ photo.description }}<p>" href="{{ asset('img/album/'~user.id~'/'~user.id~'_'~photo.album.nom~'/'~photo.imageName) }}">
                                <img src="{{ asset('img/album/'~user.id~'/'~user.id~'_'~photo.album.nom~'/'~photo.imageName) }}" alt="{{ photo.titre }}" class="all {{ photo.album.slug }}"/>
                            </a>
                        {% endfor %}
                    {% else %}
                        <div>
                            Il n'y a aucunes photos dans cet album
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% else %}
        Il n'y a aucun album photo pour le moment.
    {% endif %}
{% endblock %}

Je n'ai pas implémenté de CSS, car celui-ci est géré automatique par la librairy via c'est propre fichier CSS + JS.

Avez-vous une idée de comment résoudre ça ?

Merci beaucoup d'avance

Salut,

C'est dommage que tu ne mettes pas le CSS car le problème vient très certainement de là...

A première vu on dirait que les flottants ne sont pas arrêtés.

Problème résolu :

rajouter ceci apres la div qui a pour id "gallery" :

        <div class="clearfix"></div>

-
Edité par romsVLM 15 novembre 2017 à 10:36:02