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
Jack Goldie
Courses Plus Student 555 PointsI am having trouble inserting the first <div class="container" to my index.html...
Hi, I am completely stuck at the stage "working with Grids' when I have to add the container div. I believe it went wrong for me when I indented in the incorrect place then messed around with other indentations trying to fix it. Are the indentations important and would they effect my webpage if not correct? I feel confident that I have the normalize.css and grid.css files saved in the correct place and that I am inserting this 'Div' in the right space. I would appreciate any help and guidance.
Thank you
4 Answers
Elliott Frazier
Courses Plus Student 9,647 PointsIndentations do not effect the webpage at all, they are only used to organize and segregate code. If you show us your code we can try to figure out the problem.
Guido Grulke
20,948 Pointsseems there's an opening div missing before "<p>We announce all of our..." or a closing div to much - your choice.
Jack Goldie
Courses Plus Student 555 PointsThank you Guido, I have added the missing div but still no joy in aligning my page in the middle as shown in the video :( here is my code again.. I am wondering if there is a problem in locating the grid.css file.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content="text/html; charset=utf-8"/> <title>Matchfit.com</title> <link rel="stylesheet.css" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet.css" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container"> <img src="game.jpeg" alt="football"> <p>What are you looking for?</p> <ul class="nav"> <li><a href="#">Footballs</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Boot Room</a></li> <li><a href="#">Goalkeepers</a></li> <li><a href="#">New arrivals</a></li> <li><a href="#">Teamwear</a></li> <li><a href="#">Junior Football</a></li> <li><a href="#">Football coaching</a></li> <li><a href="#">clearence</a></li> <li><a href="#">Football Accessories</a></li> <li class="last"><a href="#">Replica Football</a></li> </ul> <div id="intro"> <h1>Established in 2013, we have many valuable relationships with the leading global football brands enabling us to bring you an unrivalled selection of the most up-to-the-minute Football Boots available anywhere. New Football Boots! For the 2013/14 season, the latest Football Boots from the biggest brands are right here at Matchfit.com!</h1> <p> <a href="#" class="btn">Browse our selections</a></p> </div>
<img src="premier-league.jpeg" alt="football">
<div id="featured-goal">
<h2>Goal of the week</h2>
<p>This weeks winner goes to <a href="http://www.youtube.com/watch?v=j_HU0rVnWbk">Danny Welbeck</a>. He Shows a briliant touch to chip the goal keeper insuring victory over Swansea on 17-08-13</p>
<img src="welbeck.jpeg" alt="Danny Welbeck">
</div>
<div id="new boots">
<h2>Latest releases</h2>
<p>check out some of our latest arrivals from our biggest brands such as <a href="#">Nike</a> and <a href="#">Adidas</a> to get you ready for the new season. </p>
<img src="nikeboots.jpeg" alt="nike boots">
<img src="adidasboots.jpeg" alt="adidas boots">
</div>
<h2>Matchfit origins</h2>
<p>Matchfit.com started out as an idea for a small shop in Dartford and started expanding when it won spocership of the Kent county football league allowing discouts to all involved. The webite was the project of the owner when learning to create and design computer code. Amazing customer service & lightening fast delivery have really helped Matchfit hit the ground running. </p>
<p> <a href="#" class="btn-small">Read more</a></p>
<h2>Join our squad</h2>
<div id="Contact">
<p>Call us: <span>1-442-MATCH-FIT</span><br>
Email us: <a href="#">football@matchfit.co.uk</a>
</p>
</div>
<div>
<p>We announce all of our new prducts and offers first on facebook & Twitter and even take requests!</p>
<a href="https://www.facebook.com/jack.goldie"><img src="facebook.png" alt="Facebook"</a>
<a href="#"><img src="twitter.png" alt="Twitter"></a>
</div>
<div id="copyright">
<p>©2013 Matchfit football retail company. All rights reserved.</p>
</div>
</div> </body> </html>
Guido Grulke
20,948 Pointsok - here we go. Please provide the complete html file so that we can check the whole thing. If you're not sure if the grid.css is working or not, please use the dev-tools with e.g. google chrome (alt-cmd-i) and then click the grid.css in the source code. If you see the content of the file then, it will work with your site. As Elliot already mentioned at the moment there is no div container within your code you provided in the post.
Jack Goldie
Courses Plus Student 555 PointsHi guys, I am pasting all of the code into my message but the top 30 lines are not showing as code... does this mean that there is a problem with it? It all looks fine to me. I will paste the top 30 lines on their own to see if this works. There are also about 5 lines missing from the bottom which I shall also add.
The code did not show at all again.. Do you have any ideas as to how I can show it to you?
Thank you.
Elliott Frazier
Courses Plus Student 9,647 PointsUsing Codepen is the best way to display your code.
Elliott Frazier
Courses Plus Student 9,647 PointsYour code is fine because when I linked grid.css to it it worked fine. so you might want to go over your file path again and double check ;)
Elliott Frazier
Courses Plus Student 9,647 PointsHere's your pen I modified so you can see it working.
Jack Goldie
Courses Plus Student 555 PointsThank you Elliott.
Jack Goldie
Courses Plus Student 555 PointsJack Goldie
Courses Plus Student 555 PointsHi Elliot,
Thank you this is my code so far..
<!DOCTYPE html> <html> <head> <meta http-equiv="content-Type" content="text/html; charset=utf-8"/> <title>Matchfit.com</title> <link rel="stylesheet.css" href="css/normalise.css" type="text/css" media="screen"> <link rel="stylesheet.css" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container"> <img src="game.jpeg" alt="football"> <p>What are you looking for?</p> <ul class="nav"> <li><a href="#">Footballs</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Boot Room</a></li> <li><a href="#">Goalkeepers</a></li> <li><a href="#">New arrivals</a></li> <li><a href="#">Teamwear</a></li> <li><a href="#">Junior Football</a></li> <li><a href="#">Football coaching</a></li> <li><a href="#">clearence</a></li> <li><a href="#">Football Accessories</a></li> <li class="last"><a href="#">Replica Football</a></li> </ul> <div id="inro"> <h1>Established in 2013, we have many valuable relationships with the leading global football brands enabling us to bring you an unrivalled selection of the most up-to-the-minute Football Boots available anywhere. New Football Boots! For the 2013/14 season, the latest Football Boots from the biggest brands are right here at Matchfit.com!</h1> <p> <a href="#" class="btn">Browse our selections</a></p> </div>
</div> </body> </html>
Elliott Frazier
Courses Plus Student 9,647 PointsElliott Frazier
Courses Plus Student 9,647 Pointsit doesn't look like you've added a div with a class of "container" in the code you showed me.