Centering the Menu UL/LI & Menu not always appearing? [Centering Resolved]

[Tina]

Hi,

I’m sorry if this has been brought up before. I’ve seen a couple of posts but for some reason I cannot get the menu to center in a fixed width.

I’ve tried using: [code:276osbc6]#pixopoint_menu1 {
height:35px;
background:#B41520 url("../images/dazzle_red.png") repeat-x;
background-position:50% 0;
margin:0 auto;
        width:960px;}
#pixopoint_menu1 ul {
border:none;
background:none;
margin:0;
padding:0;
list-style:none;
margin:0 auto;
        width:960px;}[/code:276osbc6]

I can get the #pixopoint_menu1 to align to the middle but I can’t get the menu to align to the middle. I’ve been able to sort of force it using 80% in the #pixopoint_menu1 ul class but it’s still not quite right.

I’ve tried using display: inline; but I still couldn’t get it to work.

I’d like it to be able to sit in the middle so that it will stay there even if new items are added to the menu.

—

Also I’ve noticed that sometimes the menu doesn’t always show. The top level is always there but the slidedown doesn’t always appear and sometimes I have to mouseover again for it to appear – what could be causing this?

I’d be grateful for any assistance or pointing me in the right direction.

[Tina]

Sorry I have one more question ” title=”Smiley” />.

Is there anyway to make the dropdown menu automatically resize to the length of the link? Eg. If my links had:

Ant
Elephants & Dinosaurs

If I set the width then all the drop down menus are that width?

Thank you again.

[Tina]

"Tina" wrote:

Also I’ve noticed that sometimes the menu doesn’t always show. The top level is always there but the slidedown doesn’t always appear and sometimes I have to mouseover again for it to appear – what could be causing this?

I may have possibly found an answer for this (I’m testing this all locally so unfortunately I don’t have a live version).

I’ve noticed if I change the [b:h0oqwq5f]Speed of fade-in effect[/b:h0oqwq5f] 

[quote:h0oqwq5f]This option enhances the behaviour of the dropdown by creating an animated fade-in effect. This option is controlled by the ‘Superfish plugin’ for jQuery.[/quote:h0oqwq5f]

For some reason this works a bit better. It obviously isn’t as nice as the fade-in effect but it seems to be appearing every time in comparison to having it set on normal.

I’ve checked the effect on Chrome and IE and it’s displaying the same behaviour so it might be to do with the superfish plugin.

[Tina]

I have spent several hours on this, so I hope that someone finds this solution somewhat helpful.

I have tried just about every solution for centering the menu due to the LI float: left.

I tried the 50% solution but Opera hated it.

I’m not quite sure why a simple width: ? and margin: 0 auto; would not work for me. I tried working with the original CSS to make sure I hadn’t done anything wrong.

One issue I did come across was probably my lazy use of text-align: center in my header for an image in my main stylesheet. Due to that using display: inline worked on older browsers but caused an issue with child drop downs. When I realised, it was like 1 step forward and 2 back.

So if you need to center a header image, try using something img.centered { display:block; margin: 0 auto;}
[b:3jm72rgz]
These are the main classes I worked with for the solution:[/b:3jm72rgz]

[code:3jm72rgz]#pixopoint_menu1 {
height: 35px;
margin: 0 auto;
width: whatever width you want here px;
}

#pixopoint_menu1 ul {
list-style: none;
padding: 0;
}

#pixopoint_menu1 li {
color:#545454;
float: left;
left: 25%; /*This is what I added to center*/
margin:0;
padding:0;
position:relative;
z-index:20;
}
[/code:3jm72rgz]

After this you will probably see that the 2nd drop down menu has a gap due to left: 25% being applied to LI. That way you can’t select anything.

Find this:

[code:3jm72rgz]
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
left: auto
}[/code:3jm72rgz]

and apply 25% of what is the width of your child menu. I think the default is 120px; so the value would be -30px.

[b:3jm72rgz]Don’t forget it has to be negative to counteract the left: 25%.[/b:3jm72rgz]

So it should look like this:
[code:3jm72rgz]
#pixopoint_menu1 li:hover ul,#pixopoint_menu1 li.sfhover ul {
left: -30px;
}[/code:3jm72rgz]

It works me on a Vista PC in FF 3.5.7, IE 8.0.6, Opera 10.10, Chrome 4.0.249.78, Safari 4.04 and using Spoon Browser Sandbox FF 2.0 and IE 6.0.2.

I can’t guarantee it will work for you but I hope it points someone in the right direction.

[imported_Ryan]

Thanks for the run-down on your progress. This would have been basically impossible to bug-fix from here since we can’t see the code.

[Anonymous]

Hey i figured id throw this in because it took me forever to figure out and it was SOOOOO annoying but this css worked for me so I if you build off it you can probably figure it out

How to center a pixopoint menu
[code:2fpjdabs]
#pixopoint_menu1 {
    background:#b9181e repeat-x;
height: 36px;
    width:100%;
}

#suckerfishnav {
    background:#b9181e repeat-x;
    font-size:24px;
    font-family:Myriad Pro,sans-serif;
    font-weight:100;
height: 36px;
    width:100%;
text-align:center;
list-style:none;
    }
#suckerfishnav, #suckerfishnav ul {
display:inline;
    list-style:none;
    line-height:36px;
    padding:0;
    margin:0;
    width:100%;
text-align:center;
    }
#suckerfishnav a {
    display:inline;
    color:#000000;
    text-transform:uppercase;
font-weight: 100;
text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
display:inline;

    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:101px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
text-align:center;
list-style:none;
    }
[/code:2fpjdabs]

site example is mine, http://www.lurpin.com

good luck guys

[imported_Ryan]

You don’t seem to be using the menu on that site.

I’m surprised that renders correctly cross-browser due to the way you have used display:inline.

[Anonymous]

Yeah I went with a different alternative but the css did work on ie and firefox flawlessly, centered just as the first poster wanted, so good luck with everything.

[imported_Ryan]

It would be helpful to have known you had un-installed it.

[Author]

Posts