Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by pavz
pavz
10,309 Points

How to do an image gallery, with fixed width 980px?

Please, help me to figure out the correct CSS declarations to realize what you see in the mockup: https://www.dropbox.com/s/mv2u2pzzm4cfyss/gallery_mockup.png?dl=0

  1. The width of the gallery container should be fixed - 980px;
  2. The white space between the images should be 60px, but the left margin on each first image in the line (and also right margin on each right image) should be 0px.

Question: How do we make it work?

Here's my current code, but it doesn't seem to be working.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <form>
        <input type="text" name="search" id="searchBox"><br>
    </form>
    <div class="gallery">
    <ul id="imageGallery">
        <li><a href="images/01.jpg"><img src="images/Thumbnails/01.jpg" alt="Hay Bales"></a></li>
        <li><a href="images/02.jpg"><img src="images/Thumbnails/02.jpg" alt="Lake"></a></li>
        <li><a href="images/03.jpg"><img src="images/Thumbnails/03.jpg" alt="Canyon"></a></li>
        <li><a href="images/04.jpg"><img src="images/Thumbnails/04.jpg" alt="Iceberg"></a></li>
        <li><a href="images/05.jpg"><img src="images/Thumbnails/05.jpg" alt="Desert"></a></li>
        <li><a href="images/06.jpg"><img src="images/Thumbnails/06.jpg" alt="Fall"></a></li>
        <li><a href="images/07.jpg"><img src="images/Thumbnails/07.jpg" alt="Plantation"></a></li>
        <li><a href="images/08.jpg"><img src="images/Thumbnails/08.jpg" alt="Dunes"></a></li>
        <li><a href="images/09.jpg"><img src="images/Thumbnails/09.jpg" alt="Countryside Lane"></a></li>
        <li><a href="images/10.jpg"><img src="images/Thumbnails/10.jpg" alt="Sunset"></a></li>
        <li><a href="images/11.jpg"><img src="images/Thumbnails/11.jpg" alt="Cave"></a></li>
        <li><a href="images/12.jpg"><img src="images/Thumbnails/12.jpg" alt="Bluebells"></a></li>
    </ul>
    </div>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/script.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>

CSS

body {
    font-family: sans-serif;
    background: #fff;
    box-sizing: border-box;
    margin: 0;
}


ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: block;
    text-align: center;
    max-width: 980px;
}

ul li {
    display: inline-block;
    background:white;
    margin: 30px 60px 15px 0px;
    text-align: center;
    max-width: 100%;
}

ul li img {
    display: block;
    margin: 0;
}

a {
    text-decoration: none;
}
Matthew Smart
Matthew Smart
12,567 Points

Hi pavel , just a quick tip. if you indent each line of your code here it will read in a code block and be easier for users to read

Matthew Smart
Matthew Smart
12,567 Points

Also could you please provide your html code and I will help you out :)

1 Answer

Matthew Smart
Matthew Smart
12,567 Points
Matthew Smart
Matthew Smart
12,567 Points

Here you go

 body {
    font-family: sans-serif;
    background: #fff;
    box-sizing: border-box;
    margin: 0;
 }
 ul{
    width:980px;
    padding:0;
    margin:0;
}
ul li{
    margin-left: -3px;
    display: inline-block;
    margin-right: 60px;
    margin-bottom:57px;
 }
ul li img {
    display: block;
}
ul li:nth-child(4n+4){
    margin-right:0;
}

this works, however, i'm not a front-end developer, and my CSS skills are not as good as others on here. This will do what you want it do, but where i use -3px; for the ul li , that's kind of a hack

pavz
pavz
10,309 Points

The code you suggested doesn't work.

Matthew Smart
Matthew Smart
12,567 Points

possibly something with the css in your style sheet. Can you make a js fiddle demonstrating it please? https://jsfiddle.net/

I will then tweak it and get it working for you. But on my local environment that works

pavz
pavz
10,309 Points

Matt, Just wanted to tell you thanks for the tips, it was very helpful. I read an article on css-tricks, made a margin-right property 0px, put got rid of space between <li> items. I used your nth-child selector to make it work. So thanks again.

Matthew Smart
Matthew Smart
12,567 Points

No problem. Like i say my CSS skills are not amazing, but happy to help out :)