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
Alex Gauthier
434 PointsTrouble with coding Grids
Hey everyone,
so I've just recently began to start trying to learn to code. I'm 16 and creating a mock website to practice. My most recent website addition includes using grids to structure my website. However, I've hit a bump in the road and could really use some help. The grid is 1000px wide and I'm currently trying to get my navigation to line up next to a mock logo. I followed the instructions provided by team treehouse, but still cannot get it to work. I copied and pasted the grid.css file so that shouldn't be the problem but I will include both the grid and html codes to hopefully help you help me :).
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>All Things Vintage</title>
<link rel="stylesheet" href="normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div class="grid_5">
<img src="All Things Vintage Logo 405px.gif" alt="All Things Vintage"
</div>
<ul class="nav grid_7 omega">
<li><a href="#">About</a></li>
<li><a href="#">Items for Sale</a></li>
<li><a href="#">Blog</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
grid:
/*
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}
2 Answers
Shivam Bhalla
Courses Plus Student 5,035 PointsSeems like you didn't close your img element.
It should be <img src="All Things Vintage Logo 405px.gif" alt="All Things Vintage" />
To answer your question, I have updated your code: jsFiddle
UPDATED HTML
<div class="container clearfix">
<div class="grid_4 img omega">
<img src="All Things Vintage Logo 405px.gif" alt="All Things Vintage" />
</div><!-- /image div -->
<ul class="nav grid_7 omega">
<li><a href="#">About</a>
</li>
<li><a href="#">Items for Sale</a>
</li>
<li><a href="#">Blog</a>
</li>
<li class="last"><a href="#">Contact Us</a>
</li>
</ul>
</div> <!-- /container -->
UPDATED CSS:
.img {
border:1px solid red; /* +DEBUG+ */
}
ul.nav {
float:right; /* Apply Float Right,*/
clear:none; /* Makes it so it does not go to next line */
border:1px solid red; /* +DEBUG+ */
}
ul.nav li {
display:inline-block;
}
P.S: I changed your img div class to grid_4, because grid_5 is too large which causes the nav to go to the next line. You can also make the nav grid_6 and keep the image div grid_5 if you like. Up to you.
Apart from that, I would highly recommend you not to rely on grid systems and learn CSS itself. You do not need grid systems to create a site, and quite frankly they can limit you tremendously.
I.E: If your employer or client gives you a design to code but has unque design elements (which is very often), you will need to the CSS manually.
If you do plan on using grid systems, I would recommend you using Bootstrap.
Let me know if you have any questions.
James Barnett
39,199 PointsYour HTML isn't valid according to /validator.w3.org/nu, I spotted 2 issue with your <img> tag ...
- the closing angle bracket
>is missing - the image file name needs to be URL encoded, replace the spaces with
%20
James Barnett
39,199 PointsJames Barnett
39,199 PointsI agree with not relying on grid systems however, grids themselves are perfectly valid design pattern, they have a long tradition in Print Design and have only (more) recently become popular in Web Design.
The issue I have with grid systems like Bootstrap is they add too much in to begin with you should learn to walk before you run, learn about media queries, fluid grids, fluid images, responsive typography.
Alex Gauthier
434 PointsAlex Gauthier
434 PointsThank you both so much! You really got me over a bump that was stressing me out. I especially love bootstrap. I played around with it for about an hour and really improved my website by about 100% already. Thanks for teaching some new skills to a young gun like me. I'm always eager to learn from those more experienced than me. Thanks again!
Shivam Bhalla
Courses Plus Student 5,035 PointsShivam Bhalla
Courses Plus Student 5,035 PointsYour welcome!