Photo qui ne s'affiche pas correctement HTML 5

Résolu/Fermé
Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018 - 24 févr. 2018 à 10:29
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 24 févr. 2018 à 14:08
Bonjour à tous,

Je rencontre un petit problème auquel je ne sais pas faire face .. :/ Après des heures de recherche je ne trouve pas.. Je ne sais pas si c'est une bêtise ou que sais-je mais je n'y arrive pas..

En fait mon problème est que sur le site internet que j'ai réaliser n'affiche pas les images à l'endroit alors qu'elles le sont dans mes fichier.

Voici le lien du site : menuiseriedimitrischaff.be

Voici mon code pour les photos :

<!-- Gallery -->
            <section class="parallax-window tm-section tm-section-gallery tm-flex" id="gallery" data-parallax="scroll" data-image-src="img/bg-03.jpg">
                <div class="tm-page-content-width tm-flex-col tm-gallery-content">
                    <div class="tm-content-box-inner">
                        <h2 class="tm-section-title">Mes différents travaux réalisés</h2>
                        <!-- Add filtered gallery, 3:2 images -->
                        <div class="iso-section">
                            <ul class="filter-wrapper clearfix">
                                <li><a href="#" data-filter="*" class="selected opc-main-bg">Voir tout</a></li>
                                <li><a href="#" data-filter=".intérieur" class="opc-main-bg" >Aménagements intérieurs</a></li>
                                <li><a href="#" class="opc-main-bg" data-filter=".bardage">Bardages</a></li>
                                <li><a href="#" class="opc-main-bg" data-filter=".terrasse">Terrasses</a></li>
                                <li><a href="#" class="opc-main-bg" data-filter=".lambris">Lambris</a></li>
                                <li><a href="#" class="opc-main-bg" data-filter=".escalier">Escaliers</a></li>
                            </ul>
                        </div>
                        <div class="iso-box-section">
                            <div class="iso-box-wrapper col4-iso-box">
                            
                            	<!-- Intérieur -->
                                <div class="iso-box intérieur col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/interieur/gallery-img-01.jpg"><img src="img/interieur/gallery-img-01.jpg" alt="Image" class="img-fluid"></a>    
                                </div>
                                <div class="iso-box intérieur col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/interieur/gallery-img-02.jpg"><img src="img/interieur/gallery-img-02.jpg" alt="Image" class="img-fluid"></a>    
                                </div>
                        
                                <!-- Bardage -->
                                <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-01.jpeg"><img src="img/bardage/gallery-img-01.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-02.jpeg"><img src="img/bardage/gallery-img-02.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-03.jpeg"><img src="img/bardage/gallery-img-03.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-04.jpeg"><img src="img/bardage/gallery-img-04.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-05.jpeg"><img src="img/bardage/gallery-img-05.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-06.jpeg"><img src="img/bardage/gallery-img-06.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-07.jpeg"><img src="img/bardage/gallery-img-07.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-08.jpeg"><img src="img/bardage/gallery-img-08.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-09.jpeg"><img src="img/bardage/gallery-img-09.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-010.jpeg"><img src="img/bardage/gallery-img-010.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-011.jpeg"><img src="img/bardage/gallery-img-011.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-012.jpeg"><img src="img/bardage/gallery-img-012.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-013.jpeg"><img src="img/bardage/gallery-img-013.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-014.jpeg"><img src="img/bardage/gallery-img-014.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-015.jpeg"><img src="img/bardage/gallery-img-015.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-016.jpeg"><img src="img/bardage/gallery-img-016.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-017.jpeg"><img src="img/bardage/gallery-img-017.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-018.jpeg"><img src="img/bardage/gallery-img-018.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-019.jpeg"><img src="img/bardage/gallery-img-019.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-020.jpeg"><img src="img/bardage/gallery-img-020.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-021.jpeg"><img src="img/bardage/gallery-img-021.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-022.jpeg"><img src="img/bardage/gallery-img-022.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-023.jpeg"><img src="img/bardage/gallery-img-023.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-024.jpeg"><img src="img/bardage/gallery-img-024.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                 <div class="iso-box bardage col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/bardage/gallery-img-025.jpeg"><img src="img/bardage/gallery-img-025.jpeg" alt="Image" class="img-fluid"></a>
                                </div>
                                
                                <!-- Terrasse -->
                                <div class="iso-box terrasse col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/terrasse/gallery-img-01.jpg"><img src="img/terrasse/gallery-img-01.jpg" alt="Image" class="img-fluid"></a>
                                </div>
                                
                                <!-- Lambris -->
                                <div class="iso-box lambris col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/lambris/gallery-img-01.jpg"><img src="img/lambris/gallery-img-01.jpg" alt="Image" class="img-fluid"></a>
                                </div>
                                <div class="iso-box lambris col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/lambris/gallery-img-02.jpg"><img src="img/lambris/gallery-img-02.jpg" alt="Image" class="img-fluid"></a>
                                </div>
                                
                                <!-- Escaliers -->
                                <div class="iso-box escalier col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/escalier/gallery-img-01.jpg"><img src="img/escalier/gallery-img-01.jpg" alt="Image" class="img-fluid"></a>
                                </div>
                                <div class="iso-box escalier col-6 col-sm-4 col-md-4 col-lg-3 col-xl-3">
                                    <a href="img/escalier/gallery-img-02.jpg"><img src="img/escalier/gallery-img-02.jpg" alt="Image" class="img-fluid"></a>
                                </div>
                                
                            </div>                             
                        </div>
                    </div>
                </div>                
            </section>


Merci d'avance !
A voir également:

1 réponse

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 févr. 2018 à 13:52
Bonjour,

Comment ça les images ne s'affichent pas ?
elles s'affichent très bien... as tu au moins vidé le cache de ton navigateur ??

Au passage ... tes images sont trop lourdes...
Un logo en 9100 * 5600 ... ouaaaa.... 3 plombes pour qu'il s'affiche sur ta page !
revoie les dimension de tes images (passe les par un optimiseur...) car la ta page est trop chargée !

1
Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018
24 févr. 2018 à 13:54
Merci pour cette réponse, effectivement j'ai réussi pour les photos. Ce n'était pas dans le code m'enfin soit c'est réglé.

Peux-tu m'en dire plus sur l'optimiseur?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > Saafty Messages postés 37 Date d'inscription mardi 7 février 2017 Statut Membre Dernière intervention 1 décembre 2018
24 févr. 2018 à 14:08
0