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
Alyssa Nienstedt
13,114 PointsText alignment HTML ID placement
I was playing around in workspaces and became a bit curious about something. I could center the navigation tabs (portfolio, about, and contact) by creating the div
<div id="nav">
around the corresponding elements in HTML and referring to them in the linked stylesheet (similar to the example Nick gave when creating the #wrapper div). However, why won't the text be aligned if I follow the second example he provided when discussing how to center the headline tags?
To clarify, when creating the Id for these headline tags we wrote
<a href="index.html" id="logo">
in the HTML file and referred to it as #logo in the stylesheet
but when I try to follow that same example and write
<li><a href="index.html" id="nav">Portfolio</a></li>
<li><a href="about.html" id="nav">About</a></li>
<li><a href="contact.html" id="nav">Contact</a></li>
the changes made to #nav in the stylesheet are not reflected when I preview the page.
1 Answer
Nils Garland
18,416 PointsHi, you can't have the same ID on multiple li's or anything for that matter. You must use "classes" or you would type it class="nav". Then it should work.
Kaitlyn Threndyle
18,204 PointsKaitlyn Threndyle
18,204 Pointsid's are a very specific type of CSS selector and id's of a certain name should only be used once in your document. Here you have used the same id of "nav" 3 times. When the browser reads your html it will see the first one (the id for portfolio) and ignore the rest. Instead you should use a class.
<a href="index.html" class="nav">In your CSS you would use .nav instead of #nav to apply styles such as text-align: center etc. Hope that does the trick.