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
Mikael Enarsson
7,056 PointsStill just one column, but to the left, with the social media links to the right
I managed to get rid of the bullet points and float the images, but all the images are floating in a column to the left, with the footer to the right. I've looked through my code several times, but can't find where I erred. Can anyone see something?
CSS:
/**************************
GENERAL
***************************/
body {
font-family: 'Oswald', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/* global links */
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/**************************
Heading
***************************/
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Lobster Two', cursive;
margin: 15px 0;
font-size: 3em;
font-weight: normal;
line-height: 1.1em;
}
h2 {
font-size: 1.25em;
margin: -5px 0 0;
font-weight: normal;
}
/**************************
Navigation
***************************/
nav {
text-align: center;
padding:: 10px 0;
margin: 20px 0 0;
}
/**************************
Heading
***************************/
footer{
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
}
/**************************
Page: portfolio
***************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
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-color: #599a68;
}
/* Nav background on mobile devices */
nav {
background: #599a68;
}
/* Logo text */
h1, h2 {
color: #fff;
}
/* Link colors */
a {
color: #6ab47b;
}
/* Nav links */
nav a, nav a:visited {
color: #fff;
}
/* Selected nav links */
nav a.selected, nav a:hover {
color: #32673f;
}
HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Lobster+Two:400,700italic,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <title> Legoto ne Mikael | Designer </title> </head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Legato né Mikael</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.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href=""><img src="img/twitter-wrap.png" alt=""></a>
<a href=""><img src="img/facebook-wrap.png" alt=""></a>
<p>© 2014 Legato ne Mikael</p>
</footer>
</div>
</body>
</html>
Any help would be very much appreciated!
Mikael Enarsson
7,056 PointsNot quite what I was looking for, but very nice nonetheless!
2 Answers
Wayne Priestley
19,579 PointsHi Mikael,
You need to have your images in individual li like so:
<li><a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p></a>
</li>
<li><a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with color and texture.</p></a>
</li>
You have one li surrounding all images.
Hope this helps.
Mikael Enarsson
7,056 PointsAh, well, that's more than a bit embarrassing! I was sure it was a simple mistake, but not quite that simple. Thank you so much!!
Kenise Turnquest
9,391 PointsIn your CSS you have the gallery li width set to 45%. Change it to 100% and that should fix it.
Salman Akram
Courses Plus Student 40,065 PointsSalman Akram
Courses Plus Student 40,065 PointsIf you are looking to set footer on the bottom, here's footer CSS below.
Use 'Clear: both' to clear setting. ;)