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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...