center menu in css

Discussion in 'HTML' started by Julien, Jan 28, 2009.

  1. Julien

    Julien Guest

    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, Jan 28, 2009
    #1
    1. Advertising

  2. Julien

    Julien Guest

    Ben C a écrit :
    > On 2009-01-28, Julien <> wrote:
    >> 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, Jan 28, 2009
    #2
    1. Advertising

  3. Julien

    Julien Guest

    Ben C a écrit :
    > On 2009-01-28, Julien <> wrote:
    >> 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.
    Julien, Jan 28, 2009
    #3
  4. Julien

    Neredbojias Guest

    On 28 Jan 2009, Julien <> wrote:

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

    --
    Neredbojias
    http://www.neredbojias.org/
    http://www.neredbojias.net/
    The road to Heaven is paved with bad intentions.
    Neredbojias, Jan 28, 2009
    #4
  5. Julien

    Julien Guest

    Ben C a écrit :
    > On 2009-01-28, Julien <> wrote:
    >> Ben C a écrit :
    >>> On 2009-01-28, Julien <> wrote:
    >>>> 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, Jan 28, 2009
    #5
  6. Julien

    Julien Guest

    Neredbojias a écrit :
    > On 28 Jan 2009, Julien <> wrote:
    >
    >> 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.
    >


    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.
    Julien, Jan 28, 2009
    #6
  7. Julien

    rf Guest

    Julien wrote:

    > 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.
    rf, Jan 28, 2009
    #7
  8. Julien

    John Hosking Guest

    Julien wrote:
    > Ben C a écrit :
    >> On 2009-01-28, Julien <> wrote:
    >>> Ben C a écrit :
    >>>> On 2009-01-28, Julien <> wrote:
    >>>>> 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.

    --
    John
    Possessive "its" has no apostrophe. Even on the Internet.
    John Hosking, Jan 28, 2009
    #8
  9. Julien

    Julien Guest

    John Hosking a écrit :
    > Julien wrote:
    >> Ben C a écrit :
    >>> On 2009-01-28, Julien <> wrote:
    >>>> Ben C a écrit :
    >>>>> On 2009-01-28, Julien <> wrote:
    >>>>>> 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, Jan 29, 2009
    #9
  10. Julien

    Julien Guest

    John Hosking a écrit :
    > Julien wrote:
    >> Ben C a écrit :
    >>> On 2009-01-28, Julien <> wrote:
    >>>> Ben C a écrit :
    >>>>> On 2009-01-28, Julien <> wrote:
    >>>>>> 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)
    Julien, Jan 29, 2009
    #10
  11. Julien

    John Hosking Guest

    Julien wrote:
    > John Hosking a écrit :
    >> Julien wrote:
    >>> Ben C a écrit :


    [snippage of OP and first responses by Ben C]

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

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

    --
    John
    John Hosking, Jan 30, 2009
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. brucie

    Re: [css] center

    brucie, Jun 22, 2003, in forum: HTML
    Replies:
    0
    Views:
    1,401
    brucie
    Jun 22, 2003
  2. shank

    CSS and center align

    shank, Sep 29, 2003, in forum: HTML
    Replies:
    7
    Views:
    27,923
    b_imam77
    Dec 30, 2008
  3. Yogi_Bear_79

    How to properly center this menu

    Yogi_Bear_79, Nov 29, 2006, in forum: HTML
    Replies:
    8
    Views:
    332
    dorayme
    Nov 29, 2006
  4. Replies:
    1
    Views:
    200
    Randy Webb
    Feb 19, 2006
  5. Adjust Menu to the center

    , Aug 24, 2008, in forum: Javascript
    Replies:
    2
    Views:
    81
Loading...

Share This Page