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

Design

Posted by Steven McNeil
Steven McNeil
919 Points

Check my code.

I recently purchased a couple of books from John Duckett and am working through his HTML/CSS book to accelerate my learning a bit. Since I learn by doing more than watching videos and reading, I am coding an example in his book that I would like to use for my portfolio site, unfortunately, it seems as if there is something wrong with the code in the book as it does not show up like he has it. Can someone help me? Here is my HTML and CSS

HTML

<!DOCTYPE html> <html> <body> <link rel="stylesheet" href="css/style.css"> <div id="header"> <h1>Logo</h1> <div id="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">Service</a></li> <li><a href="">Portfolio</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> <div id="content"> <div id="feature"> <p>Feature<p> <div class="article column1"> <p>Column One<p> </div> <div class="article column2"> <p>Column Two<p> </div> <div class="article column3"> <p>Column Three<p> </div> <div id="footer"> <p>Ā© Copyright, 2011</p> </div> </body>

CSS

body { width: 90%; margin: 0 auto;}

content {overflow: auto;}

nav. #feature. #footer {

margin: 1%;} .column1, .column2, .column3 { width: 31.3%; float: left; margin: 1%; } .column3. {margin-right: 0%} li { display: inline; padding: 0.5em;}

nav. #footer {

background-color: #efefef; padding: 0.5em 0;}

feature, .article {

height: 10em; margin-bottom: 1em; background-color: #efefef;}

3 Answers

Steven Parker
Steven Parker
231,198 Points
Steven Parker
Steven Parker
231,198 Points

There should not be periods after the selector terms.

Terms like "nav." and "#feature." should not have periods at the end.

Otherwise, it's hard to know what other issues there may be since you did not describe what it would mean to "show up like he has it".

Also, when posting code, be sure to use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:

Steven McNeil
Steven McNeil
919 Points
Steven McNeil
Steven McNeil
919 Points

Ahh thank you! Here's the example http://htmlandcssbook.com/code-samples/chapter-15/liquid-layout.html

Tom Couillard
Tom Couillard
19,866 Points
Tom Couillard
Tom Couillard
19,866 Points

Hey Steven, I went over your example and the missing element of what you pasted is what is called a Universal Selector.

As Steven Parker mentioned using . should be reserved to use before class names in your CSS. Multiple selectors for one set of CSS properties should be separated by commas. I corrected your example and it is working as per your link on jsbin.

One last thing is your CSS link tag should remain within the head of your HTML and not within the body.

If you have any questions don't be shy!