[jQuery] Re: superfish navbar - how do I center the whole bar?

[xantof]

Go see there :

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/



On Oct 20, 4:35 am, Shawn  wrote:
> I'm using anavbarwith superfish. I simply put my menu list inside a
> wrapper so the markup looks like this:
>
> 
> ...
> ...
> ...
> 
> 
>
> now I want to make thenavbar-wrapper 100% of width and thenavbarto
> be centered in it, I thought it should be simple just do the following
> css trick
>
> div.navbar-wrapper{ width:100%; text-align:center; }
>
> However this didn't work, the supersish menu just didn't get
> centered.
>
> How can I fix this? Thanks.

[jQuery] Re: superfish navbar - how do I center the whole bar?

[Shawn]

If you have markup as indicated below, then you have invalid markup, 
which will cause problems.


A UL element can't contain a div - it has to contain li's, which in turn 
can contain a div.  I would expect that structure to fail.


Removing the div immediately after the UL, will clean things up.

Now, for centering, you may have to wrap the whole thing in a separate 
div and then use the CSS tricks to center THAT div - auto margins, 
text-align, etc.


er. just read your request a little more.  Try this:


  

  ...
  ...
  ...

  


Apply the centering tricks to div.centerMe.

Disclaimer - I just pulled an all nighter, so I need to freely suggest 
that my advice at this point may be questionable... :)


Shawn

rupak mandal wrote:

Put the ul inside a div. I think it will work



On Tue, Oct 20, 2009 at 9:05 AM, Shawn > wrote:



I'm using a navbar with superfish. I simply put my menu list inside a
wrapper so the markup looks like this:





...
...
...






now I want to make the navbar-wrapper 100% of width and the navbar to
be centered in it, I thought it should be simple just do the following
css trick

div.navbar-wrapper{ width:100%; text-align:center; }

However this didn't work, the supersish menu just didn't get
centered.

How can I fix this? Thanks.

[jQuery] Re: superfish navbar - how do I center the whole bar?

[Florent V.]

Hello,

This is a CSS issue, not really related to Superfish or jQuery.

The solution depends on your code, and also on the browsers you want
to support (IE 6 and 7 will limit what you can do).

If your UL has a fixed width, you can center it horizontally in its
container using automatic margins.
 is your friend.
If the container has a fixed width too, using some padding or a margin
might do the trick too.

If the width of your UL element can't be predicted, it gets harder.
Using text-align:center won't work because your top-level LI are not
text, they are blocks, most probably floated blocks (i don't know what
your code looks like, but this is the most common solution). You can't
center blocks using text-align:center. You CAN center inline-block
elements, so it may be tempting to use display:inline-block on your
top-level LI (and no float), but IE 6-7 won't support that. Likewise,
using display:table-cell on your top-level LI elements is not an
option if you want to support IE 6-7.

So, if your series of top-level LI has an unknown, variable width,
you're stuck with:
1. A JavaScript solution that requires getting the container's width,
the UL's width, and add something like half the difference as a margin-
left or padding-left to the UL;
2. A CSS solution that relies on a display:table element wrapping your
UL (or display:table on the UL element itself). Elements that have a
table-like display CAN be centered using automatic margins, even if
they don't have an explicit width. And the one IE 6-7 compatible way
to have a table-like display is to use a TABLE element. So you would
need to wrap your UL in ..., then use
automatic margins on that table element. Not nice, but it works.

[jQuery] Re: superfish navbar - how do I center the whole bar?

[rupak mandal]

Put the ul inside a div. I think it will work



On Tue, Oct 20, 2009 at 9:05 AM, Shawn  wrote:

>
> I'm using a navbar with superfish. I simply put my menu list inside a
> wrapper so the markup looks like this:
>
> 
>


> ...
> ...
> ...
> 
>


> 
>
> now I want to make the navbar-wrapper 100% of width and the navbar to
> be centered in it, I thought it should be simple just do the following
> css trick
>
> div.navbar-wrapper{ width:100%; text-align:center; }
>
> However this didn't work, the supersish menu just didn't get
> centered.
>
> How can I fix this? Thanks.
>