optron
Posts: 114
|
| Posted: 11/20/2006, 11:00 PM |
|
I would like to use CSS base horizontal menu in my App. I was able to add it to my default page as a header. It work, however I'm having problem figuring out how to center this menu on a page. I tried to align it in design screen by applying CENTER icon, however nothing seems to work. The whole application is perfectly centered on the the screen but the menu. I'm not an expert in CSS, so I would appreciate if someone can give me a hint.
Arthur
_________________
==============================
don't forget to check: www.youngliving.us
use: 739947 to register |
 |
 |
Greg Martin
|
| Posted: 11/21/2006, 1:38 PM |
|
Not sure why your center button isn't working. Anyway, you can do this by opening the HTML code by clicking the HTML tag of the header, and place a <center> where you would like the centering to start, make sure you place a </center> after the items you want to centered otherwise everything will be centered on the page.
Hope this helps,
Greg
gmartin@microresource.co.uk
www.microresource.co.uk
|
|
|
|
optron
Posts: 114
|
| Posted: 11/21/2006, 1:49 PM |
|
thanks for reply, but this advice is probably good for <body> tag on the page. The HEADER page which is includable in the DEFAULT (main) page has no body. Here is the code:
<link href="Styles/YLPXP/Style.css" type="text/css" rel="stylesheet">
<style>
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li { /* all list items */
float: left;
position: relative;
width: 9em;
}
#menu li ul {/* second-level lists */
position: absolute;
display: block;
top: 2em;
left: 0;
}
#menu li>ul {/* to override top and left in browsers other than IE */
top: auto;
left: auto;
}
#menu li ul li ul {/* third-level lists */
position: absolute;
display: block;
top: 0;
left: 9em;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */
#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
/* Make-up syles */
#menu ul, li {
margin: 0 0 0 0;
}
/* Styles for Menu Items */
#menu ul a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 3px solid #ccc;
}
/* Hover Styles */
#menu ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Sub Menu Styles */
#menu li ul a {
text-decoration: none;
color: #77F;
background: #fff; /* IE6 Bug */
border: 1px solid #ccc;
padding: 5px;
}
/* Sub Menu Hover Styles */
#menu li ul a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Icon Styles */
#menu li a.submenu {background:#fff url("v_arrow.gif") no-repeat right; }
#menu li a.submenu:hover {background:#f9f9f9 url("v_arrow.gif") no-repeat right;}
#menu li ul a.submenu {background:#fff url("r_arrow.gif") no-repeat right;}
#menu li ul a.submenu:hover {background:#f9f9f9 url("r_arrow.gif") no-repeat right;}
</style>
<script>
startList = function() {
//code only for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs.parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility = 'hidden';
}
}
}
}
window.onload=startList;
</script>
<div align="center">
<!-- BEGIN Directory menu -->
<div id="menu" align="cetner">
<ul id="menuList">
<!-- BEGIN Category -->
<div align="center">
<li>
<div align="center">
<a href="{CategoryLink_Src}" class="submenu" name="submenu"></a>
<div align="left">
{CategoryLink}
</div>
</div>
<div align="left">
</div>
<div align="center">
<ul>
<!-- BEGIN Subcategory -->
<div align="center">
<li>
<div align="center">
<a href="{SubcategoryLink_Src}"></a>
<div align="left">
{SubcategoryLink}
</div>
</div>
<div align="xenter">
<!-- END Subcategory -->
<!-- BEGIN SubcategorySeparator --><!-- END SubcategorySeparator -->
<!-- BEGIN SubcategoriesTail --><!-- END SubcategoriesTail -->
</div>
</li>
</div>
</ul>
</div>
<!-- END Category -->
<!-- BEGIN CategorySeparator --><!-- END CategorySeparator -->
<!-- BEGIN ColumnSeparator --><!-- END ColumnSeparator -->
<!-- BEGIN NoCategories --><!-- END NoCategories --></li>
</div>
</ul>
</div>
<div align="center">
</div>
<!-- END Directory menu -->
</div>
<div align="center">
</div>
<div align="center">
</div>
<p align="center"><br>
</p>
As you seen there are CENTER attributes almost everywhere, but the header is still not centered
Arthur
_________________
==============================
don't forget to check: www.youngliving.us
use: 739947 to register |
|
|
|
|
