Having problems with Grid (CSS), please help?

Question

I'm having trouble with the grid (CSS) section in web design "Working with Grids." After entering the code and refreashing my web browser the grid does not "center" the text nor pics. Below are snippets of code. Please check to see if I "link" the grid correctly.

<link rel="stylesheet" href="\css\css\normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="\css\css\grid.css" type="text/css" media="screen">

Answer 1 · 2013-12-27T18:10:04Z

December 27, 2013 6:10pm

Your not linking your full address CSS file. But most likely your outer DIV tag needs a <strong>"margin: auto;"</strong>

Answer 2 · 2013-12-27T18:14:42Z

December 27, 2013 6:14pm

Thank you for answering my question Richard! The grid is pre-built with "margin: auto,". Are you saying I need to add "margin: auto," into the code myself?

Answer 3 · 2013-12-27T18:17:03Z

December 27, 2013 6:17pm

Without the link to the CSS file I don't know what's wrong. margin: auto; general centers it. Make sure you spell check your code.

Answer 4 · 2013-12-27T18:24:49Z

December 27, 2013 6:24pm

After looking over my understand on laying out CSS grid. You should have a wrapper DIV class that will go around all your over DIV, HEADER, NAV, MAIN and FOOTER. Make sure that wrapper DIV is margin: auto;.

<div class="wrapper">
  <header>
    <nav><nav>
  </header
  <main><main>
  <footer></footer>
</div>

Answer 5 · 2013-12-27T18:24:55Z

December 27, 2013 6:24pm

After looking over my understand on laying out CSS grid. You should have a wrapper DIV class that will go around all your over DIV, HEADER, NAV, MAIN and FOOTER. Make sure that wrapper DIV is margin: auto;.

.wrapper { magin: auto; width: 1000px; }

<div class="wrapper">
  <header>
    <nav><nav>
  </header>
  <main><main>
  <footer></footer>
</div>

Answer 6 · 2013-12-27T18:40:34Z

December 27, 2013 6:40pm

Thank you Richard, the video was teaching to use a "container." Is using the "wrapper" the same?

<div class="container">

Answer 7 · 2013-12-27T18:43:23Z

December 27, 2013 6:43pm

container and wrapper is just the assign class name someone would use to code the CSS for that tag. Does not matter if you call it wrapper, container, or even page. I can't go any farther with you with out that CSS and html code.

Answer 8 · 2013-12-27T18:46:31Z

December 27, 2013 6:46pm

Sorry, I'm new to web design and programming. Are you asking for me to copy and paste the entire code?

Answer 9 · 2013-12-27T18:49:47Z

December 27, 2013 6:49pm

If it's posted online then copy and past the HTML link.

Answer 10 · 2013-12-27T18:53:31Z

December 27, 2013 6:53pm

Here is the link (C:\Users\owner\Desktop\index.html). If it doesn't work I'll copy and paste the entire code. There is 61 lines of code.

Answer 11 · 2013-12-27T18:54:43Z

December 27, 2013 6:54pm

Here is the [example link] (C:\Users\owner\Desktop\index.html). If it doesn't work I'll copy and paste the entire code. There is 61 lines of code.

Answer 12 · 2013-12-27T19:03:37Z

December 27, 2013 7:03pm

```HTML and CSS <!DOCTYPS 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\css\normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="\css\css\grid.css" type="text/css" media="screen"> </head> <body> <div class="container"> <img src="\img\img\logo.gif" alt="Smells Like Bakin"> <ul class="nav"> <li><a href="g">About</a></li> <li><a href="g">Cupcakes & Prices</a></li> <li><a href="g">Location</a></li> <li class="last"><a href="g">Contact Us</a></li> </ul> <div id="intro"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="g" class="btn">Browse Our Cupcakes</a></p> </div>

<img src="\img\img\you-bake-me-blush.gif" alt="You Bake Me Blush">

<div id="featured-cupcake">
  <h2>Cupcake of the Week</h2>
  <p>This week's featured cupcake is the <a href="g">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
  <img src="\img\img\featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>

<div>
<div id="new-cupcakes">
  <h2>Fresh Out the Oven</h2>
  <p>Our newest cupcakes are <a href="g">Bacon Me Crazy</a> and <a href="g">Jalapeno So Spicy</a>.</p>
  <img src="\img\img\new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
  <img src="\img\img\new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>

<h2>Inside the Kitchen</h2>
<p>Smells Like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
<p><a href="g" 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="g">bakeon@smellslikebakin.com</a></p>
</div>    


<p>We announce all of our new flavors first through Facebook &amp; Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="\img\img\facebook.gif" alt="Fackbook"></a>
<a href="http://www.twitter.com/SmellsLikeBakin"><img src="\img\img\twitter.gif" alt="Twitter"></a> 

<div id="copyright">
  <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>

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

Answer 13 · 2013-12-27T19:13:18Z

December 27, 2013 7:13pm

For some reason I can't edit my post but the <div class="contain"> should be <div="container"> . I forgot the container if that's what your going to wrap all the DIVs.

Answer 14 · 2013-12-27T19:15:23Z

December 27, 2013 7:15pm

Thank you, I will try! I wanted to post the grid.css to show where I'm getting "container" from.

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 1000px; 
    margin: auto;
}



.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}

Welcome to the Treehouse Community

Looking to learn something new?

Jeran Roberson

Jeran Roberson

Having problems with Grid (CSS), please help?

14 Answers

Richard Feinburg

Richard Feinburg

Jeran Roberson

Jeran Roberson

Richard Feinburg

Richard Feinburg

Richard Feinburg

Richard Feinburg

Richard Feinburg

Richard Feinburg

Jeran Roberson

Jeran Roberson

Richard Feinburg

Richard Feinburg

Jeran Roberson

Jeran Roberson

Richard Feinburg

Richard Feinburg

Jeran Roberson

Jeran Roberson

Jeran Roberson

Jeran Roberson

Jeran Roberson

Jeran Roberson

Richard Feinburg

Richard Feinburg

Richard Feinburg

Richard Feinburg

Jeran Roberson

Jeran Roberson