Jump to content
vpatterson

Centering my drop down menu using css

Recommended Posts

vpatterson

I need to center my text and my drop down menu, using CSS and I cannot figure it out. I have tried multiple thing and nothing is working!

here is my CSS code:

#menu:after {clear:both;}

ul {

font-family: Arial, Verdana;

font-size: 14px;

margin: 0;

padding-bottom: 60px;

list-style: none;

}

ul li {

display: block;

position: relative;

float: left;

}

li ul {

display: none;

}

ul li a {

display: block;

text-decoration: none;

color: #ffffff;

border-top: 1px solid #ffffff;

padding: 5px 15px 5px 60px;

background: #1e7c9a;

margin-left: 1px;

 

}

ul li a:hover {

background: #3b3b3b;

}

li:hover ul {

display: block;

position: absolute;

}

li:hover li {

float: none;

font-size: 11px;

}

li:hover a { background: #3b3b3b; }

li:hover li a:hover {

background: #1e7c9a;

}

 

And my drop down menu code:

 

 

 

 

Can someone please help me? photo attached as well.

Royal Door Template Locater - Internet Explorer.jpg

Royal Door Template Locater - Internet Explorer_2.jpg

Share this post


Link to post
Share on other sites
vpatterson

The closest to center I can get is by changing the padding but it is not truly center.

 

 

My new code is:

.center

{

margin-left:36.5%;

margin-right:50%;

width:30%;

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;

 

}

 

 

 

 

 

 

Navigation code is :

 

 

 

 

I need the navigation bar to be truly centered...

Please HELP?

Share this post


Link to post
Share on other sites
steven-g

Which browser are you using, because in IE9 it looks pretty good, Chrome is another matter, I'll take a look later. In the meantime could you go back to your posts and wrap the code in code tags - it does make copying the text much easier.

Share this post


Link to post
Share on other sites
vpatterson

I am not sure what you mean by wrapping my code, but it will mainly be used in I.E. not quite sure of the version. His computer is pretty old, the site I am creating will never be hosted online, just used for easier access to the information for employees.

Share this post


Link to post
Share on other sites
steven-g
My new code is:

.center

{

margin-left:36.5%;

margin-right:50%;

width:30%;

background-color:#b0e0e6;

text-align: center;

vertical-align: middle;

}

Try swapping out the first 3 lines for a float

.center
{
float: left;
background-color:#b0e0e6;
   text-align: center;
vertical-align: middle;
}

And the wrapping code means doing as I did above, use the "#" symbol when you are writing your post. It just makes things easier to read and use.

Share this post


Link to post
Share on other sites
vpatterson

That didn't work. it left aligned it.

Share this post


Link to post
Share on other sites
steven-g

It works fine here (which I know doesn't help you), if the computer is that old it is probably the browser that doesn't support certain parts of your code. I have attached my files just in case I did change anything else without remembering, but you might have to either try and update to a newer browser, or search for older versions of the things you are trying to do.

index-html.txt

style-css.txt

Share this post


Link to post
Share on other sites
vpatterson

my version of I.E. is up to date and it doesn't seem to work on mine. Its ok I shall keep the padding until I figure it out thank you for your help anyway.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×