Forum : Scroll Horizontal besoin d'aide

Je voudrais faire un scroll vertical de ma gallerie je suis dessus depuis 3 jours :((

HTML

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>L'Oeil de Joyce</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>

           $(document).ready(function() {

                $('nav .have_subnav ul').hide();
                $('nav .have_subnav').toggle(
                        function() {
                            $(this).find('ul').slideDown("fast");
                        },
                        function() {
                            $(this).find('ul').slideUp("fast");
                        }
                    );
                });
        </script>
    </head>

    <body>
        <div id="nav">
            <div id="nav_content">
                <div id="logo">
                    <h1>L'oeil de Joyce</h1>
                </div>

                <nav>
    <ul>
          <li><a href="#">Décoration</a></li>
          <li class="have_subnav"><a href="#">Mariage</a>
              <ul>
                  <li><a href="#">p1</a></li>
                  <li><a href="">p2</a></li>
              </ul>
          </li>
          <li class="have_subnav"><a href="#">Shooting</a>
              <ul>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="">Item 2</a></li>
              </ul>
          </li>
    </ul>
</nav>
            </div>
        </div>
        <div id="content">
            <div id="gallerie">
                <p>
                <img src="http://loeildejoyce.fr/_data/i/upload/2015/01/08/20150108161902-311209a5-me.jpg" height="550px">
                <img src="http://loeildejoyce.fr/_data/i/upload/2014/08/18/20140818195700-ed19404b-me.jpg" height=550px>
                <img src="http://loeildejoyce.fr/_data/i/upload/2015/01/08/20150108161902-311209a5-me.jpg" height="550px">
                <img src="http://loeildejoyce.fr/_data/i/upload/2014/08/18/20140818195700-ed19404b-me.jpg" height=550px>
                </p></div>
        </div>
    </body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(http://fonts.googleapis.com/css?family=Coming+Soon);
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #e8e8e8;
    font-family: 'Open Sans Condensed', sans-serif;
}

/* NAVIGATION */
#nav {
  display: inline-block;
  float: left;
  background-color: #fff;
  min-height: 550px;
  width: 220px; 
  height: 100%;
  position: fixed;
  top: 0;
  left: 50px;
}
#nav_content{
    display: inline-block;
    width: 100%;
    height: 550px;
    position: absolute;
    top: 50%;
    margin-top: -275px;
}
#nav_content h1{
    font-family: 'Coming Soon', cursive;
    width: 95%;
    color: #333;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    text-align: center;
    font-size: 28px;
    border: 1px solid #d8d8d8;
}
#nav ul{
    width: 95%;
    margin: auto;
}
#nav ul li:first-child{
    padding: 5px;
    list-style: none;
    border-top: 1px solid #d8d8d8;
}
#nav ul li{
    padding: 5px;
    list-style: none;
    border-bottom: 1px solid #d8d8d8;
}
#nav ul li ul li a{
    text-transform: capitalize;
}
#nav ul li ul li:first-child{
    border: 0px;
}
#nav ul li ul li{
    border: 0px;
}
#nav ul li a{
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px;
    color: #333;
}

/* CONTENUE */
#content{
    display: inline-block;
    width:calc(100% - 270px);
    height: 550px;
    position: absolute;

    opacity: 0.9;
    top: 50%;
    margin-top: -275px;
    margin-left: 270px;
}
#gallerie{
    width: 98%;
    height: 550px;
    margin: auto;
    overflow-y: scroll;
}
#gallerie img{
    float: left;
    background-color: #000;
    height: 550px;
    opacity: 0.9;
}
#gallerie img:hover{
    background-color: #000;
    opacity: 1;
}

Nakin

Réponse acceptée

Salut,

Je pense que ta galerie n'a pas de hauteur du fait que tes images à l'intérieur soient en float left.
Essaye de rajouter un clear:both sur l'after de ta galerie !

Lartak

Réponse acceptée

Bonjour.
Quel est l'intérêt de donner la même hauteur à des éléments enfants que les éléments parents ?
Pour schématiser :

content => height: 550px
- gallerie => height: 550px
  - gallerie img => height: 550px

Et un petit conseil, il est inutile de redonner une même valeur à un élément en hover que dans son état normal (je fais bien sûr référence au background-color).

Nairolf D

Auteur

@Nakin : Je l'ai ajouté, cela na rien changé :(

@Lartak: Merci, J'ai appliqué t'es conseil ;)

J'ai finalement trouve, merci encore à vous et à google, en plus je me suis trompe je voulais un scroll horizontale...

Nakin

Ca serait chouette de partager ta solution.

Scroll Horizontal besoin d'aide

4 réponses