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 Akshit Gandhi
Akshit Gandhi
688 Points

pictures show up in two coloumns but the position is not proper

I think I have used the same code as shown in the video and I'm able to generate two coloumns but the picture and text are not in proper order The html for the index page is:- <!DOCTYPE html> <html> <head> <meta charset= "UTF-8"> <title>Akshit Gandhi | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel= "stylesheet" href="css/main.css"> </head> <body> <header> <a href= "index.html" id="logo"> <h1>Akshit Gandhi</h1> <h2>Photographer</h2> </a> <nav> <ul> <a href="index.html" class="selected"><li>Photos</li></a> <a href="about.html"><li>About Me</li></a> <a href="contact.html"><li>Contact</li></a> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <a href ="img/ref_logo.jpg"> <li><img src="img/numbers-01.jpg" alt=""></li> <p>Random quote</p></a> <a href ="img/ref_logo.jpg"> <li><img src="img/numbers-02.jpg" alt=""></li> <p>Random quote</p></a> <a href ="img/ref_logo.jpg"> <li><img src="img/numbers-06.jpg" alt=""></li> <p>Random quote</p></a> <a href ="img/numbers-09.jpg"> <li><img src="img/numbers-09.jpg" alt=""></li> <p>Random quote</p></a> <a href ="img/ref_logo.jpg"> <li><img src="img/numbers-12.jpg" alt=""></li> <p>Random quote</p></a> </ul> </section> </div> <footer> <a href="http://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>Ā© 2016-17 Akshit Gandhi.</p> </footer> </body> </html>

and the css goes:- for the images in the section like:- img { max-width: 100%; }

gallery {

margin:0; padding:0; list-style:none; }

gallery li{

float:left; list-style:none; background:#ccc; width:45%; margin:2.5%; }

1 Answer

David Gardner
David Gardner
10,143 Points
David Gardner
David Gardner
10,143 Points

Your code has all the right pieces just some is in the wrong place. Inside your "gallery" HTML, your paragraph (p) and anchor (a) tags need to be inside the list (li) tags. Other wise it looks like you are trying to create a list out of list elements, paragraphs and hyperlinks. Instead of a list out of list elements containing paragraphs and hyperlinks. Also your anchor (a) tag's href need to match the image location.

<ul id="gallery">
  <li>
    <img src="img/numbers-01.jpg" alt=""> 
    <a href ="img/numbers-01.jpg">
    <p>Random quote</p></a>        
  </li>
/* AND REPEAT FOR THE REST*/
</ul>