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
Matthew Thomas
8,519 PointsI am trying to style a gallery on a new page for my website but I can't seem to arrange the images with CSS.
In the videos, to style our gallery on the homepage we used the following CSS:
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
I have a second page on my website where I want to have an even larger gallery of images. in the HTML, I have an unordered list with 15 images. I have given the <ul> an id of "collection". So in my collection.html file the list looks like
section ul id="collection" li
then has 15 list items for my images.
Then in the CSS file I have used:
collection {
margin: 0; list-style: 0; list-style: none; }
as in the #gallery,
However, this does nothing to my "collection" gallery. I feel like I am missing something really obvious. What am I doing wrong?
Thanks
<header>
<a href="index.html" id="logo">
<h1>A Bathing Ape</h1>
<h2>Always collecting</h2>
</a>
<nav>
<ul>
<li><a href="collection.html"class="seclected">Collection</a></li>
<li><a href="want.html">Want To Buy</a></li>
<li><a href="links.html">Useful Links</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="collection">
<li>
<img src=images/IMG_2014.JPG alt="">
<p>Human Made Jukebox.</p>
</li>
<li>
<img src=images/IMG_2017.JPG alt="">
<p>Very Ape.</p>
</li>
<li>
<img src=images/IMG_2018.JPG alt="">
<p>Bape X Marvel.</p>
</li>
<li>
<img src=images/IMG_2019.JPG alt="">
<p>Bape X Star Wars.</p>
</li>
<li>
<img src=images/IMG_2020.JPG alt="">
<p>Bape X Undefeated.</p>
</li>
<li>
<img src=images/IMG_2024.JPG alt="">
<p>Black Camo Jacket.</p>
</li>
<li>
<img src=images/IMG_2025.JPG alt="">
<p>Blue Tiger.</p>
</li>
<li>
<img src=images/IMG_2027.JPG alt="">
<p>Bape X WTAPS Snowboard Jacket.</p>
</li>
<li>
<img src=images/IMG_2031.JPG alt="">
<p>Human Made Duck.</p>
</li>
<li>
<img src=images/IMG_2035.JPG alt="">
<p>Human Made Computer.</p>
</li>
<li>
<img src=images/IMG_2062.JPG alt="">
<p>Bapestas.</p>
</li>
<li>
<img src=images/IMG_2069.JPG alt="">
<p>Bape NW20 Orange Camo.</p>
</li>
<li>
<img src=images/IMG_2072.JPG alt="">
<p>Bape pin set.</p>
</li>
<li>
<img src=images/IMG_2073.JPG alt="">
<p>Bape NW20 box set.</p>
</li>
<li>
<img src=images/IMG_2074.JPG alt="">
<p>Bapetas.</p>
</li>
</ul>
<h3>About My Collection.</h3>
<p>Info about my collection goes here.</p>
</section>
<footer>
<p>© 2014 Matt Thomas.</p>
</footer>
</div>
</body>
</html>~~~
My CSS
~~~/***********************
PAGE: COLLECTION
***********************/
#collection {
margin: 0;
padding: 0;
list-style: none;
}
#collection li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}~~~
Matthew Thomas
8,519 PointsThank you for such a quick reply. I hope I have provided enough code?
Joshua Holland
2,865 PointsPretty sure it's unrelated but I found this..
<li><a href="collection.html"class="seclected">Collection</a></li>
"selected" is misspelled. I'm still looking for a solution but nothing is jumping out at me :S
Matthew Thomas
8,519 PointsThats actually a great spot. It was causing another issue so thanks again for your help.
3 Answers
Craig Watson
27,930 PointsHi Matthew,
For your new page you can set it out a little different from the one used with the <div> class of "wrapper" shown in the example.
enclose your full <ul id="collection"> in <div class="collection"> a then be sure to space your code well so you know what is going on in each section.
once you have the images showing on the page again with the above:
I would start by sizing the images within your css so you know you have used the correct selectors to style them.
Then let me know what you want to do with images i.e. shadows borders backgrounds text etc....
Here's my HTML just not as may images .....
<!DOCTYPE html>
<html>
<header>
<a href="index.html" id="logo">
<h1>A Bathing Ape</h1>
<h2>Always Collecting</h2>
</a>
<nav>
<ul>
<li><a href="collection.html"class="seclected">Collection</a></li>
<li><a href="want.html">Want To Buy</a></li>
<li><a href="links.html">Useful Links</a></li>
</ul>
</nav>
</header>
<div class="collection">
<ul id="collection">
<li>
<img src=images/IMG_2014.JPG alt="">
<p>Human Made Jukebox.</p>
</li>
<li>
<img src=images/IMG_2017.JPG alt="">
<p>Very Ape.</p>
</li>
<li>
<img src=images/IMG_2018.JPG alt="">
<p>Bape X Marvel.</p>
</li>
<li>
<img src=images/IMG_2019.JPG alt="">
<p>Bape X Star Wars.</p>
</li>
</ul>
</div>
<div id="about">
<h3>About My Collection.</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<footer>
<p>© 2014 Matt Thomas.</p>
</footer>
</body>
</html>
I would be doing it this way to allow me easy availability of different sections i.e div's for some great styling.
As I say let me know what styling you want but I have found certainly that css is much easier if you create fluid and well laid out html.
Thanks Craig
Matthew Thomas
8,519 PointsThanks Craig. I now seem to have sorted out my CSS.
Matthew Thomas
8,519 PointsThanks for your reply Craig. I think I've just gone too far ahead of the tutorial videos really. I have wrapped my whole unordered list with a div and class of collection. All I want to do is set my 15 images out in 5 rows of 3.
dnogmdehbp
Courses Plus Student 726 PointsIn your css file, try this:
#collection ul{
margin: 0;
padding: 0;
list-style: none;
}
add " ul" after #collection
can you tell what that does?
Joshua Holland
2,865 PointsJoshua Holland
2,865 PointsAt first glance, it sounds like you did everything right. It would be helpful if you posted the code in question verbatim. You can insert code by adding 3 tildas before and after you paste your code. Like this.
This is my code