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 Hannah Mackaness
Hannah Mackaness
4,437 Points

I hacked together code for my drop down menu..but now I can't centre my menu items..

I want my menu items to be spread out evenly across the page using a percentage so they are somewhat responsive (I will add a media query later to stop them looking messy).

I was using text-align: centre just fine but then I wanted a drop down menu for 2 items so I copied some code and the drop down menu works..but now I can't work out how to centre the items! Also the drop down items are not centred and have a strange space..where does this come from?

It looks like this when you hover over a menu item with a drop down.... :http://mackmack.tumblr.com/image/132534677322

~~~.nav,
.nav ul {
list-style: none;
border: 2px solid yellow;

}

.nav {
float:left;
text-align:center;
border: 2px solid green;
width:100%;

}
/**************************MAKES LIST HORIZONTAL NOT VERTICAL****/
.nav > li {
float:left;
border: 2px solid orange;
text-align:center;
margin: 0 1.5em;
}

.nav li a {
display:block;
height: 2em;
line-height: 2em;
/*
padding: 0 1.5em;
*/
text-decoration:none;
color:orange;
border: solid 2px steelblue; 
}

.nav ul {
position:absolute;
display:none;
z-index: 999;
}

.nav ul li a {
width: 80px;
}

.nav li:hover ul {
display:block
}

<ul class= "nav">
       <li><a href = "home.html">Home</a></li>
       <li id = "about.html">
         <a href = "about.html">About</a>

 <!--DROP DOWN MENU UNDER ABOUT-->
            <ul>
              <li><a href = "cv.html">CV</a></li>
              <li><a href = "process.html">process</a></li>
            </ul>

      </li>

       <li>
         <a href = "clothes.html">Clothes</a>
          <ul>
              <li><a href = "jackets.html">Jackets</a></li>
              <li><a href = "fabric.html">Fabric</a></li>
          </ul>

       <li><a href = "paintings.html">Paintings</a></li>
       <li><a href = "contact.html">Contact</a></li>
     </ul>
Jacob Mishkin
Jacob Mishkin
23,118 Points

I see some issues with the HTML, but first how do you want the nav to look do you want the CV and process to be nested? Or do you want every link to be on the same plane?

EDIT Sorry, I have to reread your question. you want Jackets and Fabrics to be nested inside Clothes and CV and Process to be nested inside the about. correct?

Hannah Mackaness
Hannah Mackaness
4,437 Points

heya, Thanks! yes that's correct - the second one...and thanks for the link but its sending me to page not found but I will have a look round the site

And I deleted all the spaces :)

3 Answers

Erwin Meesters
Erwin Meesters
15,088 Points

You are on your way. Keep the wrapper div as a container. Your css might look something like this:

#wrapper {
  text-align: center;
}
.nav {
  display: inline-block;
}

That's all you need to center the navigation.

Roy Penrod
Roy Penrod
19,810 Points
Roy Penrod
Roy Penrod
19,810 Points

A thing to keep in mind when centering elements with CSS is that if the text-align property doesn't center it, you can probably center the element by setting the left and right margins to auto.

Try wrapping the menu in a div and applying the auto left and right margins to it.

Hannah Mackaness
Hannah Mackaness
4,437 Points

Thanks! I had a go but with no luck..I attached the code underneath just to double check it's not a syntax error

#wrapper {
margin: 0 auto;
}

<div id="wrapper">
    <ul class="nav">
       <li><a href="home.html">Home</a></li>
       <li id="about.html">
         <a href="about.html">About</a>
Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

There are some issues in the HTML, first is spacing remove the space from the = to the "" that should be one line, no breaks. As far as the styling goes here is a good blog on how to do this. Pretty detailed.

http://htmldog.com/techniques/dropdowns/

If this doesn't help let me know.

Jacob Mishkin
Jacob Mishkin
23,118 Points

Maybe this will help:

http://www.jankoatwarpspeed.com/create-dropdown-menus-with-css-only/