applying existing CSS code to asp.net menu structure

i'm starting with a CSS template and need help styling an asp.net

Page 1 of 1

3 Replies - 10301 Views - Last Post: 09 March 2009 - 06:27 AM

#1 cpuguru07   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 21-February 09

applying existing CSS code to asp.net menu structure

Posted 23 February 2009 - 08:17 PM

hello,

i'm developing a web site in asp.net 3.5 w/ c# 2008 for a local non-profit. i'm fairly new to CSS & ASP.NET, and since i don't have much of an eye for graphic design, i'm using the Multiflex-3 template from 1234.info as a base/starting point.

the problem is that the CSS in the template uses a <ul> to define items in its menu structure, but i want to use asp.net's built-in menu control to pull pages from an .xml file.

here is the existing menu structure:

		<!-- Navigation Level 2 (Drop-down menus) -->
		<div class="nav2">
		  <!-- Navigation item -->
		  <ul>
			<li><a href="index.html">Overview</a></li>
		  </ul>
		 
		  <!-- Navigation item -->
		  <ul>
			<li><a href="#">Page Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
			  <!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
				  <li><a href="layout1.html">Layout-1 (1-col)</a></li>								
				</ul>
			  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		  </ul>		  
		</div>



here is the CSS behind it:

/*Drop-down menu*/
.nav2 {float:left; width:900px; border:none; background:rgb(220,220,220) url(../img/bg_head_bottom_nav.jpg) no-repeat; color:rgb(75,75,75); font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li ul {display:none; border:none;}

/*Non-IE6 hovering*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li a {display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6 hovering*/
.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

@media print {.nav2 {float:left; width:900px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}} /*Color navigation bar normal mode*/



i believe the way to do this is to link to the CSS classes within the <asp:Menu...></asp:Menu> using either Level Styles or Static & Dynamic Styles, but i'm not exactly sure how to manipulate & place the CSS within the menu structure

so far, i have this:
(note, i have inserted dashes in place of spaces in the css file so i can point these styles directly to them)

<LevelMenuItemStyles>
	<asp:MenuItemStyle CssClass="nav2-ul-li" />
	<asp:MenuItemStyle CssClass="nav2-ul-li" />
</LevelMenuItemStyles>
<StaticHoverStyle CssClass="nav2-ul-li-hover-a" />
<DynamicHoverStyle CssClass="nav2-ul-li-hover-ul-li-a-hover" />
<LevelSubMenuStyles>
	<asp:SubMenuStyle CssClass="nav2-ul-li-a" />
</LevelSubMenuStyles>
<LevelSelectedStyles>
	<asp:MenuItemStyle CssClass="nav2-ul-li-hover-a" />
</LevelSelectedStyles>



if you could offer assistance in helping me get my menu to look like the one in the Multiflex-3 template, it would be greatly appreciated!

thank you for taking the time to look at my problem!

Is This A Good Question/Topic? 0
  • +

Replies To: applying existing CSS code to asp.net menu structure

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: applying existing CSS code to asp.net menu structure

Posted 24 February 2009 - 02:50 AM

I've not done a lot with .net, but if you post the html that is generated I'll be able to help you with the stylesheet.
Was This Post Helpful? 0
  • +
  • -

#3 cpuguru07   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 21-February 09

Re: applying existing CSS code to asp.net menu structure

Posted 24 February 2009 - 09:20 AM

View Postthehat, on 24 Feb, 2009 - 01:50 AM, said:

I've not done a lot with .net, but if you post the html that is generated I'll be able to help you with the stylesheet.


here is the code generated by the ASP.NET menu control:

<div>
                    <a href="#ctl00_ctl00_Menu1_SkipLink"><img alt="Skip Navigation Links" src="/SFM/WebResource.axd?d=ed-mpQCkDLwxX6UZfbwboQ2&t=633439550474218750" width="0" height="0" style="border-width:0px;" /></a><table id="ctl00_ctl00_Menu1" class="nav2a ctl00_ctl00_Menu1_5 nav2-ul-li-hover-ul-li-a ctl00_ctl00_Menu1_13 ctl00_ctl00_Menu1_2" cellpadding="0" cellspacing="0" border="0">
	<tr>
		<td onmouseover="Menu_HoverRoot(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Home" id="ctl00_ctl00_Menu1n0"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_10" cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_9" href="/SFM/" style="border-style:none;font-size:1em;">Home</a></td>
			</tr>
		</table></td><td style="width:3px;"></td><td><table border="0" cellpadding="0" cellspacing="0" width="100%" class="nav2a ctl00_ctl00_Menu1_5">
			<tr>
				<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Testimonies" id="ctl00_ctl00_Menu1n1"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/testimonies/" style="border-style:none;font-size:1em;margin-left:16px;">Testimonies</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="How to use our products" id="ctl00_ctl00_Menu1n2"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/howToUse/" style="border-style:none;font-size:1em;margin-left:16px;">How To Use</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Personalization" id="ctl00_ctl00_Menu1n3"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/personalization/" style="border-style:none;font-size:1em;margin-left:16px;">Personalization</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Videos" id="ctl00_ctl00_Menu1n4"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/videos/" style="border-style:none;font-size:1em;margin-left:16px;">Videos</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Donations" id="ctl00_ctl00_Menu1n5"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/donations/" style="border-style:none;font-size:1em;margin-left:16px;">Donations</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="About Us" id="ctl00_ctl00_Menu1n6"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/about/" style="border-style:none;font-size:1em;margin-left:16px;">About Us</a></td>
					</tr>
				</table></td><td style="width:3px;"></td><td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" title="Contact Us" id="ctl00_ctl00_Menu1n7"><table class="nav2-ul-li ctl00_ctl00_Menu1_4 nav2-ul-li ctl00_ctl00_Menu1_12" cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr>
						<td style="white-space:nowrap;"><a class="ctl00_ctl00_Menu1_1 nav2-ul-li ctl00_ctl00_Menu1_3 nav2-ul-li ctl00_ctl00_Menu1_11" href="/SFM/contact/" style="border-style:none;font-size:1em;margin-left:16px;">Contact Us</a></td>
					</tr>
				</table></td>
			</tr>
		</table></td>
	</tr>
</table><a id="ctl00_ctl00_Menu1_SkipLink"></a>
                    
                </div>

Was This Post Helpful? 0
  • +
  • -

#4 cpuguru07   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 33
  • Joined: 21-February 09

Re: applying existing CSS code to asp.net menu structure

Posted 09 March 2009 - 06:27 AM

can anyone help me with this code?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1