Menu

Inserer une liste à 3 colonnes dans Div Scrollable

- 10 juil. 2018 à 11:47
Bonjour,
Alors voila je suis en train de coder mon site web perso dont la partie Portfolio, j'ai décidé de faire mon porte folio avec des listes et en choisissant un max-width, définir le nombre de colonnes.
Cependant je veux que ces contenus restent dans une div et ne débordent pas, et jouer avec le overflow pour mettre une barre de scroll.
Mais j'ai un cherché sur le web et je ne trouve pas la bonne solution.
Quelqu'un saurait m'aider ?

Voici mon site web: hugorobitaillie.com

Le html de la page Portfolio
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Hugo Robitaillie</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

  </head>
  <body>
    <div id="page">
      <div id="menu">
        <div>
          <div class="content">
            <ul>
              <li>
                <a href="index.html">
                  <img src="img/logo.png" alt="logo insidponnible">
                </a>
              </li>
              <li>
                <a href="about.html">À PROPOS</a>
              </li>
              <li>
                <a href="#">PORTFOLIO</a>
              </li>
              <li>
                <a href="#">SERVICES</a>
              </li>
              <li>
                <a href="#">CONTACT</a>
              </li>
            </ul>
          </div>
          <div class="content" id="mentions">
            <p> À propos . © hugo robitaillie 2018</p>
          </div>
        </div>
      </div>
      <div id="droite">
          <div id="parcour" class="parr">
            <div class="container">
              <div class="container" id="portfolio">
                <div id="top">
                  <h2>PORTFOLIO</h2>
                </div>
                <div>
                  <div id="contenu-portfolio">
                      <ul id="list-portfolio">
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                        <li>
                          <a href=""><img src="img/pfgraek.png" alt=""> </a>
                        </li>
                      </ul>
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>

    </div>
  </body>
</html>




Le Css du site ( page portfolio en bas)

body{
  margin: 0px;
  font-family: 'Montserrat', sans-serif;
}
h2 {
  text-align: center;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}
h4{
  text-decoration: underline;
}



/*------------------------------------------*\
                  Accueil
\*------------------------------------------*/



#menu{
  float: left;
  width: 15%;
  min-height: 100vh;
  background-color: #262626;
  color: #e3e3e3;

}
#menu ul{
  display: inline-block;
  text-align: center;

}
#menu li{
    list-style-type : none;
    margin-top: 50px;
    margin-bottom: 50px;
    font-weight: bold;
}
#menu a{
  color: #e3e3e3;;
  text-decoration: none;
}
#menu img{
width: 50%;
}
#mentions{
  height: 30vh;
  position: relative;
}
#mentions p {
  position: absolute;
  bottom: 0;
  font-size: 12px;
  padding-left: 10%;
}
#droite{
  float: left;
  background-image: url("../img/bg.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100%;
  background-attachment: fixed;
  width: 85%;
  min-height: 100vh;
}
#Cercle{
  color: #e3e3e3;
  width: 400px;
  height:  400px;
  margin-top: 150px;
  background-color: #262626;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  border: 15px solid #e6b300;
  box-shadow: 0 0 45px 0 #262626 ;
}
#contenu{
  padding-top: 100px;
}
.titrepage{
  font-size: 25px;
  font-weight: 900;
}
#buttonaccueil{
  padding-top: 40px;

}
#buttonaccueil p{
  margin: 0px 120px;
  padding: 10px;
  border: 2px solid #FFF;
}
#buttonaccueil a{
  color: #e3e3e3;
  text-decoration: none;
}



/*------------------------------------------*\
                  About
\*------------------------------------------*/


#about.container{
  padding: 50px 15%;
}
#about{
  margin: 3% 10%;
  color: #e3e3e3;
  background-color: #262626;
  border-radius: 5%;
  border: 15px solid #e6b300;
  box-shadow: 0 0 45px 0 #262626 ;
}
#about-content img{
  width: 20%;
  float: left;
  border-radius: 50%;
  margin: 100px 0px 0px 50px;

}
.avatar{

}
#desc{
  flex-basis: 70%;
  padding: 15px;
  margin-left: 150px;
  height: 100%;
  text-align: justify;
}

#desc p{
  font-size: 15px;
  margin-left: 100px;
  margin-right: 100px;
}
#menuabout{
  padding-bottom: 20px;
  display: inline-block;
  justify-content: center;
}
#menuabout li{
  list-style-type : none;
  font-weight: bold;
  display: inline-block;
  float: left;
  margin-left: auto;
  margin-right: auto;
  }
  #menuabout li a {
  color: #e3e3e3;;
  text-decoration: none;
  margin-left: 25px;
  margin-right: 25px;
}



/*------------------------------------------*\
                  Parcour
\*------------------------------------------*/



#parcour.container{
  padding: 50px 15%;
}
#parcour{
  margin: 3% 10%;
  color: #e3e3e3;
  background-color: #262626;
  border-radius: 5%;
  border: 15px solid #e6b300;
  box-shadow: 0 0 45px 0 #262626 ;
}
#parcour-desc{
  flex-basis: 70%;
  padding: 15px;
  margin-left: 50px;
  margin-right: 50px;
  height: 100%;
  text-align: justify;
}



/*------------------------------------------*\
                  Portfolio
\*------------------------------------------*/
#droite-portfolio{
  float: left;
  background-color: #F0F0F0;
  min-height: 100vh;
  width: 85%;
}
#list-portfolio img{
  width: 240px;
}
#list-portfolio{
  overflow: scroll;
}
#list-portfolio li{
  float: left;
  height: 320px;
  padding: 0 1px 1px 0;
  width: 240px;
  overflow: hidden;
  }
#parcour .parr{
  height:500px;
  overflow:auto
}


Je vous remercie d'avance

Afficher la suite