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; }

Scroll Horizontal besoin d'aide

4 réponses

content => height: 550px

gallerie => height: 550px

gallerie img => height: 550px