[cpuguru07]

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 asp.net and css, 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 this 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>
				  <li><a href="layout2.html">Layout-2 (2-col)</a></li>
				  <li><a href="layout3.html">Layout-3 (2-col)</a></li>
				  <li><a href="layout4.html">Layout-4 (3-col)</a></li>
				  <li><a href="layout5.html">Layout-5 (3-col)</a></li>									
				</ul>
			  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		  </ul>		  

		  <!-- Navigation item -->
		  <ul>
			<li><a href="#">Header Layouts<!--[if IE 7]><!--></a><!--<![endif]-->
			  <!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul>
				  <li><a href="header1.html">Header-1 (T+M+B)</a></li>
				  <li><a href="header2.html">Header-2 (T+M)</a></li>
				  <li><a href="header3.html">Header-3 (T+B)</a></li>
				  <li><a href="header4.html">Header-4 (M+B)</a></li>
				  <li><a href="header5.html">Header-5 (T)</a></li>
				  <li><a href="header6.html">Header-6 (M)</a></li>
				  <li><a href="header7.html">Header-7 (B)</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 within the <asp:Menu...></asp:Menu> using either Level Styles or Static & Dynamic Styles, but i'm not exactly sure what the best way to do this would be.

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!

[doWhileSomething]

The drag and drop menu control in VS (2005 and 2008) by default render the menu using primarily tables and divs.

One way would be to create a wrapper around your menu control, then style the elements appropriately.

e.g.
#menucontainer {}
#menucontainer td {}
menucontainer td div {} etc..

[cpuguru07]

doWhileSomething, on 22 Feb, 2009 - 10:36 AM, said:

The drag and drop menu control in VS (2005 and 2008) by default render the menu using primarily tables and divs.

One way would be to create a wrapper around your menu control, then style the elements appropriately.

e.g.
#menucontainer {}
#menucontainer td {}
menucontainer td div {} etc..

Okay, I understand I could do that, but that does not help me understand how I need to apply the CSS code I have to the ASP.NET menu control to get it to look like the original HTML menus I started with. Where would I insert which CSS classes into the code? Or how else should I go about formatting the ASP.NET menu to get it to look this way?

[doWhileSomething]

cpuguru07, on 23 Feb, 2009 - 07:06 PM, said:

doWhileSomething, on 22 Feb, 2009 - 10:36 AM, said:

The drag and drop menu control in VS (2005 and 2008) by default render the menu using primarily tables and divs.

One way would be to create a wrapper around your menu control, then style the elements appropriately.

e.g.
#menucontainer {}
#menucontainer td {}
menucontainer td div {} etc..

Okay, I understand I could do that, but that does not help me understand how I need to apply the CSS code I have to the ASP.NET menu control to get it to look like the original HTML menus I started with. Where would I insert which CSS classes into the code? Or how else should I go about formatting the ASP.NET menu to get it to look this way?

What I do, for any control I need to add my own styles to, is look at the rendered HTML. Make sure the control has every conceivable option turned on so that you don't miss any elements.

I grab that html and put it on a blank html form. I look at all the main containers and structures (e.g. ul, divs,tables etc.)
Then, the first thing I do is build a wrapper for the control. I start by naming it xxxcontainer
e.g.
#menucontainer {}

Keep in mind, if you will need multiples of this control, use "class" declarations not "#selectors" as these only work when assigning that to an element ID and ID's should always be unique, hence you should not duplicate them.

Now, you have your container, you need to create the styles for all the child elements/classes inside the container.

so if you had one table that made up your menu, the table had 5 td's and each td had a div, your css might look like this:

#menucontainer {
width:800px;
float:left;
}
#menucontainer table {width:100%; border:none;}
#menucontainer tr { background-color:#cccccc; }
#menucontainer td { color:#000; }
#menucontainer td div { background-color:#cc0000; position:absolute; width:400px;}

That css tells the browser to apply these attributes/formats to tr's, td's inside of menu container and divs that are inside td's inside menucontainer to inherit these properties.

If it's UL's and LI's with a mixture of the above, then it's the same procedure, you just need to declare the styles and hiearchy for the elements and selectors.

[tyro123]

doWhileSomething, on 24 Feb, 2009 - 06:29 AM, said:

cpuguru07, on 23 Feb, 2009 - 07:06 PM, said:

doWhileSomething, on 22 Feb, 2009 - 10:36 AM, said:

The drag and drop menu control in VS (2005 and 2008) by default render the menu using primarily tables and divs.

One way would be to create a wrapper around your menu control, then style the elements appropriately.

e.g.
#menucontainer {}
#menucontainer td {}
menucontainer td div {} etc..

Okay, I understand I could do that, but that does not help me understand how I need to apply the CSS code I have to the ASP.NET menu control to get it to look like the original HTML menus I started with. Where would I insert which CSS classes into the code? Or how else should I go about formatting the ASP.NET menu to get it to look this way?

What I do, for any control I need to add my own styles to, is look at the rendered HTML. Make sure the control has every conceivable option turned on so that you don't miss any elements.

I grab that html and put it on a blank html form. I look at all the main containers and structures (e.g. ul, divs,tables etc.)
Then, the first thing I do is build a wrapper for the control. I start by naming it xxxcontainer
e.g.
#menucontainer {}

Keep in mind, if you will need multiples of this control, use "class" declarations not "#selectors" as these only work when assigning that to an element ID and ID's should always be unique, hence you should not duplicate them.

Now, you have your container, you need to create the styles for all the child elements/classes inside the container.

so if you had one table that made up your menu, the table had 5 td's and each td had a div, your css might look like this:

#menucontainer {
width:800px;
float:left;
}
#menucontainer table {width:100%; border:none;}
#menucontainer tr { background-color:#cccccc; }
#menucontainer td { color:#000; }
#menucontainer td div { background-color:#cc0000; position:absolute; width:400px;}

That css tells the browser to apply these attributes/formats to tr's, td's inside of menu container and divs that are inside td's inside menucontainer to inherit these properties.

If it's UL's and LI's with a mixture of the above, then it's the same procedure, you just need to declare the styles and hiearchy for the elements and selectors.

That is an awesome tip. For a novice developer, understanding how to tackle .NET's pre-defined HTML can be cumbersome. Thanks again!