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
mitchelloldfield
6,420 PointsGallery in a single column and footer up near top
Hi, I am having a little issue. after changing the width of the gallery the footer has moved up near the top of the screen and to the right of my gallery which is only one column.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mitchell Oldfield | Student</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Cantarell:400,700italic|Open+Sans:400,700,400italic,700italic,300,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Mitchell Oldfield</h1>
<h2>Student</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>Playing with blending modes in photoshop.</p>
</a>
<a href="img/numbers-06.jpg">
<img src= "img/numbers-06.jpg" alt="">
<p>Trying to create a 80's style of glows.</p>
</a>
<a href="img/numbers-12.jpg">
<img src= "img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="https://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>
© 2015 Mitchell Oldfield
</p>
</footer>
</div>
</body>
</html>
/*************************
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: 'Cantarell', 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.75ems;
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;
}
#gallery li a p {
margin:0;
padding: 5%;
font-size: 0.75em;
color: #000;
}
/*************************
COLORS
*************************/
/* site body */
body {
background-color: #748ba7;
color: #051c38;
}
body p {
color: #fff
}
/* Green Header */
header {
background: #143153;
border-color: #000;
}
/* Green links */
a {
color: #6ab47b
}
/* Nav background on mobile Header */
nav {
background-color: #051c38;
}
/* Logo text */
h1, h2 {
color: #fff;
}
/* Nav link */
nav a, nav a:visited {
color: #FFF;
}
/* Selected Nav link */
nav a.selected, nav a:hover {
color: #748ba7f;
}
I have provided my working files. any help would be greatly appreciated
3 Answers
Greg Kaleka
39,021 PointsHi there,
The problem is in your gallery ul: you only have a single list item for the whole thing, and so it's constrained to the width of 45% you specify for those list items. If you wrap each anchor tag in an li tag, it will fix your issue.
Also, your nav a.selected, nav a:hover rule has a color with one too many digits, and your footer rule is using "ems" instead of "em". Neither of these are causing the problem you mention, but you probably want to fix them too :).
<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>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src= "img/numbers-02.jpg" alt="">
<p>Playing with blending modes in photoshop.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src= "img/numbers-06.jpg" alt="">
<p>Trying to create a 80's style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src= "img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</li>
</ul>
Tiffany McAllister
25,806 PointsWhen floating items you need to apply a clearfix. Try adding:
footer {
clear: both;
}
mitchelloldfield
6,420 PointsThank you both for your replies. I have been pulling out my hair trying to work this out.