ASP.Net menu object, can it run the full vertical length?

I have an ASP.Net menu object on  my page, and it is vertical, on the left side. But the list of items in the menu does not strech it to the bottom of the page, so the content wraps around the menu, some of it ending up under the menu. I would like the menu area to run the full left side of the screen, so that content is only to the right of the menu, not to the right and under it.

I know this does not answer your question, but the general consensus is not to use the ASP.NET server controls, as they generate superflous HTML that slows down web page loading. If there is an HTML equivalent, then use that instead, as you get extranous HTML and better page load performance.

 

I am sure in your specific case it will be easier to use CSS to get the layout you require using an <ul> </ul>

 

there is some pretty cool DHTML stuff here

vesuvius said:

I know this does not answer your question, but the general consensus is not to use the ASP.NET server controls, as they generate superflous HTML that slows down web page loading. If there is an HTML equivalent, then use that instead, as you get extranous HTML and better page load performance.

 

I am sure in your specific case it will be easier to use CSS to get the layout you require using an <ul> </ul>

 

there is some pretty cool DHTML stuff here

So, rewrite the whole menu system for the site...

qwert231 said:

vesuvius said:

*snip*

So, rewrite the whole menu system for the site...

Writing your own UserControl to represent the site's menu (assuming you're using ASP.NET's built-in Sitemap API) really is trivial.

 

...but you'd need to know HTML and CSS well enough, and if you knew those you'd be able to bend the current menu to your will anyway (for example, with some simple stylesheet rules, failing that a simple ControlAdapter subclass for the menu).

 

I suspect you're using tables for layout, in which case you'll find advanced layout tasks much harder.

 

I'm with vesuvius on the System.Web.UI.WebControls classes: use them sparingly (preferably never at all), especially on public-facing websites. The System.Web.UI.HtmlControls classes are your friends and give you so much more control and are just as easy to use.

W3bbo said:

qwert231 said:

*snip*

Writing your own UserControl to represent the site's menu (assuming you're using ASP.NET's built-in Sitemap API) really is trivial.

 

...but you'd need to know HTML and CSS well enough, and if you knew those you'd be able to bend the current menu to your will anyway (for example, with some simple stylesheet rules, failing that a simple ControlAdapter subclass for the menu).

 

I suspect you're using tables for layout, in which case you'll find advanced layout tasks much harder.

 

I'm with vesuvius on the System.Web.UI.WebControls classes: use them sparingly (preferably never at all), especially on public-facing websites. The System.Web.UI.HtmlControls classes are your friends and give you so much more control and are just as easy to use.

As a side note, .NET 4.0 seems to do much better with this respect (e.g. menu rendered as ul/li and CSS seems way more pervasive). I didn't have the time to test it on real world projects yet, but it looks promising.

W3bbo said:

qwert231 said:

*snip*

Writing your own UserControl to represent the site's menu (assuming you're using ASP.NET's built-in Sitemap API) really is trivial.

 

...but you'd need to know HTML and CSS well enough, and if you knew those you'd be able to bend the current menu to your will anyway (for example, with some simple stylesheet rules, failing that a simple ControlAdapter subclass for the menu).

 

I suspect you're using tables for layout, in which case you'll find advanced layout tasks much harder.

 

I'm with vesuvius on the System.Web.UI.WebControls classes: use them sparingly (preferably never at all), especially on public-facing websites. The System.Web.UI.HtmlControls classes are your friends and give you so much more control and are just as easy to use.

Here is my master page:

 

 

<div id="UpdateProgDiv" class="progress" style="display:none;"><asp:Image id="AjaxLoader" runat="server" ImageUrl="~/Images/ajax-loader-bar.gif" AlternateText="Contacting Server"/></div> <h1><img src="~/Images/pfbclogo16.gif" alt="Logo" runat="server" id="imgSmallLogo"/>Pennsylvania Fish &amp; Boat Commission (Version 4.0)</h1>

 

 

 

 

 

 

 

 

 

 

 

 

 

<div runat="server" id="NewLayout"> <div id="menuContainer2"> <asp:Menu ID="SiteMenu" runat="server" Orientation="vertical" EnableViewState="false" DisappearAfter="2000" StaticEnableDefaultPopOutImage="false" ForeColor="black" Font-Size="Small" BackColor="#b7e7e4" SkipLinkText="" ItemWrap="false" CssClass="Menu2" Height="100%" StaticHoverStyle-CssClass="MenuHover"> <StaticMenuStyle backcolor="LightGray"/> <StaticMenuItemStyle BorderStyle="Solid" BorderWidth="1" BorderColor="LightGray" HorizontalPadding="5" /> <StaticHoverStyle BorderStyle="Outset" BorderColor="black" BorderWidth="1" /> <StaticSelectedStyle HorizontalPadding="5" BorderColor="black" BorderWidth="1" BorderStyle="Solid" /> <DynamicMenuStyle Borderstyle="solid" BorderWidth="1" BorderColor="gray" BackColor="lightgray" /> <DynamicMenuItemStyle HorizontalPadding="5" /> <DynamicHoverStyle BackColor="gray" ForeColor="white" /> </asp:Menu> </div> </div> <asp:contentplaceholder id="PageContent" runat="server"></asp:contentplaceholder>

 

 

<asp:HiddenField ID="ClickedMenuItem" runat="server" /> <!-- Work Around for Master Page bug in ASP.Net AJAX RC1 --> <pfbc:CustomUpdatePanel ID="fakePanel" runat="server" Tag="Span"></pfbc:CustomUpdatePanel>

 

And here is my CSS:

 

#menuContainer2

{

.Menu2

{

.Menu2

{

table.MenuHover

float:left;

width:100;

height:600;

background-color:#D3D3D3;

border-bottom:1px solid #000;

background-image:url(../images/menu-grad.png);

background-position:left;

background-repeat:repeat-x;

}

background-image:url(../images/menu-grad.png);

background-position:left;

background-repeat:repeat-x;  

}

.Menu2 table

{

border:0;

margin:1px;

}

border:1px solid #000;

margin:0;

background-color:#d3d3d3;

}

 

 

qwert231 said:

W3bbo said:

*snip*

Here is my master page:

 

 

<div id="UpdateProgDiv" class="progress" style="display:none;"><asp:Image id="AjaxLoader" runat="server" ImageUrl="~/Images/ajax-loader-bar.gif" AlternateText="Contacting Server"/></div> <h1><img src="~/Images/pfbclogo16.gif" alt="Logo" runat="server" id="imgSmallLogo"/>Pennsylvania Fish &amp; Boat Commission (Version 4.0)</h1>

 

 

 

 

 

 

 

 

 

 

 

 

 

<div runat="server" id="NewLayout"> <div id="menuContainer2"> <asp:Menu ID="SiteMenu" runat="server" Orientation="vertical" EnableViewState="false" DisappearAfter="2000" StaticEnableDefaultPopOutImage="false" ForeColor="black" Font-Size="Small" BackColor="#b7e7e4" SkipLinkText="" ItemWrap="false" CssClass="Menu2" Height="100%" StaticHoverStyle-CssClass="MenuHover"> <StaticMenuStyle backcolor="LightGray"/> <StaticMenuItemStyle BorderStyle="Solid" BorderWidth="1" BorderColor="LightGray" HorizontalPadding="5" /> <StaticHoverStyle BorderStyle="Outset" BorderColor="black" BorderWidth="1" /> <StaticSelectedStyle HorizontalPadding="5" BorderColor="black" BorderWidth="1" BorderStyle="Solid" /> <DynamicMenuStyle Borderstyle="solid" BorderWidth="1" BorderColor="gray" BackColor="lightgray" /> <DynamicMenuItemStyle HorizontalPadding="5" /> <DynamicHoverStyle BackColor="gray" ForeColor="white" /> </asp:Menu> </div> </div> <asp:contentplaceholder id="PageContent" runat="server"></asp:contentplaceholder>

 

 

<asp:HiddenField ID="ClickedMenuItem" runat="server" /> <!-- Work Around for Master Page bug in ASP.Net AJAX RC1 --> <pfbc:CustomUpdatePanel ID="fakePanel" runat="server" Tag="Span"></pfbc:CustomUpdatePanel>

 

And here is my CSS:

 

#menuContainer2

{

.Menu2

{

.Menu2

{

table.MenuHover

float:left;

width:100;

height:600;

background-color:#D3D3D3;

border-bottom:1px solid #000;

background-image:url(../images/menu-grad.png);

background-position:left;

background-repeat:repeat-x;

}

background-image:url(../images/menu-grad.png);

background-position:left;

background-repeat:repeat-x;  

}

.Menu2 table

{

border:0;

margin:1px;

}

border:1px solid #000;

margin:0;

background-color:#d3d3d3;

}

 

 

By the way, my code doesn't look that butt-ugly... channel9's text entry messes up my formatting.

qwert231 said:

qwert231 said:

*snip*

By the way, my code doesn't look that butt-ugly... channel9's text entry messes up my formatting.

You'll have to show us your rendered HTML for us to do anything. ASP control markup is useless when working with CSS.

 

...speaking of which, your CSS is invalid. You can't nest rules in CSS. Check your site in Firefox and load up the Error Console to see what's going on.

W3bbo said:

qwert231 said:

*snip*

You'll have to show us your rendered HTML for us to do anything. ASP control markup is useless when working with CSS.

 

...speaking of which, your CSS is invalid. You can't nest rules in CSS. Check your site in Firefox and load up the Error Console to see what's going on.

My CSS is not nested. Channel9's text box reformats and rearranges the text. What you see is not representative of what my code actually is.

 

I shouldn't even bother pasting code here, it always gets botched up. You'ld think msdn.com of all people could have a textbox that works correctly.

 

The only reason I come here is because the people are so helpful. The site functions lousy. (For instance, I had to click Reply twice just to see the textbox I'm currently typing in.)

Blue Ink said:

W3bbo said:

*snip*

As a side note, .NET 4.0 seems to do much better with this respect (e.g. menu rendered as ul/li and CSS seems way more pervasive). I didn't have the time to test it on real world projects yet, but it looks promising.

about 4.0 yeah the menu is fixed and so are some of the other controls... also they are adding new options to help with control id's that are generated and opting out of viewstate.

qwert231 said:

W3bbo said:

*snip*

My CSS is not nested. Channel9's text box reformats and rearranges the text. What you see is not representative of what my code actually is.

 

I shouldn't even bother pasting code here, it always gets botched up. You'ld think msdn.com of all people could have a textbox that works correctly.

 

The only reason I come here is because the people are so helpful. The site functions lousy. (For instance, I had to click Reply twice just to see the textbox I'm currently typing in.)

Pastebin is your friend. Use that instead in future.

I have the same issue. Have you gotten an answer from another site? These "techies" don't know how to help you.

The basic issue is when the div in the middle goes beyond the length of the left side div, the middle div wraps around the bottom. This has nothing to do with ASP.NET or server controls.

Why do they assume you are using tables?

Switching to .NET 4.0 without understanding the impact on other pages and applications is just stupid, stupid, stupid.

I am going to put this site on my unhelpful/amateur list.

I found an answer that should work for you.

This site explains how to nest divs so they expand with the whole page:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Thank you Mathew James Taylor.

-Andy