center menu in css

[Julien]

Hello,
I have a menu in css with position absolute, i have put auto for margin
right and left and put it un a global div but my menu stay on the left.
Could someone help me ?

Here is the partial CSS code :

body {
background-color: #000000;
background-image: url(images/top.png);
background-repeat: no-repeat;
background-position: top center;
text-align: center;
margin: 0;

#global {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1024px;
text-align: left;
}

#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}

And here is the partial html code :

<div id="global"> <a name="haut" id="haut"></a>
<div id="menu">
(...)
</div>

 

[Julien]

Ben C a écrit :

Hello,
I have a menu in css with position absolute, i have put auto for margin
right and left and put it un a global div but my menu stay on the left.
Could someone help me ?

You need to set left and right both to 0.

[...]

#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}

You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}

With that, the menu is at 0px on the left, it's not working then.

 

[Julien]

Ben C a écrit :

Hello,
I have a menu in css with position absolute, i have put auto for margin
right and left and put it un a global div but my menu stay on the left.
Could someone help me ?

You need to set left and right both to 0.

[...]

#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}

You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}

Sorry, I said margin but it's didn't what i wanted to say.
I just wanted to say i set righ and left "space" to auto.

 

[Neredbojias]

Hello,
I have a menu in css with position absolute, i have put auto for margin
right and left and put it un a global div but my menu stay on the left.
Could someone help me ?

Here is the partial CSS code :
* snip
And here is the partial html code :
* snip

Here's the whole answer. Post a url, not snippets.

 

[Julien]

Ben C a écrit :

Ben C a écrit :

Hello,
I have a menu in css with position absolute, i have put auto for margin
right and left and put it un a global div but my menu stay on the left.
Could someone help me ?
You need to set left and right both to 0.

[...]
#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}
You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}

Sorry, I said margin but it's didn't what i wanted to say.
I just wanted to say i set righ and left "space" to auto.

Yes, but that's not how you centre a positioned box. There's no rule
that says "solve for left and right under the constraint that they get
equal values". The browser solves for right if direction is ltr
otherwise for left.

See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

You centre therefore with margins and left and right set to 0 as I
explained.

It works on Firefox but not on my IE 6, you can check here :
http://www.move-france.fr/index2.php

 

[Julien]

Neredbojias a écrit :

Here's the whole answer. Post a url, not snippets.

I don't post url because there is things that will probably bore you
instead of wishing to help but as you requested, i have put an url on my
other reply.

 

[rf]

http://www.move-france.fr/index2.php

Increase your user defined font size one click and admire how the menu wraps
onto the next line and the submenus overlay the other text.

 

[John Hosking]

Ben C a écrit :

Ben C a écrit :
Hello,
I have a menu in css with position absolute, i have put auto for
margin right and left and put it un a global div but my menu stay
on the left.
Could someone help me ?
You need to set left and right both to 0.

[...]
#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}
You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}
Sorry, I said margin but it's didn't what i wanted to say.
I just wanted to say i set righ and left "space" to auto.

Yes, but that's not how you centre a positioned box. There's no rule
that says "solve for left and right under the constraint that they get
equal values". The browser solves for right if direction is ltr
otherwise for left.

See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

You centre therefore with margins and left and right set to 0 as I
explained.

It works on Firefox but not on my IE 6, you can check here :
http://www.move-france.fr/index2.php

Thanks for the URL but, in future, it's better to provide one with a
simplified example of whatever you're asking about.

It'd be *especially* better to provide a page without that noise that
starts up automatically. Where's the damned OFF button?

We don't need to see all that JS, either.

Nor the frames and ads. Seems we're really looking at
http://electropica.free.fr/index2.php in the end.

I changed your rulest for #global to simply

#global { position: relative; }

in FF2 using Web Developer, and your menu stayed centered after that.
What's more, it stayed aligned with the background bevel as I resized
the viewport, which it didn't do in FF before. (All of this is only at
the font size you specify; when I try to upsize even one notch, the menu
breaks.

I didn't test this in IE6, but you're welcome to try it and see how it
works for you.

Why dl, dt, and dd for your menu? What are you defining?

Why JavaScript for your links? Wouldn't you like the links indexed by
search engines (and usable by human visitors without JS)?

HTH. Bon chance.

 

[Julien]

John Hosking a écrit :

Ben C a écrit :

Ben C a écrit :
Hello,
I have a menu in css with position absolute, i have put auto for
margin right and left and put it un a global div but my menu stay
on the left.
Could someone help me ?
You need to set left and right both to 0.

[...]
#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}
You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}
Sorry, I said margin but it's didn't what i wanted to say.
I just wanted to say i set righ and left "space" to auto.

Yes, but that's not how you centre a positioned box. There's no rule
that says "solve for left and right under the constraint that they get
equal values". The browser solves for right if direction is ltr
otherwise for left.

See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

You centre therefore with margins and left and right set to 0 as I
explained.

It works on Firefox but not on my IE 6, you can check here :
http://www.move-france.fr/index2.php

Thanks for the URL but, in future, it's better to provide one with a
simplified example of whatever you're asking about.

It'd be *especially* better to provide a page without that noise that
starts up automatically. Where's the damned OFF button?

We don't need to see all that JS, either.

Nor the frames and ads. Seems we're really looking at
http://electropica.free.fr/index2.php in the end.

I changed your rulest for #global to simply

#global { position: relative; }

in FF2 using Web Developer, and your menu stayed centered after that.
What's more, it stayed aligned with the background bevel as I resized
the viewport, which it didn't do in FF before. (All of this is only at
the font size you specify; when I try to upsize even one notch, the menu
breaks.

I didn't test this in IE6, but you're welcome to try it and see how it
works for you.

Why dl, dt, and dd for your menu? What are you defining?

Why JavaScript for your links? Wouldn't you like the links indexed by
search engines (and usable by human visitors without JS)?

HTH. Bon chance.

I don't understand well what you are saying...
You say to just write :
#global { position: relative; }
instead of what i have ?

What do you say about the menu that fall after loading ?

For dl, dt and dd, its the style of the menu.
As it's the same as the main style, it's useless.

For the link, i use that style to avoid the player to get reload and I
didn't wanted to use frame.

 

[Julien]

John Hosking a écrit :

Ben C a écrit :

Ben C a écrit :
Hello,
I have a menu in css with position absolute, i have put auto for
margin right and left and put it un a global div but my menu stay
on the left.
Could someone help me ?
You need to set left and right both to 0.

[...]
#menu {
position: absolute;
top: 251px;
width: 743px;
right: auto;
left: auto;
}
You don't seem to have actually set margin to auto. What you need is
something more like this:

#menu {
position: absolute;
top: 251px;
width: 743px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
}
Sorry, I said margin but it's didn't what i wanted to say.
I just wanted to say i set righ and left "space" to auto.

Yes, but that's not how you centre a positioned box. There's no rule
that says "solve for left and right under the constraint that they get
equal values". The browser solves for right if direction is ltr
otherwise for left.

See http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

You centre therefore with margins and left and right set to 0 as I
explained.

It works on Firefox but not on my IE 6, you can check here :
http://www.move-france.fr/index2.php

Thanks for the URL but, in future, it's better to provide one with a
simplified example of whatever you're asking about.

It'd be *especially* better to provide a page without that noise that
starts up automatically. Where's the damned OFF button?

We don't need to see all that JS, either.

Nor the frames and ads. Seems we're really looking at
http://electropica.free.fr/index2.php in the end.

I changed your rulest for #global to simply

#global { position: relative; }

in FF2 using Web Developer, and your menu stayed centered after that.
What's more, it stayed aligned with the background bevel as I resized
the viewport, which it didn't do in FF before. (All of this is only at
the font size you specify; when I try to upsize even one notch, the menu
breaks.

I didn't test this in IE6, but you're welcome to try it and see how it
works for you.

Why dl, dt, and dd for your menu? What are you defining?

Why JavaScript for your links? Wouldn't you like the links indexed by
search engines (and usable by human visitors without JS)?

HTH. Bon chance.

I tried to clean the style to make it a defaut but it's still the same,
i don't know what where i'm wrong.

http://electropica.free.fr/index1.php

(still with the useless script, i won't remove everything in case it
works well to not have to put again in place)

 

[John Hosking]

John Hosking a écrit :

[snippage of OP and first responses by Ben C]

Thanks for the URL but, in future, it's better to provide one with a
simplified example of whatever you're asking about.

It'd be *especially* better to provide a page without that noise that
starts up automatically. Where's the damned OFF button?

We don't need to see all that JS, either.

Nor the frames and ads. Seems we're really looking at
http://electropica.free.fr/index2.php in the end.

I changed your rulest for #global to simply

#global { position: relative; }

in FF2 using Web Developer, and your menu stayed centered after that.
What's more, it stayed aligned with the background bevel as I resized
the viewport, which it didn't do in FF before. (All of this is only at
the font size you specify; when I try to upsize even one notch, the
menu breaks.

[snippage]

I tried to clean the style to make it a defaut but it's still the same,
i don't know what where i'm wrong.

I don't know what you mean by this. I can't tell what you did
differently. You seem to have adjusted the top: value of #menu by 2
pixels, and changed the width of #menu dl by about half an em, but you
don't seem to have tried my suggestion or followed Ben C's advice.

http://electropica.free.fr/index1.php

(still with the useless script, i won't remove everything in case it
works well to not have to put again in place)

I was hoping you would provide a *test page* with no script, no music,
no frames, no ads, nothing but the problem you're seeing and that you
want to discuss (that is, want help with). In the process of making the
simplified page, you quite possibly will find the problem and its
solution yourself.

I see that the above URL is different from the previous ones, but if
you're going to make a dummy test copy, you can make it simple for all
of us to study.

Good luck and good day.