Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Center Navigation

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1 2
Go to End
Author Topic: 3363 Views
  • pixelwave
    Avatar
    Community Member
    18 Posts

    Center Navigation Link to this post

    Hi,

    i am trying to edit the standart theme from silverstripe and i am pretty far right now - i only need to center the main navigation

    http://www.p-wave.eu/Silverstripe/

    ... for now its left aligned .. i am a css beginner - anybody an idea how to make this work?

  • grilldan
    Avatar
    Community Member
    135 Posts

    Re: Center Navigation Link to this post

    This should do the trick.

    #navigation {
    text-align: center;
    }

    If not, you could try:

    #navigation ul {
    margin: 0 auto;
    }

  • pixelwave
    Avatar
    Community Member
    18 Posts

    Re: Center Navigation Link to this post

    both tricks not working ...

    currently it looks

    #Navigation {
       width: 800px;
       margin: 0 auto;
       height: 29px;
       overflow: hidden;
       background: #fff url(../images/nav_bg.gif) repeat-x;
    }
    #Navigation ul {

       }

  • grilldan
    Avatar
    Community Member
    135 Posts

    Re: Center Navigation Link to this post

    (on your Layout.css, goto line 130. you have and extra "/" for the comment.)

    Try adding a width to #navigation ul, then try the codes again.

    *edit*

    #Navigation ul {
    text-align: center;
    }

  • pixelwave
    Avatar
    Community Member
    18 Posts

    Re: Center Navigation Link to this post

    ...deleted the extra "/"....

    #Navigation {
       width: 800px;
       margin: 0 auto;
       height: 29px;
       text-align:center;
    /**   border: 1px solid;**/
       overflow: hidden;
       background: #fff url(../images/nav_bg.gif) repeat-x;
    }
    #Navigation ul {
    text-align: center;
    }
    #Navigation li {
    display: inline;
    }

    ...still not working ...

  • grilldan
    Avatar
    Community Member
    135 Posts

    Re: Center Navigation Link to this post

    What happens when you do:

    #Navigation ul {
    text-align: center;
    width: 500px;
    }

    or

    #Navigation ul {
    margin: 0 auto;
    width: 500px;
    }

  • pixelwave
    Avatar
    Community Member
    18 Posts

    Re: Center Navigation Link to this post

    ..nothing - still the same.

    #Navigation ul {
    margin: 0 auto;
    width: 500px;
    }

    ...it is smaller ... but still left centered...

  • grilldan
    Avatar
    Community Member
    135 Posts

    Re: Center Navigation Link to this post

    Maybe:

    #Navigation ul {
    width: 100%;
    }
    #Navigation ul li {
    margin: 0 auto;
    }

    *edit*
    I'm not sure whats going on with your site. There's several other websites out there that will work with something as simple as:

    #nav ul
    {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }
    #nav ul li { display: inline; }

    3363 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.