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
Stephan Kotin
1,057 PointsImages won't go into 2 colloms.
The code seems to match Nick's, however the images will not go into 2 collums. Instead, the footer images (twitter and Facebook) and the copywritght info are in two collums:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stephan Kotin | UX Research and Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Open sans :400,500,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Stephan Kotin</h1>
<h2>UX Research and Design</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio </a></li>
<li><a href="about.html">About </a></li>
<li><a href="contact.html">Contact </a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gal">
<li>
<a href="img/numbers-01.jpg"></a>
<img src="img/numbers-01.jpg" alt="">
<p>Industry leading UX Research</p>
<a href="img/numbers-02.jpg"></a>
<img src="img/numbers-02.jpg" alt="">
<p>Industry leading UX Research</p>
<a href="img/numbers-06.jpg"></a>
<img src="img/numbers-06.jpg" alt="">
<p>Industry leading UX Research</p>
<a href="img/numbers-09.jpg"></a>
<img src="img/numbers-09.jpg" alt="">
<p>Industry leading UX Research</p>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/Kotin88"><img src="img/twitter.png"></a>
<a href="https://www.facebook.com/stephan.kotin"><img src="img/facebook.png"></a>
<p>© 2015 Stephan Kotin.</p>
</footer>
</div>
</body> </html>
///
gal {
margin: 0; padding: 0; list-style: none; }
<!DOCTYPE html>
gal li {
float: left; width: 45%; margin: 2.5%; background-color:#f5f5f5; }///
Stephan Kotin
1,057 PointsSorry, Just added it. Thank you for your response.
Jake Lundberg
13,965 Pointscould you also include your CSS as that is most likely where the issue is going to be located.
Stephan Kotin
1,057 PointsI am attempting too, however it is showing up very messy. I hope this will do.
3 Answers
Jake Lundberg
13,965 PointsOh okay, you need to include the '#' before 'gal' in order to specify that you are using an ID in your selector. so it should like:
#gal {
margin: 0;
padding: 0;
list-style: none;
}
#gal li {
float: left;
width: 45%;
margin: 2.5%;
background-color:#f5f5f5;
}
Stephan Kotin
1,057 Pointsi have having so much trouble with this comment section. My code does have # tags in them, they are not displaying on this forum. So frustrating.
Jake Lundberg
13,965 Pointsoh, you know what, I appologize...i totally overlooked this, but you only have one li tag in your html...try adding separate li tags around each of your images.
<li>
<a href="img/numbers-01.jpg"></a>
<img src="img/numbers-01.jpg" alt="">
<p>Industry leading UX Research</p>
</li>
<li>
<a href="img/numbers-02.jpg"></a>
<img src="img/numbers-02.jpg" alt="">
<p>Industry leading UX Research</p>
</li>
<li>
<a href="img/numbers-06.jpg"></a>
<img src="img/numbers-06.jpg" alt="">
<p>Industry leading UX Research</p>
</li>
<li>
<a href="img/numbers-09.jpg"></a>
<img src="img/numbers-09.jpg" alt="">
<p>Industry leading UX Research</p>
</li>
Jake Lundberg
13,965 PointsJake Lundberg
13,965 Pointscan you please post your code on here so we can where the issue might be?