MasterPage & CSS Layout Strategy

  • Thread starter Thread starter Alex Maghen
  • Start date Start date
A

Alex Maghen

I need some help figuring out how to properly use CSS for layout in a
MasterPage environment in ASP.NET 3.5. Imagine I have a VERY simple
MasterPage layout with 4 DIVs ("header", "LeftNav", "PageBody", and
"footer"). I'm then going to use CSS to define #header{}, #LeftNav{} etc.
styles for layout.

All that is fine. But now let's say that I want to be able to access the
properties of these DIVs from the server side. What I would do is set the
DIVs to 'runat="server"'. The problem is that as soon as I do that, the IDs
of the DIVs get mangled and then things like the #header{} style definition
in my CSS is not found when the page is rendered.

How do I handle this?

Alex
 
Alex Maghen said:
I need some help figuring out how to properly use CSS for layout in a
MasterPage environment in ASP.NET 3.5. Imagine I have a VERY simple
MasterPage layout with 4 DIVs ("header", "LeftNav", "PageBody", and
"footer"). I'm then going to use CSS to define #header{}, #LeftNav{} etc.
styles for layout.

All that is fine. But now let's say that I want to be able to access the
properties of these DIVs from the server side. What I would do is set the
DIVs to 'runat="server"'. The problem is that as soon as I do that, the
IDs
of the DIVs get mangled and then things like the #header{} style
definition
in my CSS is not found when the page is rendered.

How do I handle this?
Click to expand...

Don't use #IDName.

Give each a class: header, LeftNav etc.

Then use

div.header {}
div.LeftNav {}

etc in your CSS.
 
Hi Alex,

I think what Anthony said about CSS is reasonable.

What I want to supplement is, if we want to access the
properties of these DIVs in the code behind we don't have to set it as
"runat='server'". Here's the sample that demonstrates how to change the
attribute of the <div> tag. In fact, the <div> and any other HTML elements
are translated to LiteralControl so we can use LiteralControl to render
them directly.

Aspx:

<form id="form1" runat="server">
Test:
<div id="mydiv">Hello World</div>
</form>

Aspx.cs:

protected void Page_PreRender(object sender, EventArgs e)
{
LiteralControl lc = (LiteralControl)this.form1.Controls[0];
lc.Text = lc.Text.Replace(" id=\"mydiv\"", " id=\"mydiv\"
style=\"background-color:Red\"");

}

Though it's seldom used it's also an option.


Another suggestion is to read the following tutorial:
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/themes/default.aspx

In ASP.NET 2.0 it's recommended to use Theme and Skin.

If you have further questions please feel free to ask.

Regards,
Allen Chen
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 2 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions. Issues of this
nature are best handled working with a dedicated Microsoft Support Engineer
by contacting Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.
 
Another suggestion is to read the following tutorial:
http://quickstarts.asp.net/QuickStartv20/aspnet/doc/themes/default.aspx

In ASP.NET 2.0 it's recommended to use Theme and Skin.

If you have further questions please feel free to ask.

Regards,
Allen Chen
Microsoft Online Community Support
Click to expand...
<snip/>

IT IS PATHETIC, DISHONEST, AND SHAMEFUL THAT MICROSOFT SYCOPHANTS CONTINUE
TO TRY TO MISLEAD PEOPLE BY TRYING TO TRICK THEM INTO USING MICROSOFT'S
THEMES WHICH WERE CREATED TO VANDALIZE THE USE OF CSS.

YOU'VE ALL BEEN WARNED. FAILURE TO USE GOOGLE TO VERIFY WILL GET YOU
WHAT YOU DESERVE.
 
Hi Alex,

Have you solved this problem?

Regards,
Allen Chen
Microsoft Online Support
 
Back
Top