benschwarz/gallery-css

The first item from the slider is some pixels up from the rest

Closed this issue · 4 comments

evandropastor commented

I've tested the gallery-css and I found a problem: the first item of the list is few pixels up from the rest, and it make the animation strange. Here is the code that I use:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css?v=1.0">

    <link rel="stylesheet" href="gallery.theme.css">
    <link rel="stylesheet" href="gallery.css">
      <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
    <style>
        #container{
            width:900px;
            margin:auto;
        }
    </style>

</head>
<body>
    <div id="container">
        <div class="gallery items-3">
          <div id="item-1" class="control-operator"></div>
          <div id="item-2" class="control-operator"></div>
          <div id="item-3" class="control-operator"></div>

          <figure class="item">
            <img src="http://placedog.com/900/300" alt="" />  
          </figure>

          <figure class="item">
            <img src="http://dummyimage.com/900x300/292929/e3e3e3" alt="" />
          </figure>

          <figure class="item">
            <img src="http://dummyimage.com/900x300/ffffff/000000" alt="" />
          </figure>

          <div class="controls">
            <a href="#item-1" class="control-button">•</a>
            <a href="#item-2" class="control-button">•</a>
            <a href="#item-3" class="control-button">•</a>
          </div>
        </div>
    </div><!--end container-->
  <script src="js/scripts.js"></script>
</body>
</html>
benschwarz commented

Hey @evandropastor, if you wouldn't mind supplying your styles.css then I'd be happy to have a look at what is going on here.

evandropastor commented

Hello Ben,

Sorry about the delay. There is no styles.css. There is only the link to the file, but the file doesn't exist.

If you need any other info, please, let me know :)

Thanks!

benschwarz commented

Hey @evandropastor, it just occurred to me —You don't have any css reset defined, so the default margins on the <figure> elements are throwing your demo out of wack.

If you were to add figure { margin: 0; } to your CSS, then everything would look sharp.
Checkout how I structured my example in the ./examples directory of this repository.

Good luck!

evandropastor commented

Hey @benschwarz. You're right. The code works. But to make sure I've. Inserted this code bellow:

figure{
margin:0 0;
padding:0 0;
}

Thanks for the help :D