Jump to content

Centering my drop down menu using css


vpatterson

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
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
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  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...