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
GUY SHIMON
1,301 PointsGallery appear as one column, but to the left, with the social media links to the right
the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Guy | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Guy</h1>
<h2>designer</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">contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a herf="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>experimantion with</p>
</a>
</li>
<li>
<a herf="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>experimantion with</p>
</a>
</li>
<li>
<a herf="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>experimantion with</p>
</a>
</li>
<li>
<a herf="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>experimantion with</p>
</a>
</li>
<li>
<a herf="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>experimantion with</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://one.co.il">
<img src="img/twitter-wrap.png" alt="twitter logo"></a>
<a href="http://walla.co.il">
<img src="img/facebook-wrap.png" alt="facebook logo"></a>
<p>© 2013 Guy S.</p>
</footer>
</div>
</body>
</html>
the CSS:
/**********************
GENERAL
**********************/
body {
font-family: 'open sans', sans-serif
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/**********************
HEADING
**********************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'changa one', sans-serif;
margin: 15px 0;
font-size:: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************
navigation
**********************/
nav {
text-align:center;
padding:10px 0;
margin: 20px 0 0;
}
/**********************
footer
**********************/
footer {
font-size:0.75em;
text-align:center;
padding-top: 50px;
color: #ccc;
}
/**********************
page: portfolio
**********************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery {
float: left;
width:45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7
}
/**********************
COLORS
**********************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border: #599a68;
}
/* nav background on mobile */
nav {
background-color: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selected nav links */
nav a.selected, nav a:hover {
color: #32673f;
}
2 Answers
Shawn Flanigan
Courses Plus Student 15,815 PointsFloats in css are a bit tricky. It looks like your #gallery has a float: left; property. Unless you clear the float, the next element will be out of whack. To fix this, you'll want to add the following to your footer declaration:
clear: both;
To read more about floats, click here.
Hope this helps!
GUY SHIMON
1,301 Pointshelped with the footer, but gallery is still in one column..
Shawn Flanigan
Courses Plus Student 15,815 PointsAhh, I see. I guess I misunderstood your question. I think you want to float the #gallery li instead of the entire #gallery.
Does that make sense?
GUY SHIMON
1,301 Pointsit also appears that my gallery dosen't link
Shawn Flanigan
Courses Plus Student 15,815 PointsShawn Flanigan
Courses Plus Student 15,815 PointsGuy,
I reformatted your post a bit. To get code to display properly in the forum, you'll want to surround it with 3 backticks (left of the 1 on your keyboard) before and after your code.