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 How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

colin baird
colin baird
1,305 Points
Posted by colin baird
colin baird
1,305 Points

having trouble with navigation bar layout

i have the exact same code written out as in the video, but for some reason i cant get my bar to go from a column layout to a bar layout. the nav li {display: inline-block;} command seems to do absolutely nothing for me :/ helppp!

7 Answers

Itsa Snake
Itsa Snake
3,852 Points
Itsa Snake
Itsa Snake
3,852 Points

Check your HTML is OK

        <nav>
          <ul>
            <li><a href="index.html" class="selected">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
      </nav>
Itsa Snake
Itsa Snake
3,852 Points
Itsa Snake
Itsa Snake
3,852 Points

you can test if you're selecting the right element by changing the background colour and previewing:

nav li { display: inline-block; background: blue;}
Itsa Snake
Itsa Snake
3,852 Points
Itsa Snake
Itsa Snake
3,852 Points

Can you add the HTML and CSS for your nav panel?

colin baird
colin baird
1,305 Points
colin baird
colin baird
1,305 Points

CSS

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav ul li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

html

<nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <p><li><a href="about.html">About</a></li></p> <li><a href="contact.html">Contact</a></li> </ul> </nav>

colin baird
colin baird
1,305 Points
colin baird
colin baird
1,305 Points

hmm sorry, im new to this whole thing, i meant to give the actual html code but it looks like the browser has changed the format when i posted the comment. still the relevant item is the CSS which seems to have posted correctly. Im learning about 'diplay' commands on codecademy right now too which is frustrating since i feel like this should be a simple step

Itsa Snake
Itsa Snake
3,852 Points
Itsa Snake
Itsa Snake
3,852 Points

Try this:

nav li { display: inline-block; }

colin baird
colin baird
1,305 Points
colin baird
colin baird
1,305 Points

yea i went back and rewatched the video and just copied and pasted the same thing you sent. still nothing. i know it must be something im doing wrong though because i tried using the {display:inline-block} to two <div>'s i created on codecademy just now, and they didnt change format either :/

colin baird
colin baird
1,305 Points
colin baird
colin baird
1,305 Points

ahhh that was it! thanks, i had a random <p></p> set on my middle <nav> line. sometimes i just play around with the code to see what happens and i guess i forgot to remove it. appreciate all your help! :)