Main Content Area
This page shows you how to modify the default styles for a Horizontal Menu Bar, so you can center the menu bar within the page, and/or center the menu items within a menu bar.
Below, you'll notice that each CSS code sample starts off by including the default menu bar style sheet, and then declares a <style> block immediately after it, to override some of the default style properties set in the style sheet. The code is presented this way to show the minimal set of changes that are necessary to accomplish the task. If you want these changes to affect more than one page, then you may want to integrate these changes directly into the style sheet.
This is what the standard Horizontal Menu Bar looks like:
The menu bar and its menu items are left aligned. The sub menus of the menu bar also contain menu items that are left aligned.
To center the menu bar itself, you must make sure that the top-level <ul> element of the menu bar has a width specified. You can then use a margin:auto property on it to center it within its parent container:
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
* so that the browser does the centering.
*/
ul.MenuBarHorizontal {
width: 32.2em;
margin: auto;
}
-->
</style>
In our example below we have 4 menu items in our menu bar. Because the default style sheet gives each menu item a width of 8em, we specified a width of 32.2em on the menu bar, in the code sample above, which is just enough to hold all 4 menu items with sub menu indicators. This gives us a centered menu bar:
To center the menu items inside a menu bar, but not the menu items in the sub menus:
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links.
*/
ul.MenuBarHorizontal a {
text-align: center;
}
/* Set the the alignment back to left for any
* menu item links that are in a sub menu.
*/
ul.MenuBarHorizontal ul a {
text-align: left;
}
-->
</style>
Here's a live sample:
To center all menu items in the menu bar *and* in sub menus, simply define a rule that centers all links:
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Center the text within all menu item links. This
* causes the text in menu items for both the menu bar and
* sub menus to center.
*/
ul.MenuBarHorizontal a {
text-align: center;
}
-->
</style>
Here's a live sample:
This example uses the styles mentioned above to center the menu bar within the main content area of a 3 pane layout. An extra div was used to wrap the menu bar to extend the background color of the menu bar to the edges of the main content area:
<link href="../../widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
/* Give the menu bar a width and set the margins to "auto"
* so that the browser does the centering.
*/
ul.MenuBarHorizontal {
width: 32.2em;
margin: auto;
}
/* Center the text within all menu item links.
*/
ul.MenuBarHorizontal a {
text-align: center;
}
/* Set the the alignment back to left for any
* menu item links that are in a sub menu.
*/
ul.MenuBarHorizontal ul a {
text-align: left;
}
/* Style rules for 3 pane layout:
*/
.sidebar {
float: left;
width: 25%;
background-color: #FFCC66;
height: 40em;
}
.main {
float: left;
width: 50%;
background-color: #3399FF;
height: 40em;
}
.menubarWrapper {
background-color: #EEE;
float: left;
width: 100%;
}
-->
</style>
Here's a live sample:
Main Content Area