[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

asp.net dynamic menu css not align properly

Posted on 2011-04-19
12
Medium Priority
?
983 Views
Last Modified: 2012-08-14
trying to align the css menu but still the 2nd level is aligned a little bit above and supposed to remove the arrow, menu not align menu not align
.level1 
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding-top: 10px;
	padding:10 30px 10 35px;
	height:20px;
	width:130px;
    margin-left:10px;
    
}

.level1 a:hover
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:orange;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding:10 10px 10 15px;
    height:20px;
	width:130px;
   
}

.level2 {
	padding:0px;
	
	margin-top:-10px;
	padding-left:10px;
	margin-bottom:10px;
    
	width:130px;
	height:30px;
    	
}
.level2 a {
	color: Black;
	font-family:Arial;
	font-size:11px;
	background-image:url(../images/blackbuttonbg.jpg); 
	background-repeat:repeat-x;
	height:30px;
	
	padding:0 10px 0 15px;
	width:130px;
	line-height: 30px;
	
}
.level2 a:hover {
	color: Orange;
	font-family:Arial;
	font-size:11px;
	/* font-weight:700;
	*/
	/*background-image:url(../images/nav_menu_container_hover.jpg);*/
	background-image:url(../images/blackbuttonreversebg.jpg); 
	background-repeat:repeat-x;
	width:130px;
	height:28px;
	
	line-height:28px;
	 
}
.nav-menu .container {
	background-image:url(../images/buttonblack.jpg);
	background-repeat:no-repeat;
	height:13px;
	padding-left:15px;
	background-color : aqua;
}

Open in new window

0
Comment
Question by:doramail05
  • 9
  • 2
12 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 35429960
please post a sample menu using this stylesheet... basically a sample like this

<style>
....
</style>

<div ...>
  <ul>
   <li>...
   <li>...
    ....
   </ul>
</div>

so we can test and suggest a solution, or better create this sample and put somewhere and give us the link...
0
 
LVL 1

Author Comment

by:doramail05
ID: 35430010
here they are
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="mpDashBoard.master.cs" Inherits="MasterPages_mpDashBoard" %>

<!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">
    <title></title>
    <link href="../Styles/StyleSheet03.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="HeadContent" runat="server">
           

    </asp:ContentPlaceHolder>
 
    <style type="text/css">
        .style1
        {
            width: 152px;
        }
    </style>
 
    </head>
<body leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#eeeeee">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="s01" runat="server" />
   
    
        <table id="container" cellpadding="0" cellspacing="0" width="100%"> 
           <tr>
            <td class="tdheaderbackground">
                <asp:Image ID="img01" runat="server" ImageUrl="~/images/headerfront01_idash_jpg.jpg" />
            </td>
            <td class="tdheaderbackground">
            
            </td>
           </tr>
           <tr>
            <td colspan="2">
                <div class="nav-menu container">
                <asp:Panel id="Panel01" runat="server" />
                </div>
            </td>
            <td bgcolor="gray">
            
            </td>
           
           </tr>
           <tr>
            <td width="200px" colspan="2">
           
           <table style="width: 503%">
           <tr>
               <td colspan="2">
               <div>
                    dsasddsadsadegawgawegawegawgawgeaewgawgeawgae</tr>
            <tr>
                <div style="position:fixed">
                <td class="style1">
                <asp:Image ID="imgprofilepicture" runat="server" />


                
                    <br />
                    saddsadsa        <br />
                    saddsadsa<br />
                    asdsadsa</td>
                    </div>
                <td valign="top">
                <asp:ContentPlaceHolder id="MainContent" runat="server">
        
        
      
                   
        
        
      
                    <p>
                        aewgeawgewagegeawegegewgewgewagewwawwgegegegewa</p>
        
        
      
                   
        
        
      
                </asp:ContentPlaceHolder>
                </td>
            </tr>
           </table>
            
              
                 
          
           
           
              
                 
            </td>
           </tr>
        </table>
   
    

     
       <div id="footer">
        <asp:Label ID="lblcopyright" runat="server" ForeColor="#8f8f8f" Font-Names="Arial" Font-Size="8" Text="Copyright 2010 i-Dash. All Rights Reserved." ></asp:Label>
   </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:doramail05
ID: 35430015
it is located at
<tr>
            <td colspan="2">
                <div class="nav-menu container">
                <asp:Panel id="Panel01" runat="server" />
                </div>
            </td>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 61

Expert Comment

by:HainKurt
ID: 35430042
please post the rendered html...
0
 
LVL 1

Author Comment

by:doramail05
ID: 35430240
k,
<!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><title>
 
</title><link href="Styles/StyleSheet03.css" rel="stylesheet" type="text/css" />
 
 
 
 
    <style type="text/css">
        .style1
        {
            width: 152px;
        }
    </style>
 
    <style type="text/css"> 
	/* <![CDATA[ */
	#menu01 img.icon { border-style:none;vertical-align:middle; }
	#menu01 img.separator { border-style:none;display:block; }
	#menu01 img.horizontal-separator { border-style:none;vertical-align:middle; }
	#menu01 ul { list-style:none;margin:0;padding:0;width:auto; }
	#menu01 ul.dynamic { z-index:1; }
	#menu01 a { text-decoration:none;white-space:nowrap;display:block; }
	#menu01 a.static { text-decoration:none;border-style:none;padding-left:0.15em;padding-right:0.15em; }
	#menu01 a.popout { background-image:url("/sbit/WebResource.axd?d=dS0dJALDwN7Qp8NfSGYhbO4B7k15AfucpvabHNN2PX80-mEHqsaOhxbyG9oL8aKPBTy1Q2_6ok3_wIm9Sfs9NpPGdz80Tj7YUXza0SP9sF41&t=634387427996958914");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
	#menu01 a.level1 { text-decoration:none;border-style:none; }
	#menu01 a.level2 { text-decoration:none;border-style:none; }
	#menu01 a.level3 { text-decoration:none;border-style:none; }
	#menu01 a.level4 { text-decoration:none;border-style:none; }
	#menu01 a.level5 { text-decoration:none;border-style:none; }
	#menu01 a.level6 { text-decoration:none;border-style:none; }
	/* ]]> */
</style></head>
<body leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#eeeeee">
    <form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWAgIFD2QWAmYPFCsADQ8WBB4LT3JpZW50YXRpb24LKiVTeXN0ZW0uV2ViLlVJLldlYkNvbnRyb2xzLk9yaWVudGF0aW9uAB4LXyFEYXRhQm91bmRnZBYEHghDc3NDbGFzcwUESXRlbR4EXyFTQgICZBYEHwIFCmhvdmVyc3R5bGUfAwICZGRkFgQfAgUKaG92ZXJzdHlsZR8DAgJkEBYDAgMCBAIFFgMWBh8CBQZsZXZlbDEeDkZvbnRfVW5kZXJsaW5laB8DAoJAFgYfAgUGbGV2ZWwyHwRoHwMCgkAWBh8CBQZsZXZlbDMfBGgfAwKCQGRkZBQrAAMFAzA6MWQUKwACFgIeBFRleHQFDHBhcmVudG1lbnUwMmRkZBgjT4NfWtGWRRaxbNz7AejDLMUnK+KpgJl0Feukj1rT" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/sbit/WebResource.axd?d=FwdmawN0mK2phl7E3fIUobqFP4LHduUYzQ8KPWH63690m7u8UYTclwjDtuDuLkHTshSmsleBBfSmNfB3Z2Y-Tql4tlwLBWX_mC07C_f7xrE1&amp;t=634387427996958914" type="text/javascript"></script>
 
 
<script src="/sbit/ScriptResource.axd?d=GVOfztVGMZ538dvIoy8_6xuhXZET-4oBNC31oyyhTiWNPq3TVZxXW8s-fbtjBkj2qPHeBvLBW5A07nHoSKK6dFnuOTe2DNVXcWycBnCVzAkVAa89cPY65Ghrd3v-PfQWLkfPf63ia5W6_TgG6yVh1g2&amp;t=ffffffff88dd8486" type="text/javascript"></script>
<script src="/sbit/ScriptResource.axd?d=MeZpcN6qknxYxrgXWgozlDSMlxcIPYSHL8Hc0888gLDnREV93B0mz35eW4eQuUoy54R8Vgc5VYfpkzh5UyMML2EmLTv7k7yT8AylY--mkVgAK-bK4QMvgl8nSKnaQ8YZhl4AXXdfFyEkumbP2RP9TinVpIkrJk13pBT4NGhAmU9-usVC6usmf-N3Pv1yMX5T0&amp;t=ffffffffa5d4ef3e" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/sbit/ScriptResource.axd?d=Ztmyhk4PjU52Xg34iyhd1e40axSqsLKGC0zAB7ul502rX_y4pWqoTaTWSOMa--OQAuXivWq_8PJbrIofRvaFMgfE_wG0cNlc7heoosvhrQ-Sql0nBqTeKcue9V3HQqeMSdVIdtTXJWnAW78zgBjwFL8a8s6iBqP_aTfzOQtujrSGFF1j4d6va08MR0urTUuQ0&amp;t=ffffffffa5d4ef3e" type="text/javascript"></script>
<div class="aspNetHidden">
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLlltoYAs6r7j8C/7axhAwC/7axhAwC/7b9sgICzquigQqzNVQeEO/zmbfF1WS8+ArYntmcTlptD7PhnToppFPQ0g==" />
</div>
    <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$s01', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>
 
   
    
        <table id="container" cellpadding="0" cellspacing="0" width="100%"> 
           <tr>
            <td class="tdheaderbackground">
                <img id="img01" src="images/headerfront01_idash_jpg.jpg" />
            </td>
            <td class="tdheaderbackground">
            
            </td>
           </tr>
           <tr>
            <td colspan="2">
                <div class="nav-menu container">
                <div id="Panel01">
	<a href="#menu01_SkipLink"><img alt="Skip Navigation Links" src="/sbit/WebResource.axd?d=IB7WmIm9954jeIRhfFkbOUekB3lk-nq7zqh_s6sTwyhPC8bMhKIPWuASIWfF_ZKVO2DLGyawJCJ7FmgNvYWEe5jMk24joRNe2telzZEHMMA1&amp;t=634387427996958914" width="0" height="0" style="border-width:0px;" /></a><div id="menu01">
		<ul class="level1">
			<li><a class="popout level1 Item level1" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01&#39;)">parentmenu01</a><ul class="level2">
				<li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage01&#39;)">childpage01</a></li><li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage01&#39;)">childpage01</a></li><li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage02&#39;)">childpage02</a></li>
			</ul></li><li><a class="level1 Item level1" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu02&#39;)">parentmenu02</a></li>
		</ul>
	</div><a id="menu01_SkipLink"></a>
</div>
                </div>
            </td>
            <td bgcolor="gray">
            
            </td>
           
           </tr>
           <tr>
            <td width="200px" colspan="2">
           
           <table style="width: 503%">
           <tr>
               <td colspan="2">
               <div>
                    dsasddsadsadegawgawegawegawgawgeaewgawgeawgae</tr>
            <tr>
                <div style="position:fixed">
                <td class="style1">
                <img id="imgprofilepicture" src="" />
 
 
                
                    <br />
                    saddsadsa        <br />
                    saddsadsa<br />
                    asdsadsa</td>
                    </div>
                <td valign="top">
                
<div>
    <table>
        <tr>
            <td>saasdasddadegagadgagadgagagavbafbabafbafdbadfbafdbafdbfadbafbafdbfadb
            afbbafbfabffbabfbfbfbffabffbfbabafbfdbafdbafbafdbdfbfbafbfbffbfbfbfafba
            bafbfabafbffbbfabfbffbbfabfafbbfabfafbbfafbfbafbbfbfa
            bfaabfbfabafbfbafbfabfbfabfabfabaf </td>
        </tr>
    
    </table>
 
</div>
 
 
 
 
                </td>
            </tr>
           </table>
            
              
                 
          
           
           
              
                 
            </td>
           </tr>
        </table>
   
    
 
     
       <div id="footer">
        <span id="lblcopyright" style="color:#8F8F8F;font-family:Arial;font-size:8pt;">Copyright 2010 i-Dash. All Rights Reserved.</span>
   </div>
    
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'menu01', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Open in new window

0
 
LVL 6

Expert Comment

by:havj123
ID: 35430688
Try this:
Change margin-top to -20px
.level2 {
      margin-top:-20px;
      padding-left:0 0 0 10px ;
      margin-bottom:10px;
      width:130px;
      height:30px;
}

Can you show me in working mode somewhere on your website?
0
 
LVL 1

Author Comment

by:doramail05
ID: 35430759
i modified abit , and it became like this :
menunotalignw.jpg
0
 
LVL 1

Author Comment

by:doramail05
ID: 35430781
but is it a way to remove the dark gray row in Parentmenu01 , to become something like Parentmenu02
which is clean,
.level2 
{
      margin-top:0px;
      padding-left:0 0 0 00px ;
      margin-bottom:0px;
      width:130px;
      height:30px;

}

Open in new window

0
 
LVL 1

Accepted Solution

by:
doramail05 earned 0 total points
ID: 35430902
found out that by putting
menu.StaticEnableDefaultPopOutImage = false;

it will eliminate the dark gray row at the front,

but now left that the dark gray row lies on the back.
attached the css,
.tdheaderbackground
{
    BACKGROUND-IMAGE: url('../images/headerback3_idash_jpg.jpg');
    background-repeat: repeat-x;
    
}

.container     
{
    
     min-height: 100%;     
     width: 100%;
     padding:0px;
     
    
} 

.menupanelbg
{
   
	background-color : Blue;
   
}


.menupanelbg2
{
   
	background-color : Gray;
   
}


.level1 
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
	padding-top: 10px;
	padding:10 30px 10 35px;
	height:20px;
	width:130px;
    margin-left:10px;
    
}

.level1 a:hover
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:orange;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding:10 10px 10 15px;
    height:20px;
	width:130px;
   
}

.level2 
{
    /*
	padding:0px;
	
	margin-top:-10px;
	padding-left:10px;
	margin-bottom:10px;
    
	width:130px;
	height:30px;
    	*/
    	text-align: center;
    	 margin-top:0px;
      padding-left:0 0 0 00px ;
      margin-bottom:0px;
      width:130px;
      height:30px;

}
.level2 a {
	color: Black;
	font-family:Arial;
	font-size:11px;
	background-image:url(../images/blackbuttonbg.jpg); 
	background-repeat:repeat-x;
	height:30px;
    text-align:center;	
	padding:0 10px 0 15px;
	width:130px;
	line-height: 30px;
	
}
.level2 a:hover {
	color: Orange;
	font-family:Arial;
	font-size:11px;
	/* font-weight:700;
	*/
	/*background-image:url(../images/nav_menu_container_hover.jpg);*/
	background-image:url(../images/blackbuttonreversebg.jpg); 
	background-repeat:repeat-x;
	width:130px;
	height:28px;
    text-align : center;	
	line-height:28px;
	 
}
.level3 {
	color:black;
	font-family:Arial;
	font-size:11px;
	background-color:#EEEDED;
	border-width:1px;
	border:1px solid;
	letter-spacing:normal;
	padding:4px;
	width:150px;
}

.nav 
{
    height:73px;
	vertical-align:top;
	border-bottom:1px solid #CB5D28;
	background-color : gray;
}


.nav-menu {
	/*background-image : url(../images/buttonblack.jpg);*/
	/*background-repeat:repeat-x;*/
	height:30px;
	vertical-align:top;
	border-bottom:1px solid #CB5D28;
	background-color : gray;
    
}
.nav-menu .container {
	background-image:url(../images/buttonblack.jpg);
	background-repeat:no-repeat;
	height:13px;
	padding-left:15px;
	background-color : aqua;
}
.nav-menu .btn {
	background-image:url(../images/buttonblackreverse.jpg);
	background-repeat:no-repeat;
	float:left;
	width:100px;
	height:40px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	color:#B85527;
	/*text-shadow:#FFF;*/
	line-height:60px;
	text-align:center;
	margin-top:10px;
}
.nav-menu .sub a:hover 
{
   /* background-image:url(../images/buttonblack.jpg);*/
	position:absolute;
	display:block;
	width:500px;
	height:30px;
	background-color:#999;
}

.framecontainer
{
    background-image:url(../images/frameprofile_jpgcut01.jpg);
    width: 160px;
    height:275px;
   
    padding-left:30px;
    padding-top: 0px;
    
}

#pagetitle
{
    font-family: Arial Black;
    font-size: 20px;
    padding-left:0px;   
   
}

.cornertopleft
{
    background-image:url(../images/cornertopleft_jpg.jpg);
    width:21px;
    height:21px;
      
    
}

#footer {
	padding-top:15px;
	padding-left:10px;
	clear:both;
}

Open in new window

0
 
LVL 1

Author Comment

by:doramail05
ID: 35430912
the output image is here :
menunotalign03.jpg
0
 
LVL 1

Author Comment

by:doramail05
ID: 35430916
trying to make it all dark gray for the menu tab's background
0
 
LVL 1

Author Closing Comment

by:doramail05
ID: 35496395
solved partially
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month18 days, 18 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question