Probleme menu gallerie photo non fonctionnel

Fermé
lyllouvpl - 20 mai 2022 à 19:30
 DoctorHow - 20 mai 2022 à 22:42
Bonjour,
J'ai ce code non fonctionnel d'images avec un menu mais je ne sais pas comment enlever les puces et mettre les boutons les uns à côté des autres. Avez vous un exemple?

Qu'es ce qui ne va pas dans mon code? Comment faire fonctionner le menu des images?


HTML:

<!DOCTYPE HTML>

<html>
    <head>
        <title>Landed by HTML5 UP</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
    <!-- <noscript><link rel="stylesheet" href="assets/css/js.css" /></noscript>  -->
    <!-- four:::-->
<script src="assets/js/galeryct.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--end four-->
 
    </head>
    <body class="is-preload landing">
         
            <!-- Four -->
 
<div class="container-fluid" style="margin-top:20px;">
<h1 style="text-align:center;color:hotpink;">Portfolio Gallery Filter</h1><br>
<div class="row">
 
 
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="showall-tab" data-toggle="pill" href="#showall" role="tab" aria-controls="showall" aria-selected="true">Show All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="Cars-tab" data-toggle="pill" href="#Cars" role="tab" aria-controls="Cars" aria-selected="false">Cars</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="City-tab" data-toggle="pill" href="#City" role="tab" aria-controls="City" aria-selected="false">City</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="Forest-tab" data-toggle="pill" href="#Forest" role="tab" aria-controls="Forest" aria-selected="false">Forest</a>
  </li>
</ul>
</div><hr noshade style="margin-top:-20px;">
<div class="container">
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="showall" role="tabpanel" aria-labelledby="showall-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 3</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 3</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 3</div></div>
     
  </div>
  <div class="tab-pane fade" id="Cars" role="tabpanel" aria-labelledby="Cars-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 3</div></div>
  </div>
  <div class="tab-pane fade" id="City" role="tabpanel" aria-labelledby="City-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 3</div></div>
  </div>
  <div class="tab-pane fade" id="Forest" role="tabpanel" aria-labelledby="Forest-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 3</div></div>
  </div>
</div>
</div>
 
</div>
 
 
     
             
    </body>
</html>


CSS:


.
Portfolio {
    position: relative;
    margin: 5px;
    border: 2px solid black;
    float: left;
    width: 180px;
    transition-duration: 0.4s;
    border-radius: 5px;
    animation: winanim 0.5s ;
-webkit-backface-visibility:visible;
    backface-visibility:visible;
    box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)
}
 
.Portfolio:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
 
.Portfolio img {
    width: 100%;
    height: auto;
    border-radius: 5px
}
 
.desc {
    padding: 5px;
    text-align: center;
    font-size: 90%;
    background:black;
    color:hotpink
}
 
.nav {
    padding:20px;
    margin-left:340px;
    margin-top:-30px;
}
 
.nav li a {
    margin:5px;
    padding: 15px 50px;
    font-size:16px;
    color:hotpink;
    background: #000;
    transition-duration: 0.4s;
}
.nav a:hover {
    background:#333;
}
.nav .active {
    background-color:hotpink !important;
    color:#fff;
}
 
@keyframes winanim {
    0%{opacity:0;transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
     
}




???BESOIN D'AIDE SVP!!!


Configuration: Windows / Firefox 100.0
A voir également:

1 réponse

Salut pour les puces regardez du côté de la propriété list-style-type.
https://www.w3schools.com/cssref/pr_list-style-type.asp

Si vous voulez mettre une image personnalisée(à la place des puces parce que moi je ne voit pas de boutons mais des liens avec la balise <a>) il faut la rajouter dans le HTML.
Pour le positionnement vu que vous utilisez bootstrap autant le faire en bootstrap

https://duckduckgo.com/?q=apprendre+bootstrap

Sinon sans bootstrap faites une recherche sur "positionnement CSS" vous trouverez beaucoup de réponses puisque c'est quelque chose de basique et commun et qu'il existe d'innombrables solutions(qui doivent être adaptés au HTML de votre page bien sûr, le HTML définira l'ordre et selon les éléments leurs caractéristiques par défaut-dont le positionnement dans le flux par rapport aux autres éléments- et qui peuvent être changées avec CSS).

Sinon sans me pencher sur le code précisément(je n'ai pas le temps ni l'envie) ce qui ne va pas c'est que vous utilisez des DIV qui n'indiquent rien de la nature du contenu et sont donc à proscrire pour indiquer la nature des contenus avec des éléments adéquats(donc pas des div qui n'ont aucune valeur sémantique et sont donc à proscrire sauf pour des contenus non pertinents dans la page et encore).

https://fr.w3docs.com/apprendre-html/les-elements-semantiques-html5.html

ps: évidemment si vous utilisez bootstrap(et son système de grille) autant renoncer au positionnement que vous utilisez directement dans le CSS, c'est soi l'un soit l'autre sauf si vous aimez vous compliquer la vie et perdre l'avantage des 2 méthodes. Pour rappel Boostrap ce sont des règles CSS incluse par la programmation(JavaScript en l’occurrence ce qui explique que vous chargiez un fichier jquery qui est une librairie logicielle en JavaScript)
0