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

CSS

jmt
jmt
13,877 Points
Posted by jmt
jmt
13,877 Points

Grid.css not working....

I'm a total rookie and can't get grid.css to work...

Here's my file path... file:///C:/Treehouse/Web/css/index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container">
<img src="img/logo.gif" alt="Smells Like Bakin">
<ul class="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Cupcakes &amp; Prices</a></li>
  <li><a href="#">Locations</a></li>
  <li class="last"><a href="#">Contact Us</a></li>
</ul>
<div id="intro">
  <h1>Opposites really do attract!</h1>
   <p><a href="#" class="btn">Browes Our Cupcakes</a></p>
</div>
<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
<div id="featured-cupcake">
  <h2>Cupcake of the Week</h2>
  <p>The weeks featured cupcake is the <a href="#">Avacado Chocolate Cupcake</a></p>
  <img src="img/featured-cupcake.gif" alt="Avacado Chocolate Cupcake">
</div>
<div id="new-cupcakes">
  <h2>Fresh Out the Oven</h2>
  <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a></p>
  <img src="img/new-cupcake-bacon.gif" alt="Bacon Me Crazy">
  <img src="img/new-cupcake-jalapeno.gif" alt="Jalapena So Spicy">
</div>
<h2>Inside the Kitchen</h2>
  <p>Smells like Bakin started....</P>
  <p><a href="#" class="btn-small">Read More</a></P>
<h2>Get Bakin' with Us</h2>
<div id="contact">
  <p>Call Us: <span>1-555-CUP-CAKE</span><br>
  Email Us: <a href="#">bakeon@smellslikebakin.com</a></p>
 </div>
  <p>We annouce all our new flavors through facbook &amp; Twitter, and even take request!</p>
  <a href="http://www.facebook.com/Smellslikebakin"><img src="img/facebook.gif"></a>
  <a href="http://www.twitter.com/smellslikebakin"><img src="img/twitter.gif"></a>
<div id="copyright">
  <p>&copy;2012 Smells Like Bacon' Cupcake Company. All Rights Reserved.</p>
</div>


</div>
</body>
</html>

Please someone help! :)

jmt

6 Answers

jmt
jmt
13,877 Points
jmt
jmt
13,877 Points

It ended up being my file path. I had to move the css and img folders, along with the index.html file into the Web folder. Everything seems to be working now. Thanks guys for your help!

file:///C:/Treehouse/Web/index.html

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

john - You forgot to close 3 of your tags.

Most text editors have syntax highlighting so look for the place where the colors start to look weird.

Also most text editors have a feature to find the pairing tag, so you can check if a specific tag has in fact been closed.

Ricky Dodd
Ricky Dodd
3,241 Points
Ricky Dodd
Ricky Dodd
3,241 Points

I'm confused on what the problem is.

Have you started implementing the class-names into what you want the grid to hold? You know, like class="grid_4".

jmt
jmt
13,877 Points
jmt
jmt
13,877 Points

James - thanks for the advice. I did find the 3 tags that were not closed, but grid.css still is not working. I posted my new code above. Can you find any other errors?

jmt
jmt
13,877 Points
jmt
jmt
13,877 Points

I ran a code checker on grid.css and found this error, but I don't know how to fix it....

48 * html.clearfix, *:first-child + html.clearfix Property zoom doesn't exist : 1

  .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html.clearfix,*:first-child+ html.clearfix {zoom:1}
Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey John,

So based on your file path, your index.html file in the "css" folder. If your CSS files are also in the "css" folder, then you would't need to link to them with css/. Have you tried placing your index.html file outside of the "css" folder?