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
cordarro gordon
621 PointsWhy are my element/div's not stacking on top of each other? Can some help please
Why is my code not stacking in order, to the way that I have it coded ? This is the code
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Grainberry</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <header> <img class="logo" src="images/logo.png" alt="HTML5 Icon" width="243" heigth="139"></div> <ul class="social"> <li><a href="facebook.com"><img scr="images/Facebook_icon.png" width="75" height"75"></li> </ul> </div> <nav> <ul> <li><a href="portfolio.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="product.html">Product</a></li> <li><a href="eatingplans.html">Eating Plans</a></li> <li><a href="mediacenter.html">Media Center</a></li> <li><a href="store.html">Store</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header> <section> <p>Gallery will go here.</p> <section> <footer> <p>&Copy; 2014 Cordarro Gordon</p> </footer> </body> </html>
*{ padding:0px; margin:0px; }
header{ background-color:black; height:150px; } p{} nav{ background-color:red; width:100%; height:100px; display:block; margin-top: } ul{ display:block; text-align:center; margin-top:-20px; } a{ text-decoration: none; }
li { display:inline; text-decoration:none; padding-left:30px; font-size:15px; text-align:center;
}
img.logo{ display:block; margin-left:auto; margin-right:auto; padding:20px; }
section{ background-color:green; display:block; width:100%; margin-top:px;
}
footer{ background-color:yellow; display:block; margin-top:200px; }
7 Answers
Cory Allen
614 PointsI'm only seeing closing div tags in your code. For elements to function properly you must include an opening and closing tag, unless you're working with a self closing tag.
Miguel Machado
21,673 PointsYou are not closing section tag
<section>
<p>Gallery will go here.</p>
<section>
Correct
<section>
<p>Gallery will go here.</p>
</section>
cordarro gordon
621 PointsOk so I made the correction by fixing the section element. Even with me closing the element tag (<section></section>). my Element/ Div tags are still out of order. I tried to rework the Css a little, but I am still getting the same results.
Here's the code
*{ padding:0px; margin:0px; }
header{ background-color:black; height:150px; } img.logo{ display:block; margin-left:auto; margin-right:auto; padding:20px; }
nav{ background-color:red; width:100%; height:100px; display:block; }
ul{ display:block; text-align:center; margin-top:-20px; } a{ text-decoration:none; }
li { display:inline; padding-left:30px; font-size:15px; text-align:center;
}
footer{ background-color:yellow; display:block; margin-top:200px; }
section{ background-color:green; display:block; width:100%; }
cordarro gordon
621 Pointslol Ok cool thanks Miguel. Please dis-regrade Cory
Miguel Machado
21,673 PointsYou can see the correct code here
<header>
<img class="logo" src="images/logo.png" alt="HTML5 Icon" width="243" heigth="139">
<ul class="social">
<li>
<a href="facebook.com"><img scr="images/Facebook_icon.png" width="75" height"75"></a>
</li>
</ul>
<nav>
<ul>
<li><a href="portfolio.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="product.html">Product</a></li>
<li><a href="eatingplans.html">Eating Plans</a></li>
<li><a href="mediacenter.html">Media Center</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
</header>
<section>
<p>Gallery will go here.</p>
</section>
<footer>
<p>&Copy; 2014 Cordarro Gordon</p>
</footer>
In line 2 and 6, you have a </div> without open it in line 4, You didn't close the a tag
cordarro gordon
621 PointsThanks Miguel, but I'm still get the same results. I was wondering, can I use margin-top and margin-top:negative, to fix the stacking structuring on the browser? So that my element on my DOC pages, can be represented as they are structured on the browser?
Example of what I mean by
Margin-top:negative
margin-top:-300px;
cordarro gordon
621 PointsCss Code
*{ padding:0px; margin:0px; }
header{ background-color:black; height:150px; } img.logo{ display:block; margin-left:auto; margin-right:auto; padding:20px; }
nav{ background-color:red; width:100%; height:100px; display:block; }
ul{ display:block; text-align:center; margin-top:-20px; } a{ text-decoration:none; }
li { display:inline; padding-left:30px; font-size:15px; text-align:center;
}
footer{ background-color:yellow; display:block; margin-top:200px; }
section{ background-color:green; display:block; width:100%; }
Cory Allen
614 PointsYou can set marginal values negatively. Also, a tip for you. Instead of using margin-top: you could use margin: -20px 0 0 0;
An explanation:
margin: top right bottom left;
You can set a value for each without having to repeat yourself. :)
cordarro gordon
621 Pointsok cool thanks for all the help. I think figured out the problem. If you look in the Doc page. I have a ul list called <ul class="social"> but their was nothing inside the list element. When I deleted that div element lol everything started to align in order.
cordarro gordon
621 PointsCan some one please tell me why are my (class="productselection") are misaligned ?
The code
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>Grainberry</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <header> <img class="logo" src="images/logo.png" alt="HTML5 Icon" width="200" heigth="200"> </div> <nav> <ul> <li><a href="portfolio.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="product.html">Product</a></li> <li><a href="eatingplans.html">Eating Plans</a></li> <li><a href="mediacenter.html">Media Center</a></li> <li><a href="store.html">Store</a></li> <li><a href="blog.html">Blog</a></li> </ul> </nav> </header> <section> <div class="wrapper"> <h1 id="caption">ANTIOXDANTS<h1> <p> We grow our own high antioxidant grain in the spring and harvest it late summer or early fall. We mill the Grain Berry® high antioxidant grain and add it to our whole grain wheat, in the case of our delicious Bran Flakes or Pancake Mix and Muffin Mix. We add the Grain Berry® Bran to our whole grain delicious oats in the case of our Toasted Oats cereal and Honey Nut and Apple Cinnamon varieties. Why do we grow high tannin Grain Berry® grain? Because we cannot buy it and it's the best way we know to boost the natural antioxidant content of our products more than any other grain or any otherfruit or vegetable. </p> </div> </section> <div id="productframe"> <ul> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> <li> <div class="productselection"> <img src="images/cereal_icon.png" alt="icon" width="180" height="180"> <img class="newicon" src="images/New.png" alt="icon" width="65" height="65"> <h3 class="category">Cereals</h3> <div class="viewbnt"> <h4 class="view">View</h4> </div> </div> </li> </ul> </div> </section> <footer> <p>&Copy; 2014 Cordarro Gordon</p> </footer> </body> </html>
CSS
*{ padding:0px; margin:0px; } @font-face { font-family:Rockwell; src:url("Rockwell"); }
p { color:white; font-family:Rockwell; font-size:14px; font-weight: normal; }
h1{ color:white; font-family:Rockwell; font-weight: 200; font-size:60px; font-kerning:10px; }
h3{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; }
h3{ color:#666666; font-family:Rockwell; font-weight: 100; font-size:20px; }
header{ background-color:white; height:150px; }
img.logo{ display:block; margin-left:auto; margin-right:auto; margin-bottom:30px; position:relative; top:20px; padding-bottom:30px; }
nav{ background-color:#b00539; width:100%; height:80px; display:block; }
ul{ display:block; text-align:center; margin-top:-20px;
}
li,a{ text-decoration:none; color:white; font-family:Verdana; display:inline; padding-left:20px; font-size:15px; text-align:center; position: relative; top:12px; }
footer{ background-color:yellow; display:block; margin-top:200px; }
section{ width:100%; height:560px; margin-top:70px; background-image:url(../Images/Wrapper_background.jpg) } .wrapper{ width:50%; margin-left:auto; margin-right:auto; position:relative; top:70px; }
h1,caption{ text-align: center; padding-top:30px;
} .wrapper p{ line-height: 200%; position:relative; }
productframe{
width:100%; height:338px; background-color:none; margin-top:20px; } .productselection{ background-color:none; width:25%; height:338px; display:inline; float:left; }
.productselection:hover { background: rgba(0,0,0,0); color: #e1c408; box-shadow: inset 0 0 0 3px #e1c408; }
.newicon{ margin-left:auto; margin-right:auto; display:block; position:relative; top:-18px; padding-top:5px; } p viewbnt{ margin-left: auto; margin-right: auto; }
.viewbnt{ background:#82ca9c; width:30%; height:36px; margin: auto; position: relative; top:-15px; border-radius: 5px 5px 5px 5px; } h4,view{ position: relative; top:7px; color:white; }
h3,category{ color:#666666; font-family:Rockwell; font-weight: 200; font-size:40px; position: relative; top:-25px; }
Eric Butler
33,512 PointsThey are misaligned because you've added float: left to .productselection, but they are all children of li elements, which are not floated -- they are display: inline. Your .productselection divs are, therefore, only floating to the left of the li that contains it. The display: inline setting is what is making them seem like they're floated at all, but (as you say) they are misaligned. So in this case, you should add the float: left; to the li elements, remove the display: inline because it's redundant, and add something like overflow: auto; or a clearfix class (see below) to the ul element to "catch" the floats.
Clearfix class:
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
Use like:
<ul class="clearfix">
<li>...</li>
...
</ul>
Good luck.
cordarro gordon
621 Pointscordarro gordon
621 PointsAll my element Tag are closed. Can you be a little more specific ? Or can you show me an example of what you are talking about. The answer you give me is a little vage
Cory Allen
614 PointsCory Allen
614 PointsAfter the img tag you have a closed div tag that has no opening tag along with it. Moving on, before the opening nav tag you have another closed div tag with out the required opening tag. As stated in another reply by Miguel, you have also not closed your section tag.