Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Uzair Khan
Uzair Khan
3,640 Points
Posted by Uzair Khan
Uzair Khan
3,640 Points

Pictures are not showing up in two columns please help

Pictures are not showing up in two columns here's my code https://teamtreehouse.com/workspaces/13570242#

edeharrison
edeharrison
11,126 Points

Hi Uzair,

I'm getting a 'Bummer - page not found' message for your workspaces link. Perhaps try agin, or post your code?

Cheers,

Ede

edeharrison
edeharrison
11,126 Points

Hi Uzair,

It's the same link, so it still doesn't work I'm afraid. You'd have to go into your workspaces, save it again, and get a new link. Or something along those lines, I don't use workspaces much.

Or, just post your code straight in here?

Cheers,

Ede

Uzair Khan
Uzair Khan
3,640 Points
Uzair Khan
Uzair Khan
3,640 Points

https://w.trhou.se/61tf6ia1g9

can you open this? Ede Harrison thank you for helping i'm a newbie here

3 Answers

edeharrison
edeharrison
11,126 Points

Hi Uzair,

Yes that link worked fine.

Your problem was that, in your HTML, you had assigned the id of 'gallery' to the first 'li' element in the unordered list. You should have applied it to the 'ul' element that contains the 'li' elements.

Because of this, the following CSS code is not taking any effect:

#gallery li {
 float:left;
 width:45%;
 margin: 2.5%;
 background-color:#f5f5f5;
 color:#bdc3c7;   
}

Once you amend this, you will be good to go.

All the best,

Ede

Uzair Khan
Uzair Khan
3,640 Points
Uzair Khan
Uzair Khan
3,640 Points

Thankyou very much it helped

edeharrison
edeharrison
11,126 Points

No problem.

sjoerds
sjoerds
149 Points
sjoerds
sjoerds
149 Points

Unfortunately your link doesn't seem to work, can you repost the link?

Uzair Khan
Uzair Khan
3,640 Points
Uzair Khan
Uzair Khan
3,640 Points

https://w.trhou.se/61tf6ia1g9 can you open this sir? im a newbie here

Julie Myers
Julie Myers
7,627 Points
Julie Myers
Julie Myers
7,627 Points

The first thing I noticed is that the #gallery li selector is not selecting the element correctly. 

//This is the coding you have:
<section>
        <ul>
          <li id="gallery">
            <a href="img/DSC_0045dark.jpg">
               <img src="img/DSC_0045dark.jpg" alt="">
               <p>experimentation with random pictures</p>
            </a>  
          </li>
           <li>
            <a href="img/DSC_0039bnw.jpg">
               <img src="img/DSC_0039bnw.jpg" alt="">
               <p>experimentation with random pictures</p>
            </a>  
          </li>       
          <li>
            <a href="img/DSC_0516.jpg">
               <img src="img/DSC_0516.jpg" alt="">
               <p>experimentation with random pictures</p>
            </a>  
          </li>
          <li>
            <a href="img/hike.jpg">
               <img src="img/hike.jpg" alt="">
               <p>experimentation with random pictures</p>
            </a>  
          </li>
        </ul>
      </section>

#gallery {
margin:0;
padding:0;
list-style:none;
}

#gallery li {
float:left;
width:45%;
margin: 2.5%;
background-color:#f5f5f5;
color:#bdc3c7;
}

/*
#gallery li --> is asking the browser to find an li element that is inside of another element with the id of gallery.  However, this is not the structure you have. You gave the first li element the id of gallery. So, basically, the rule with selector #gallery li is not selecting anything, thus you do not see it working.

#gallery is an id, and an id can only be applied to one element. What you need is to have two li elements per line.
*/

Hope that helps.