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

CSS

Posted by damon patron
damon patron
4,692 Points

top nav bar positioning

i wish to know, that has the gecko hand in the top left hand corner and the library, dashboard, profile, forum that hole color and how it is positioned, how do i make a tab bar like that which is positioned like that and because i did a tab bar and and tried to put it like that here is my code.

.topTabBar {
    width: 100%; 
    max-width: 100%;
    background-color: black;
    margin: auto;
    padding-top: 50px;
    border-color: black;
    border: 1px solid;
}

put that in your html and you will know what i mean i want it position like the tab bar that is in this web site and how you scroll up and down and it is in a "still" position please some one help with the code i need thank you

5 Answers

James Barnett
James Barnett
39,199 Points

damon patron - Try adding:

.topTabBar ul li { 
  margin-left: 50px; 
  display: inline-block;  
}

If you are still having trouble create a codepen with your HTML & CSS.

You can read up on the magic of the inline-block property in the Create a centred horizontal navigation blog post.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Put your HTML and CSS in codepen so that we can see it in action.

Have you done any CSS stages because your writing code kinda strange.

Border colour is set in the border line. Should read:

Border:1px solid #000;

Is one example.

damon patron
damon patron
4,692 Points
damon patron
damon patron
4,692 Points

im new at this so what is codepen im just redoing the build a basic website so i can know more about html and css

Gordon Jiroux
Gordon Jiroux
8,728 Points
Gordon Jiroux
Gordon Jiroux
8,728 Points

I think what he's looking for is the "primary-nav" class in the css for the forum

damon patron , View the page source, look for the CSS HREF, and go to the URL for the CSS... it's "mini-fied" but you can still read it.

I'd write out the CSS for you, but it's already there.... and it's 3am here... I've gotta get to bed

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

position: fixed will stick it to the top.

Use some sort of developer tool like Firebug to view the markup and CSS for this site, and you'll see how they did it.