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
Shaun Campbell
736 PointsMy gallery is overlapping; Did I make a mistake?
I have compared my code to others in the help section and can not find a problem. I am in stage 6; Styling Web Pages and Navigation. Here is my CSS code:
/********************** 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: !00%; }
/********************** Header ************************/
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Oswald', sans-serif; margin: 15px 0; font-size: 2.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 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; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
5 Answers
Benjamin Rochez
9,508 PointsHi Shaun,
In your wrapper you set img { max-width: !00%; }, you need to put max-width:100%;
Tell me if that solved the problem :)
Shaun Campbell
736 PointsHere is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shaun Campbell - Bullfighter</title>
<link rel="stylesheet" href="CSS/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700italic,400|Oswald:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="CSS/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Shaun Campbell</h1>
<h2>Bullfighter</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.htmal">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>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playng 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 80's style glows</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips using a paintbrush styling</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Repetition on the move</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/commlovescoffee"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/shauncampbellhere"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>Ā© 2014 Shaun Campbell.
</footer>
</div>
</body>
</html>
Kidist Admasu
11,020 PointsIn your css, use # symbol before id selectors . for example
#gallery {
margin: 0; padding: 0; list-style: none;
}
Shaun Campbell
736 PointsExcellent. Thank you Benjamin, I don't know if I ever would have noticed an exclamation mark rather than a 1. That worked perfectly. Thank you also Kidist for the suggestion. I noticed that hash tags cause some id selectors to work and others to malfunction; for example # before h2 causes it to disappear. I had similar issues with others. Maybe I just don't understand which entries are termed id selectors and which are not.
Benjamin Rochez
9,508 PointsHey Shaun, I'm glad that helped you ! When you're looking for an error that you don't find like this one, just take a break, then come and just read carefully the code. The break is really important, because when you come back, you'll approach the code with another mindset :)
Have a nice day !