[Solved] I am trying to center my drop down navigation bar with css

[vpatterson]

When you view my page in full screen the navigation bar looks center but when you resize my page it is no longer center. I need help with my CSS code because I know the error is in there. Can someone please help me?

my code is below:

CSS:

.center
{
margin-left:36.5%;
margin-right:50%;
width:100%;
background-color:#b0e0e6;
    text-align: center;
vertical-align:middle;


}

ul {
     padding:0;
     margin:0;
     list-style: none;
     background:#000;
     height:36px;
     text-align:center;



}


 ul li {
     float:left;
     position:relative;


}


 a:link, a:visited {
     text-decoration: none;
     color: #FFF;
     font-weight:bold;
}

ul li a, ul li a:visited {
     display:block;
     color:#fff;
     width:auto;
     height:auto;
     line-height:20px;
     padding:10px;
     text-align:center;

}


ul li a:hover {
     display:block;
     color:#000;
     background:#FFF;
     line-height:20px;
     padding:10px;
}


ul li ul, ul li:hover ul li ul {
     display: none;
}


ul li:hover ul {
     display:block;
     position:absolute; 
     top:auto;
     left:0;
     height:auto;

}


ul li:hover ul li a {
     display:block;
     text-align:center; 
     border-bottom:1px solid #FFF;

}



ul li:hover ul li:hover ul {
     display:block;
     position:absolute;
     left:124px;
     top:0;

}

HTML:

<div class="center">

<ul id="menu">

    <li><a href="#floorclosers">Floor Closers</a>
        <ul>
            <li><a href="#p-floorclosers">P-Floor Closers</a></li>
            <li><a href="#bp-floorclosers">BP-Floor Closers</a></li>
            <li><a href="#a-floorclosers">A-Floor Closers</a></li>
       <li><a href="#f-floorclosers">F-Floor Closers</a></li>
        <!--<li><a href="#h-floorclosers">H-Floor Closers</a></li>-->
        <!--<li><a href="#slimline-floorclosers">Slimline-Floor Closers</a></li>-->
       </ul>
    </li>
    <li><a href="#overheadconceledclosers">Over Head Concealed Closers</a>
        <ul>
            <li><a href="#p-overheadconceledclosers">P-Over Head Concealed Closers</a></li>
            <li><a href="#bp-overheadconceledclosers">BP-Over Head Concealed Closers</a></li>
            <li><a href="#a-overheadconceledclosers">A-Over Head Concealed Closers</a></li>
       <li><a href="#f-overheadconceledclosers">F-Over Head Concealed Closers</a></li>
        <li><a href="#h-overheadconceledclosers">H-Over Head Concealed Closers</a></li>
       </ul>
    </li>
    <li><a href="#sidelites">Side Lites</a>

    </li>
</ul>

</div>

Please Help!!!

[Paulie_D]

Could you please put that code dump into Codepen…it makes it much easier to help you.

The basic answer is, however, to NOT use floats but use inline-block or display:table-cell on the li..with suitable additional properties.

[vpatterson]

I am sorry for my ignorance but very new to this site what is codepen?

[Paulie_D]

Codepen.io is like jsfiddle.net.

A place where you can input your HTML, CSS & JS and have it run in a live environment without needing a site of your own.

The ‘Pen’ you create can be shared (as a link) and we can take copies, fork it and tweak it to get what you might need.

Like this: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

[vpatterson]

Well my company has network restrictions and I cant view this page any further than inputting the code and saving. So I hope this worked http://codepen.io/vpatterson/pen/fxjEF.

[vpatterson]

I am not sure if anyone will be looking to this thread for help. But I have found the solution to my problem. I changed my width to 455px and inserted a height of 32px and set my margins to auto. thank you for who tried to help.

[Paulie_D]

Ok…I removed the margins you had on the .center div (not sure what they were doing) so it’s now 100% wide.

If you want to restrict the width on the div change it to a max-width to keep it responsive (if that’s what you want)

Then I remove the floats from the li and changed them to 'display:inline-block and got this

http://codepen.io/Paulie-D/pen/GliIK

Is that more like what you were after?

It can easily be tweaked if not.

As an alternative, here’s the display:table (on the ul) and display:table-cell on the li option

http://codepen.io/Paulie-D/pen/zchfw

[vpatterson]

I got it but thank you anyway now it just seems like it was a simple problem

[Author]

Posts