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
Peter Van Ess
478 PointsI have a large space in the middle of my gallery. Help?
I've discovered that my gallery is having a weird issue. My code(both index and css) should match up pretty much to Nicks at this moment. When I load my page my first layer of photos have floated fine but the layer following leaves a hole between the 2nd and third img. I know the the problem must be on CSS but my brain is not seeing it. What am i doing wrong?
Peter Van Ess
478 Pointshere is my index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Peter Van Ess | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lora|Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.hmtl"><div id="logo">
<h1>Peter Van Ess</h1>
<h2>Designer</h2>
</div>
</a>
<nav>
<ul>
<li><a href="index.html"class="selected" >Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="seed faith ministries.html">Seed Faith Ministries</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
<p>Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
<p>Postcard 2</p>
</a>
</li>
<li>
<a href="img/2.jpg">
<img src="img/2.jpg" alt="">
<p>Postcard 4</p>
</a>
</li>
<li>
<a href="img/1.jpg">
<img src="img/1.jpg" alt="">
<p>Playing with treehouse</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://facebook.com/peter.v.ess"><img src="img/facebook-wrap.png" alt= "facebook logo"></a>
<p>© 2014 Peter Van Ess.</p>
</footer>
</div>
</body>
</html>
Peter Van Ess
478 Pointsand css
/*****************
GENERAL
**************/
body {
font-family:'lora',serif;
}
img {
max-width: 100%;
}
#wrapper {
max-width: 0 auto;
padding: 5% 5%;
}
a{
text-decoration: none;
}
/* logo color green*/
#logo {
text-align: center;
margin: O;
}
/* colored links*/
/*****************
HEADING
**************/
/* logo color green*/
#logo {
text-align: center;
margin: O;
}
h1 {
font-family: 'Montserrat', sans-serif;
margin: 15px 0;
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;
clear: both;
padding-top: 50px;
color: #ccc;
}
/*****************
Page Porfolio
**************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li a p img {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0%;
padding: 0%;
font-size: 0.75em;
color: #bdc3c7;
}
/*****************
Colors
**************/
/* colored links*/
a {
color: #6ab47b;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
font-family: 'Montserrat', sans-serif;
}
/* logo text */
h1,h2 {
color: #fff;
}
/* nave background on mobile */
nav {
background: #6ab47b ;
}
/* color nav link*/
nav a, nav a:visited {
color: #fff
}
/* color hovered nav link*/
nav a.selected, nav a:hover {
color: #32673f;
}
/* site body */
body {
background-color: #fff;
color: #999;
}
Peter Van Ess
478 PointsThanks for any help! :)
Christian Andersson
8,712 PointsPeter, do you have a link or something where I can view your site?
2 Answers
Wayne Priestley
19,579 PointsHi Peter,
If your using your own images, then they might be the problem.
Try using the same image in every place to see if it fixes your issue, it may just be that one image is messing up your layout.
Hope this helps.
Christian Andersson
8,712 PointsChristian Andersson
8,712 PointsPlease post your code so we can have a look at it, otherwise it's gonna be hard for us to see what you're doing wrong :D