Master Pages, Themes and Navigation Controls

Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

Amanda Wang - MSFT — Tue, 29 Jan 2008 06:36:06 GMT

Hi,

mickey12345:
In other words, when I resize my browser window, the masterpage resize fluidly but all the controls stay put.

If you want to make the all the controls resize when you resize the the browser window, you also need to set the height of the control is by percent %, and set the controls' width and height is 100% that is in the div.

Additon, you also set the html and the body's width and height is 100%. Like below:

* {margin: 0; padding: 0;}
   html, body
   {
       height: 100%;
       margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
   }

Hope it helps.

Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

mickey12345 — Sun, 27 Jan 2008 20:35:53 GMT

Where would I put the CLEAR:BOTH statement (at the end of #content)?

Do you recommend to get away from FLOAT design and use ABSOLUTE POSITIONING?

Basically, I'm looking for a way to keep all my controls from the content page to stay within my #Content Area. If I resize the browser, everything would move together as a single unit.

Below is my mark up for the MasterPage.master

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

<h1>

Header</h1>

</div>

<h1>

sub header</h1>

</div>

<asp:Label ID="lblLastLoggedOn" runat="server" Style="z-index: 100; left: 480px;

position: absolute; top: 124px" Width="280px"></asp:Label>

<asp:SiteMapPath ID="SiteMapPath1" runat="server" Style="z-index: 102; left: 8px;

position: absolute; top: 128px">

</asp:SiteMapPath>

</div>

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True"> <HoverNodeStyle BackColor="Yellow" />

</asp:TreeView>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

</form>

</body>

</html>

Re: Help with DIV Layout in MasterPage and ContentPlaceHolder

RTernier — Sun, 27 Jan 2008 17:46:16 GMT

Using "top" in any CSS Styles will not work unless it's absolutely positioned.

As well, when you have content that is being floated, make sure you have a clear:left or clear:both after so the rest of your elements are positioned well.

However, it's hard to see without any markup.

Help with DIV Layout in MasterPage and ContentPlaceHolder

mickey12345 — Sun, 27 Jan 2008 17:35:56 GMT

I'm relatively new to ASP.NET and worst of all I am not a web designer. I'm responsible for converting an existing application from .NET 1.1 to 2.0 and must utilize MasterPage concept. I have no trouble creating a stylesheet.css with all DIV layout using float. My trouble came when I drag web controls into the contentpage (not MasterPage PlaceHolder1) the control would not stay inside the content area. In other words, when I resize my browser window, the masterpage resize fluidly but all the controls stay put.

I don't know how to make all the controls move with the masterpage.

Below is my stylesheet.css and attached is the result of my page after resizing.

1    body
2    {
3    margin: 0px;
4    padding: 0px;
5    top: 0px;
6    left: 0px;
7    }
8
9    #header
10   {
11   background-color: #6699cc;
12   width: 100%;
13   height: 50px;
14   }
15
16   #subheader
17   {
18   background-color: #66cc00;
19   width: 100%;
20   top: 50px;
21   height: 50px;
22   }
23
24
25   #personalityzone
26   {
27   background-color: #ffffcc;
28   width: 100%;
29   top: 100px;
30   height: 50px;
31   vertical-align: middle;
32   }
33
34   #leftmenu
35   {
36   background-color: #cccccc;
37   float: left;
38   top: 150px;
39   width: 19%;
40   height: 600px;
41   }
42
43   #content
44   {
45   background-color: #ffccff;
46   float: left;
47   top: 150px;
48   width: 80%;
49   height: 600px;
50   }