I am Unable to customize a menu bar in the master page, so that it is at the middle like in http://www.uinsureme.com/content/quote-group.php. But when i customized a drop down menu bar and trying to align, i am unable to figure out how to do it such that it appears as the above example, please find code below.
Code for Master page
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script language="javascript" type="text/javascript" src="1.js"></script> <title>Untitled Page</title> <asp:ContentPlaceHolder id="head" runat="server"> <!-- The ContentPlaceHolder tag is used to indicate that this part of the master page --> </asp:ContentPlaceHolder> <!-- will be shared by all the different content pages. --> <link href="Styles.css" rel="Stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript" src="menu.js"></script></head><body> <form id="form1" runat="server"> <!-- These are only limited to Master page and will be common to the entire site --> <div id="topContent"> <!-- Top Portion -->
<img id="logo" src="Images/team1.jpg" alt="Team Image" /> <a href="Default.aspx" style="text-align:left;"><i>TEAM</i></a> <img src="Images/team2.jpg" /> <img src="Images/team3.jpg" /> <img src="Images/team5.jpg" style="height: 44px; width: 54px" /> <img src="Images/team4.jpg" style="height: 43px; width: 56px" /> <b id="team definition">Working as a team</b> <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> <!--calling function mopen() & passing menu item m1, for the HOME choice, on moving the mouse away the drop down will rollup slowly in 500ms.--> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <!-- m1 is a menu item.if mouse moves over the button cancel closing.if mouse scrolls out, start countdown --> <a href="#">HTML Drop Down</a> <!-- these are the sub menu`s for --> <a href="#">DHTML Menu</a> <a href="#">JavaScript DropDown</a> <a href="#">Cascading Menu</a> <a href="#">CSS Horizontal Menu</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Services</a><!--if the mouse scrolls over then open the div with id = 'm2'--> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX Drop Submenu</a> <a href="#">DIV Cascading Menu</a> </div> </li> <li><a href="#">Order</a></li> <!-- rest of menu items --> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li></ul> </div>
<div id="mainContent"> <!-- This will be shared, editable across all the individual content pages. --> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> </div> <div id="leftContent"> <!-- Left side --> <p style="text-align: center;"> <asp:Label ID="datedisplay" runat="server"> </asp:Label> </p> <asp:ContentPlaceHolder ID="pagespecific" runat="server"> </asp:ContentPlaceHolder> <h3>UPDATES</h3> <ul> <li>TODO</li> </ul> <h3>News</h3> <ul> <li>TODO</li> </ul> </div> <div id="footerContent"> <!-- Footer portion --> <img src="Images/PoweredByASPNET.gif" alt= "Powered by Asp.Net" /> </div> </form> </body></html>Code for javascript
var timeout= 500;var closetimer= 0;var ddmenuitem= 0;// open hidden layerfunction mopen(id){// cancel close timermcancelclosetime();// close old layerif(ddmenuitem) ddmenuitem.style.visibility = 'hidden';// get new layer and show itddmenuitem = document.getElementById(id);ddmenuitem.style.visibility = 'visible';}// close showed layerfunction mclose(){if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}// go close timerfunction mclosetime() /**the window property setTimeout is being passed(mclose(),500) guessing, so at the end of 500ms, the window hidden*/{closetimer = window.setTimeout(mclose, timeout);}// cancel close timerfunction mcancelclosetime(){if(closetimer){window.clearTimeout(closetimer);closetimer = null;}}// close layer when click-outdocument.onclick = mclose;Code for stylesheet
body { font-family: Verdana; font-size: medium; margin: 0px; } h1, h2 { margin: 0px; } #topContent { text-align: left; background-color: #600; color: White; font-size: x-large; text-decoration: none; font-weight: bold; padding: 10px; height: 105px; width: 1186px; } #topContent a { text-align: center; text-decoration: none; color: White; } #topContent b { text-align:left; font-size:xx-small; font-weight:lighter; height: 22px; display:block; margin:0px; } #leftContent { width: 228px; padding: 10px; font-size: 90%; text-align: justify; position: absolute; top: 131px; margin-top: 10px; left: 1px; height: 392px; } #leftContent h3 { text-transform: uppercase; letter-spacing: 2px; text-align: center; border-top: dotted 1px #660; border-bottom: dotted 1px #660; } #mainContent { text-align: left; margin-left: 250px; padding: 10px; } #footerContent { display:block; text-align: center; padding: 5px; } #sddm { margin: 0; padding: 0; z-index: 30; width: 1194px; text-align: left; } #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial} #sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background-color:maroon; /*The color of Home,Services boxes*/ color: #FFF; text-align: center; text-decoration: none} #sddm li a:hover { background: #49A3FF} #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2} #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial} #sddm div a:hover { background: #49A3FF; color: #FFF}It would be great if you could give your suggestions also as how to make the menu bar curved.
Regards
