Sat, 2009-12-26 22:13
hi friends,
can anybody please help me how to center block element
- .
i confess, downloaded below files on internet and made few amendments.
csshorizontalmenu.css
.horizontalcssmenu ul{ margin:0; padding: 0; list-style-type: none; } /*Top level list items*/ .horizontalcssmenu ul li{ position: relative; display: inline; float: left; } /*Top level menu link items style*/ .horizontalcssmenu ul li a{ display: block; width: 120px; /*Width of top level menu link items*/ padding: 2px 8px; border: 1px solid #202020; border-left-width: 0; text-decoration: none; background: url(menubg.gif) center center repeat-x; color: black; font: bold 13px Tahoma; } /*Sub level menu*/ .horizontalcssmenu ul li ul{ left: 0; top: 0; border-top: 1px solid #202020; position: absolute; display: block; visibility: hidden; z-index: 100; } /*Sub level menu list items*/ .horizontalcssmenu ul li ul li{ display: inline; float: none; } /* Sub level menu links style */ .horizontalcssmenu ul li ul li a{ width: 160px; /*width of sub menu levels*/ font-weight: normal; padding: 2px 5px; background: #e3f1bd; border-width: 0 1px 1px 1px; } .horizontalcssmenu ul li a:hover{ background: url(menubgover.gif) center center repeat-x; } .horizontalcssmenu ul li ul li a:hover{ background: #cde686; } .horizontalcssmenu .arrowdiv{ position: absolute; right: 0; background: transparent url(menuarrow.gif) no-repeat center left; } * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/ padding-top: 1em; } /* Holly Hack for IE \*/ * html .horizontalcssmenu ul li { float: left; height: 1%; } * html .horizontalcssmenu ul li a { height: 1%; } /* End */
menu.php
<html> <head> <link rel="stylesheet" type="text/css" href="menu/csshorizontalmenu.css" /> <script type="text/javascript" src="menu/csshorizontalmenu.js"></script> </head> <body> <div class="horizontalcssmenu" align="center"> <ul id="cssmenu1"> <li style="border-left: 1px solid #202020;"><a href="#">Orders</a> <ul> <li><a href="orders_search.php">Search</a></li> <li><a href="orders_print.php">Print</a></li> </ul> </li> <li><a href="#" >Manufacturer</a> <ul> <li><a href="add_manu.php">Add</a></li> <li><a href="edit_manu.php">Edit</a></li> </ul> </li> <li><a href="#">Categories</a> <ul> <li><a href="add_cate.php">Add</a></li> <li><a href="edit_cate.php">Edit</a></li> </ul> </li> <li><a href="#">Products</a> <ul> <li><a href="add_prod.php">Add</a></li> <li><a href="edit_prod.php">Edit</a></li> <li><a href="print_prod">Print</a></li> </ul> </li> <li><a href="#">Emails</a> <ul> <li><a href="add_email.php">Add</a></li> <li><a href="edit_email.php">Edit</a></li> </ul> </li style="border-left: 1px solid #202020;"> <li><a href="#">Administration</a> <ul> <li><a href="view_customers.php">View All Customers</a></li> <li><a href="#">------------------</a></li> <li><a href="chg_psw.php">Change Password</a></li> <li><a href="#">------------------</a></li> <li><a href="logout.php">Logout</a></li> </ul> </li> </ul> <br style="clear: left;" /> </div> <br>
Sun, 2009-12-27 00:37
#1
Start by getting a doctype.
Start by getting a doctype.
Tue, 2009-12-29 00:34
#2
Hello imran.rajani,
I don't know that this is a site review. Seems like you might get more help if this were in the beginners forum.
To center an element you need three things:
- a DocType Declaration
- an element with a width
- that elements left and right margins set to auto
See this link to help you with your DocType.