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
Errol Heywood
Courses Plus Student 2,078 PointsMy web page is not floating and if anything the images increase in size after the steps in the video. Help please?
I have coded Index.html and Main.css step-by-step with Nicks but the formatting goes to pot after the steps in the video. The images do not float so I still get single column, and there is no white space above the first image. I have run my css through the css validator and no problems found.
<html>
<head>
<meta charset="utf-8">
<title>Nick Petit | 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>Nick Pettit</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>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<l1>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with colour and texture.</p>
</a>
</l1>
<l1>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending mode in Photoshop.</p>
</a>
</l1>
<l1>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</l1>
<l1>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using Photoshop brushes.</p>
</a>
</l1>
<l1>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repetition.</p>
</a>
</l1>
</ul>
</section>
<footer>
<a href="http://twitter.com/awhitu"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/errol.heywood.3"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div><!-- End of wrapper 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: '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 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;
}
/* selelcted nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
5 Answers
Marcus Parsons
15,719 PointsYou have l1 in your list item tags within the <ul id="gallery"> element when they should be li. Try changing those and see if your CSS is right. You may have to delete the history from your browser to see any changes due to browser caching.
Paul Girard
552 PointsJust deleted my history and now the browser is displaying mine all correctly too!! after half an hour of thinking my code was wrong! Thanks - Paul (the novice)
Marcus Parsons
15,719 PointsIt took me a while when starting out to realize that, too lol :) Good luck, Paul!
Errol Heywood
Courses Plus Student 2,078 PointsI don't know why the tags are showing up as l1 in the markdown as they are definitely all li. I am using Sublime Text so any errors like that are easier to see. However, I will run the file through an html checker to make sure.
Marcus Parsons
15,719 PointsSince you copied and pasted this, the tags are definitely l1 instead of li. Markdown does not change tags like that unless they are outside of the code wrap, in which case the tags would not appear at all because Markdown gets rid of rogue tags.
Errol Heywood
Courses Plus Student 2,078 PointsI don't know why the tags are showing up as l1 in the markdown as they are definitely all li. I am using Sublime Text so any errors like that are easier to see. However, I will run the file through an html checker to make sure.
Errol Heywood
Courses Plus Student 2,078 Pointssigh. Sorry Marcus for wasting your time but thanks for all the help. In fact I DO have l1's in there as shown up by the html validator!
I had so convinced myself that it wasn't my code.....
Marcus Parsons
15,719 PointsExactly. I don't normally say this, but...I told ya so! haha Just kidding :) Good luck, Errol!
Adi Agha
104 Pointsthe hight of my pictures increase even after folowing EVERY step... plz help
Camden Mounts
9,453 PointsCamden Mounts
9,453 PointsWhat are your in your <li> tags? It looks like <l1> (with the number 1).
If that is not the solution, at which point did the html stop working?