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
Ashley Omnas
5,881 PointsLists & Issues with them
I have 2 issues. For one, I want my navigation list to appear horizontal but not kick items down to the next line (using unordered list items with links inside). I have tried both display:inline and display:inline-block. I have also tried floating the list to the left. My second issue is that I DO NOT want the unordered list to indent at all like it does by default. I want it to be at the very left edge of the #pagecontent div (aligned with the 'back to treehouse' link. I have uploading my code to codepen so you can get a visual on what I am talking about.
3 Answers
Derek Hanson
7,838 PointsHi Ashley,
Your issue is with the unordered list. Naturally I believe that it is set to have an indent so setting the display isn't going to fix this. I see your navigation is horizontal and just some of the padding and margin issues. Below is probably what I would do. This is to set it to be inline with the back to treehouse link.
ul {
padding-left:0;
}
If you don't like how it renders your list then change the padding-top to fit where you want it. I would add that maybe playing with margin and padding a little bit until you see how things work will help you understand this a bit more.
Try this also just get an idea of what is happening.
ul {
margin: 0 auto;
}
Hope this helps,
Derek Hanson
7,838 PointsIf you can share your stylesheet so that I can see it that would be great. It might help me know exactly what your problem might be.
Ashley Omnas
5,881 Pointsstylesheet:
body { font-family: Helvetica, sans-serif; font-size: 1em; }
topbar
{ z-index: 100; width:100%; height: 13em; background: #33363b; position: absolute; border-top: 0.6em solid #25272a; }
pagecontent
{ margin: auto; width: 960px; max-width: 100%; height: 1200px; }
a[href="#"]{ position: relative; top: 2em; text-decoration: none; background: #25272a; border-radius: 0.8em; padding: 0.2em 1em; color: #888; }
h1 { padding-left: 1.75em; position: relative; top: 1.4em; color: #888; }
h1 span { color: #fff; }
object { width:1em; }
form { float: right;
}
form input { position: relative; top: -2em; width: 15vw; min-width: 10em; border-radius: 2em; padding:0.75em 2em; background: #25272a; border: none; }
form input[value="Search"] { color: #888; font-size: 0.8em; }
ul{float: left; padding-left: 0;}
ul li { display: inline; position: relative; top: 0.3em; }
a[href="navlink"]{background: #25272a; padding:1em 3em; }
a[href="navlink"]:link { color: #fff; text-decoration: none; }
a[href="navlink"]:hover { color: #257ac1; text-decoration: none; }
Ashley Omnas
5,881 Pointstopbar and pagecontent are both ids for divs.
Ashley Omnas
5,881 Pointsi think i figured it out. a normalizing css stylesheet i had attached wasn't allowing the ul to zero out the left padding. found a better normalize.css stylesheet online that, when applied, allowed ul to zero it out.
Derek Hanson
7,838 PointsNice
Ashley Omnas
5,881 PointsAshley Omnas
5,881 PointsHmmm, when i edit it in codepen, adding the padding-left to the ul works perfectly. but, when i work with it on my own computer in a text editor, it isnt fixing the problem. any idea why that would be?
Derek Hanson
7,838 PointsDerek Hanson
7,838 PointsDo you mind sharing your website so I can look at the CSS from there?
Ashley Omnas
5,881 PointsAshley Omnas
5,881 Pointsshared stylesheet below. i cant share the website because its not online, its a local webpage. i dont have hosting or a domain.