centering css nav bar

[nolanbuc]

There's probably a simple answer for this, but here goes: I am using the Vista Aero Buttons Menu (http://www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/) and it's looking great with one exception. How do I get it to center the whole bar as opposed to aligning to the left?

Here's my test site to show you what I mean:

http://www22.myfantasyleague.com/2008/home/71589

Thanks in advance for your help! :)

[nolanbuc]

This one's got everyone stumped, eh? ;)

[allahverdi]

Hmm.
to place it in center you just need to give to that menu:


margin-right:auto;
margin-left:auto;


But i think you can't do it cause of your .rightsection . If you will delete it and place what i give to that menu. it will be in center.

[JasonDFR]

Start at the menu div and replace your code with what is below. Note the style of the menu div and the explicit width the .aerobuttonmenu class was given. You'll also need to find another place for .rightsection . (You could keep it in the same place but that would require some more explanation and i don't have the time right now.)

Constructive criticism: Your site is built on some really really really messy source code.


<div class="aerobuttonmenu black" style="margin: 0 auto;">



<a href="http://football22.myfantasyleague.com/2008/standings?L=41628" class="aero"><span>Standings</span></a>
<a href="http://www22.myfantasyleague.com/2008/live_scoring_summary?L=41628&W=1" class="aero"><span>Live Scoring</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=123" class="aero"><span>Calendar</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=73" class="aero"><span>League News</span></a>
<a href="http://z14.invisionfree.com/World_FFL/index.php?c=1" target="_blank" class="aero"><span>Forums</span></a>
<a href="http://wstf.cbox.ws" target="_blank" class="aero"><span>Chat</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=112" class="aero"><span>History</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=121" class="aero"><span>Pool Picks</span></a>

<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=120" class="aero"><span>Survivor</span></a>
<a href="http://www22.myfantasyleague.com/2008/home/41628" class="aero"><span>HOME</span></a>
</div>

<style type="text/css">

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width:890px;
background: transparent; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}

Good Luck,

Jason

[JasonDFR]

Sorry about the little thumbs down icon. I must have accidentally selected it.

Cheers,

J

[nolanbuc]

Start at the menu div and replace your code with what is below. Note the style of the menu div and the explicit width the .aerobuttonmenu class was given. You'll also need to find another place for .rightsection . (You could keep it in the same place but that would require some more explanation and i don't have the time right now.)

Constructive criticism: Your site is built on some really really really messy source code.


<div class="aerobuttonmenu black" style="margin: 0 auto;">



<a href="http://football22.myfantasyleague.com/2008/standings?L=41628" class="aero"><span>Standings</span></a>
<a href="http://www22.myfantasyleague.com/2008/live_scoring_summary?L=41628&W=1" class="aero"><span>Live Scoring</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=123" class="aero"><span>Calendar</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=73" class="aero"><span>League News</span></a>
<a href="http://z14.invisionfree.com/World_FFL/index.php?c=1" target="_blank" class="aero"><span>Forums</span></a>
<a href="http://wstf.cbox.ws" target="_blank" class="aero"><span>Chat</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=112" class="aero"><span>History</span></a>
<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=121" class="aero"><span>Pool Picks</span></a>

<a href="http://football22.myfantasyleague.com/2008/options?L=41628&O=120" class="aero"><span>Survivor</span></a>
<a href="http://www22.myfantasyleague.com/2008/home/41628" class="aero"><span>HOME</span></a>
</div>

<style type="text/css">

.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width:890px;
background: transparent; /*menu strip background*/
border: 1px solid gray;
padding: 4px 0;
border-width: 1px 0;
}

Good Luck,

Jason

Thank you for your help!

About the state of my code, I'm fairly new to CSS and have cobbled the site together with whatever worked. Any suggestions on how to clean it up abit? :D