17488 Posts in 4473 Topics by 1978 members
| Go to End | Next > | |
| Author | Topic: | 3086 Views |
-
Center Navigation
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?
-
Re: Center Navigation
11 September 2008 at 10:31am Last edited: 11 September 2008 10:32am
This should do the trick.
#navigation {
text-align: center;
}If not, you could try:
#navigation ul {
margin: 0 auto;
} -
Re: Center Navigation
11 September 2008 at 10:36am Last edited: 11 September 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 {}
-
Re: Center Navigation
11 September 2008 at 10:40am Last edited: 11 September 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;
} -
Re: Center Navigation
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 ...
-
Re: Center Navigation
11 September 2008 at 10:48am Last edited: 11 September 2008 10:50am
What happens when you do:
#Navigation ul {
text-align: center;
width: 500px;
}or
#Navigation ul {
margin: 0 auto;
width: 500px;
} -
Re: Center Navigation
11 September 2008 at 10:50am Last edited: 11 September 2008 10:52am
..nothing - still the same.
#Navigation ul {
margin: 0 auto;
width: 500px;
}...it is smaller ... but still left centered...
-
Re: Center Navigation
11 September 2008 at 10:55am Last edited: 11 September 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; }
| 3086 Views | ||
| Go to Top | Next > |
