Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive /

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

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

Center Navigation


Go to End
Reply


15 Posts   3534 Views

Avatar
pixelwave

Community Member, 18 Posts

11 September 2008 at 10:16am

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?

Avatar
grilldan

Community Member, 135 Posts

11 September 2008 at 10:31am

Edited: 11/09/2008 10:32am

This should do the trick.

#navigation {
text-align: center;
}

If not, you could try:

#navigation ul {
margin: 0 auto;
}

Avatar
pixelwave

Community Member, 18 Posts

11 September 2008 at 10:36am

Edited: 11/09/2008 10:38am

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 {

   }

Avatar
grilldan

Community Member, 135 Posts

11 September 2008 at 10:40am

Edited: 11/09/2008 10:43am

(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;
}

Avatar
pixelwave

Community Member, 18 Posts

11 September 2008 at 10:45am

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

Avatar
grilldan

Community Member, 135 Posts

11 September 2008 at 10:48am

Edited: 11/09/2008 10:50am

What happens when you do:

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

or

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

Avatar
pixelwave

Community Member, 18 Posts

11 September 2008 at 10:50am

Edited: 11/09/2008 10:52am

..nothing - still the same.

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

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

Avatar
grilldan

Community Member, 135 Posts

11 September 2008 at 10:55am

Edited: 11/09/2008 10:58am

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; }

Go to Top