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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Matthew Ashman
Matthew Ashman
4,364 Points
Posted by Matthew Ashman
Matthew Ashman
4,364 Points

Placing the id class "gallery" in <section> vs. <ul>

I was wondering if I could get some insight, on this particular decision:

My images are not collapsing into two organized columns. I have resized my images so that they are "somewhat" equal in size, yet they are still not collapsing as I'd like. Moreover, I am still getting bullet-points on my images, even after setting the: list-style: none; .

I decided to place the id="gallery" into the <section> element (which is above the <ul> element) and it did help address my problem (to some degree). Is this proper code technique? Is there something better I can do to help myself out? Maybe adding a 6th (making the columns equal) picture would help? Any insight or opinion would be helpful, thank you.

Thanks in advance!

3 Answers

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

Matthew,

Your <ul> may be collapsing du\e to the uneven number of floated list items. This will require a clearfix. You will learn more about and floats, collapsing parent containers and clearfix later.

HTML

<ul id="gallery"> </ul>

CSS

img {
    max-width: 100%;
}
#gallery {
    margin: 0;
    padding:0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;

}

/* clearfix for the floated items */
#gallery:after {
    content:"";
    display: table;
    clear:both;
}
Matthew Ashman
Matthew Ashman
4,364 Points
Matthew Ashman
Matthew Ashman
4,364 Points

Thanks for your response Bob!

I am creating my portfolio in Textwrangler and, I'm still unsure how to post it so the community can see. With that being said, I figured out that two factors are contributing to my issue:

1.) I had written my code as followed:

<section> <ul id="gallery"> <li> img </li> </ul>

<ul> <li> img </li> </ul>

Instead of wrapping the entire gallery (list items) in just 1 set of <ul> brackets... whoops!

2.) My images, being all different widths and heights - are most definitely throwing off the structure and organization of my gallery! I need some practice with photoshop (and I definitely need to acquire illustrator) but I have somewhat sorted out the problem.

If you, or anyone else knows how to integrate my Textwrangler files into the community so I can show you what's going on, please share! Thanks Bob (and everyone).

Bob McCarty
PLUS
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

Matthew,

To answer your question about placing mark-up and css into the community editor, click on the Markdown Cheatsheet link. It demonstrates how to create code boxes in your posts. Essentially, copy your code from textwrangler. Paste it into the post. Warp the code in three backticks (```). The marks under the tilde (~). Place these on a separate line. A set on top, a set on the bottom. Be sure to include the "code-identifier" string after the initial backticks. The code-identifier specifies the code type i.e. css, html, javascript, .....

backtick backtick backtick "code-identifier" code ...... backtick backtick backtick