We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

asp.net dynamic menu css not align properly

doramail05
doramail05 asked
on
Medium Priority
1,063 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

Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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...

Author

Commented:
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

Author

Commented:
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

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
please post the rendered html...

Author

Commented:
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

Commented:
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?

Author

Commented:
i modified abit , and it became like this :
menunotalignw.jpg

Author

Commented:
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

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
the output image is here :
menunotalign03.jpg

Author

Commented:
trying to make it all dark gray for the menu tab's background

Author

Commented:
solved partially
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.