• Locked
2 replies [Last post]
Sat, 2009-12-26 22:13
imran.rajani
imran.rajani's picture
Offline
newbie
Last seen: 11 years 42 weeks ago
Timezone: GMT-8
Joined: 2009-12-26
Posts: 1
Points: 2

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>

Top
Tags:
Sun, 2009-12-27 00:37
#1
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 34 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Start by getting a doctype.

Start by getting a doctype.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Top
Tue, 2009-12-29 00:34
#2
Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 6 years 43 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

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:

  1. a DocType Declaration

  2. an element with a width

  3. that elements left and right margins set to auto

See this link to help you with your DocType.

Top
  • Locked