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
Unsubscribed User
972 PointsNav Item Placement
Why are the items in my nav bar not against the left edge of the page like my header items?
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Thania Abrahams | FED</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thania Abrahams</h1> <h2>Front End Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/thaniabrahams"><img src="img/twitter-wrap.png" alt"Twitter Logo"></a> <a href="http://facebook.com/tye1509"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a> <p>© 2015 Thania Abrahams.</p> </footer> </div> </body> </html>
CSS Code:
a {
text-decoration: none;
}
ul {
list-style: none;
}
nav a {
list-style-position: none;
}
#wrapper {
background-color: orange;
}
As you can see I have tried several ways to remove styles from my nav. There should be no bullet points but it is still away from the left edge. Can you check as well if this is because of the normalize.css file.
Unsubscribed User
972 PointsHi Garrett! How do I do that? It seemed to work fine when I pasted HTML content but not CSS
Garrett Levine
20,305 PointsI can't type it in this box without it rendering as a CSS box, so bellow whenever you leave a comment/post there is a 'markdown cheatsheet' that shows you how to do it! :)
Unsubscribed User
972 PointsThanks! Giving it a shot now:
My CSS Code:
a { text-decoration: none; }
ul { list-style: none; }
nav a { list-style-position: none; }
wrapper {
background-color: orange; }
Ah worked, thank you! Do let me know if you need the normalize.css file done the same as well?
Garrett Levine
20,305 PointsI actually recommend removing the normalize file from the code above, a lot of people are familiar with is, and as your code with have more specificity being the lower style-sheet in the cascade, any previous styles won't apply to this situation.
i recommend JUST placing your html code, and the CSS relating to the question, so whatever CSS is affecting your nav and your header!
Unsubscribed User
972 PointsDone, thank you so much!
Garrett Levine
20,305 PointsI may have mislead you! I think you can leave all of your HTML code up (as sometimes how things are nested are important) but often just the specific CSS.
this is because unless you've made mistakes in the CSS syntax, not much will be affected by the rest of the page(I say this and know that is only 3/4s true).
Are you positive you've linked your CSS to your HTML properly?
Unsubscribed User
972 PointsNo worries, ok done :) Yes am positive, checked twice now, definitely right because everything else works it is just this bit I don't understand
Jacob Mishkin
23,118 PointsThe reason your nav is sticking out is that there are 40px of padding added to the ul element. if you go into the CSS and select the ul element and write padding: 0; it should to the trick. if your using chrome its always good to use the chrome dev tools (inspect element) and see what is going on. I hope this helps.
Unsubscribed User
972 PointsThanks Jacob! I see it now :) is the padding added in my normalize css file or is this default browser behaviour? How can I tell?
Jacob Mishkin
23,118 PointsI believe this is the default browser style. I would review the normalize file and see if there are any issues. one way to check that the normalize file is working is to change the color of a background or something. and if it works then you know the files are linked if not then there is another issue. but other than that everything looks okay. and Garrett is right. you need to add a <head></head> to the top of the page, like how he showed you.
Unsubscribed User
972 PointsIt is linked, please see below and tell me if you see any issues. In the videos they do not put closing tags for the link items in the head element:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Thania Abrahams | FED</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Thania Abrahams</h1> <h2>Front End Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/thaniabrahams"><img src="img/twitter-wrap.png" alt"Twitter Logo"></a> <a href="http://facebook.com/tye1509"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a> <p>© 2015 Thania Abrahams.</p> </footer> </div> </body> </html>
Jacob Mishkin
23,118 Pointsyour HTML looks good to me. Did you look at the normalize styling? is there and default styling for ul elements? such as
padding: 0; margin: 0;
ect.
Unsubscribed User
972 PointsI couldn't tell what was what in the normalize file but I see the padding in there now. Thank you Jacob and Garrett!!
1 Answer
Garrett Levine
20,305 Pointsif that is your code then some tags need to wrapped in a head tag, like so;
<head>
<meta>
<title></title>
<link></link>
</head>
I don't think that this is the problem, but it may lead to other problems.
to be honest I am not sure why your code is not working.
All elements have default margins, which would cause your lists to be slight off of the left side. I am not sure how far off from the left it is without seeing the site. if you're active right now on workspaces, you can link the site and I can take a look at it and try and help with from there.
Unsubscribed User
972 PointsDarn, I pasted my code incorrectly again. I do have my tags wrapped as meant to. Please see if you can open this: https://teamtreehouse.com/workspaces/3322952#
Garrett Levine
20,305 PointsGarrett Levine
20,305 PointsI recommend going into this post and editing this so we see the CSS as code, please! :)