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
Bryan Miller
2,999 PointsHelp with grid lay out.
After completing the project to make a cupcake website on this I decided to attempt to make a website using the same grid style. The problem I am running in to is when I try to add the copyright at the bottom two things happen that bother me.
First is probably fairly simple, but I don't understand it. I've been giving my items borders just to see where they line up...you know just to help visualize where things are. The thing is there are times when my nested div borders expand outside the div they are contained in. I thought that were supposed to be contained? I am also confused because the containing div is set to 1000px and I use the grid class on the nested one that makes it 1000px, but the nested ends up larger.
The next thing is that the copyright is ignoring everything else on the page and going to the top of the page. I don't understand why it would do this....I've tried clearing it, but perhaps I'm doing it wrong? I just can't get that thing to go to the bottom of the page like it should.
6 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi,
You are missing a closing table tag, I think this is what's causing the problems with copyright. Just add < /table > after the last closing tr tag.
Also, using tables to position elements is generally a bad idea. You should consider using CSS to position the items in the ebay div. Perhaps change the table for an unordered list?
You should probably use
<p>© 2014 Blackjack Tactical. All Rights Reserved.</p>
in place of the copyright symbol as well.
Your doing the right thing by experimenting and as you continue doing the classes this should all become clearer. Don't worry too much about getting everything perfect, css takes a while to get your head around and there is always better way of doing things. Just concentrate on trying to get it to work for now.
Hope this helps!
EDIT: I've uploaded the code here so you can take a look.
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsNo problem, glad I could help.
I'd use 1 ul, put each image and link inside a li then set a width on the li's and float them left. Add margin to space them out a bit. So the code would look something like this:
<ul class="ebay grid_9">
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 1</a>
</li>
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 2</a>
</li>
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 3</a>
</li>
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 4</a>
</li>
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 5</a>
</li>
<li>
<img src="http://placehold.it/200x200">
<a href="#">Link 6</a>
</li>
</ul>
.ebay li {
float: left;
width: 200px;
text-align: center;
margin: 10px;
}
Good luck with the site :)
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi,
Are you taking into account the width of margin, padding and borders? You need to add these to the width property of an element to get its total width. For example
.container {
width: 1000px;
margin: 0 auto;
}
.contained-div {
width: 960px; /* sets the width of the content area */
margin: 0 20px; /* sets 20px margin on the left and right */
border: 5px solid #333; /* sets 5px border-width on the left and right */
}
In this example the total width of .contained-div is 960px + 40px + 10px = 1010px. If your contained div exceeds the size of its container the layout can break.
If there are 2 or more contained divs that you want on the same line you need to make sure the sum of their total widths doesn't exceed the containers width.
In your case instead of setting the width on the contained div directly, it is being set via grid.css. I think there is also margin applied so you may need to take that into account as well.
Hope this helps! If not post your code or a link to your site so we can take a closer look :)
Bryan Miller
2,999 PointsHere let me just post my code. I don't know why I didn't post it in the first place as it would make it easier to get an answer. Here we go:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<title>Blackjack Tactical Homepage</title>
</head>
<body>
<div class="container clearfix">
<h1 id="namebar" class="grid_12">Blackjack Tactical</h1>
<ul id="navbar" class="grid_12">
<li class="nav_button" class="first_button"><a href="http://www.google.com" target="_blank">Home</a></li>
<li class="nav_button">About</li>
<li class="nav_button">Repairs</li>
<li class="nav_button">Contact</li>
<li class="nav_button">Local Fields</li>
<li class="nav_button" class="last_button">Links</li>
</ul>
<div id="contact_info" class="grid_3">
<img id="logo" src="img/logo1.jpg"/>
<p>122 Battlefield Blvd S<br>
Chesapeake, Va 23322<br>
Phone: 757-482-0011<br>
Hours:
<ul>
<li>Monday-Friday: 9am-6pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 9am-4pm</li>
</ul>
</p>
</div>
<div id="ebaydiv" class="grid_9">
<table id="ebaytable">
<th id="tabletitle" colspan="4"><a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS" target="_blank">Visit our Ebay Store</a></th>
<tr>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/BLACK-HAWK-SERPA-HOLSTERS-/_i.html?_fsub=10063036&_sid=10753289&_trksid=p4634.c0.m322" target="_blank">
<img class="ebaypic" src="img/blackhawk.jpg"/>
<p>Blackhawk Holsters</p>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/PACKIN-TEE-T-SHIRTS-/_i.html?_fsub=422544219&_sid=10753289&_trksid=p4634.c0.m322" target="_blank">
<img class="ebaypic" src="img/packint.jpg"/>
<p>Packin' Tee</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/HOLSTERS-/_i.html?_fsub=16&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/leatherholster.jpg"/>
<p>Leather Holsters</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/Galco-USA-/_i.html?_fsub=818730019&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/galcoholster.jpg"/>
<p>Galco Holsters</p>
</a>
</td>
</tr>
<tr>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/AEGS-/_i.html?_fsub=467866519&_sid=10753289&_trksid=p4634.c0.m322" target="_blank">
<img class="ebaypic" src="img/airsoft.png"/>
<p>Airsoft Rifles</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/AIRSOFT-BBS-/_i.html?_fsub=338150019&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/bulkbb.jpg"/>
<p>Bulk BB's</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/Gas-Airsoft-Pistols-/_i.html?_fsub=643008419&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/airsoftpistol.jpg"/>
<p>Airsoft Pistols</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/AIRSOFT-/_i.html?_fsub=13&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/airsoft.jpg"/>
<p>Airsoft</p>
</a>
</td>
</tr>
<tr>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/MULTICAM-CLOTHING-/_i.html?_fsub=504457519&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/multicamclothing.jpg"/>
<p>Multicam Clothing</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/ATACS-CLOTHING-/_i.html?_fsub=504457619&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/atacsclothing.jpg"/>
<p>Atacs Clothing</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/Propper-Tactical-Clothing-/_i.html?_fsub=478830519&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/propperclothing.jpg"/>
<p>Propper Clothing</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/TRU-SPEC-TACTICAL-CLOTHING-/_i.html?_fsub=438312419&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/truspecclothing.jpg"/>
<p>Tru-Spec Clothing</p>
</a>
</td>
<tr>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/TACTICAL-GEAR-/_i.html?_fsub=11145830&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/tacticalgear.jpg"/>
<p>Tactical Gear</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/BOONIE-HATS-/_i.html?_fsub=12461386&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/booniehat.jpg"/>
<p>Boonie Hats</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/SECURITY-CLOTHING-GEAR-/_i.html?_fsub=269446719&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/dutygear.jpg"/>
<p>Duty Gear</p>
</a>
</td>
<td>
<a href="http://stores.ebay.com/BLACKJACK-TACTICAL-HOLSTERS/KIDS-CLOTHING-/_i.html?_fsub=336180919&_sid=10753289&_trksid=p4634.c0.m322" Target="_blank">
<img class="ebaypic" src="img/kidsclothes.jpg"/>
<p>Kids Clothes</p>
</a>
</td>
</tr>
</div>
<div id="copyright" class="grid_12">
<p>© 2014 Blackjack Tactical. All Rights Reserved.</p>
</div>
</div>
</body>
</html>
And the Style css:
body {
background: #96795C url("../img/background.jpg") repeat;
}
#namebar{
text-align: center;
color: #991F00;
background: black;
padding: 25px 0;
Margin: 0px 0px 0px 0px;
}
#navbar {
float:right;
margin: 0 0 50px 0;
list-style: none;
padding: 0 0 0 0;
}
.nav_button{
float:left;
margin-right: 10px;
margin-left: 50px;
background: black;
color: #991F00;
padding: 10px 20px;
border: 3px solid black;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.nav_button a {
color:#991F00;
text-decoration: none;
}
.nav_button:hover {
background-color: #96795C;
}
#contact_info {
margin: 0;
}
#ebaydiv {
Float:right;
Margin: 0;
}
th {
font-size: 40px;
Border-top: 8px solid #991F00;
border-right: 5px solid #991F00;
border-left: 5px solid #991F00;
background: #96795C;
}
th a {
text-decoration: none;
color: #991F00;
}
td {
Border: 5px solid #991F00;
background:#96795C;
text-align:center;
}
td img {
width: 10em;
height: 10em;
}
#copyright {
border:5px solid green;
Margin: 0px;
}
.container {
border: 3px solid green;
}
So what am I doing wrong? Should I just continue the classes and it will become clear? I've been trying to use what I learn in real life situations as I learn. I'm still pretty early in the learning process, but this is breaking my current understanding of how this should lay out. Everything was going smoothly till I added that dang copyright.
Bryan Miller
2,999 PointsWow such a silly mistake on my part and it makes perfect sense now. You're a life saver!
I will certainly be modifying this page as I learn new techniques. I will go ahead and try out the unordered list in place of my table. I'd probably need a new list for each row, right? Seems like that would be easiest to line up. Off to try it and see what happens.
In any case I really want to thank you. You have been so helpful!
Bryan Miller
2,999 PointsYes I tried this out and it worked extremely well. And I see the advantage of doing it this way...Much easier to add content in the future. All the alignment and such is already handled just have to ad list items. The table was a little more work than that.
Thanks again.