Cody's Awesome Assortment of Information...: ASP.Net Some Example Master File Layouts

Here are three variations of example Master page layouts that I have setup in asp.net, the pages are using divs and formating to create a table like layout of the information the page. Using <div> tags and CSS formatting I think you are able to more control over your codes visual representation.

This is a one column master page with the navigation menu setup down the left side of the content column.

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteMaster1.master.cs" Inherits="SiteMaster" %>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 <head runat="server">  
   <title></title>  
   <link href="~/Styles/Master1SS.css" rel="stylesheet" type="text/css" />  
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">  
   </asp:ContentPlaceHolder>  
 </head>  
 <body>  
   <form runat="server">  
   <div id="wrapper">  
     <div id="headerWrapper">  
       <div style="vertical-align: middle;">  
         <h1>Media Center of The Universe</h1>  
       </div>  
     </div>  
     <div id="contentWrapper">  
       <div class="menu">  
         <asp:Menu ID="NavigationMenu" runat="server" Orientation="Vertical" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="2">   
          <LevelMenuItemStyles>   
            <asp:MenuItemStyle CssClass="menuLevel"/>  
            <asp:MenuItemStyle CssClass="menuLevel"/>  
            <asp:MenuItemStyle CssClass="menuLevel"/>  
          </LevelMenuItemStyles>   
          <Items>   
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />  
            <asp:MenuItem NavigateUrl="~/Pages/Media.aspx" Text="Media">   
              <asp:MenuItem NavigateUrl="~/Pages/Pictures.aspx" Text="Pictures">  
                <asp:MenuItem NavigateUrl="~/Pages/PicsNew.aspx" Text="New Pictures" />  
                <asp:MenuItem NavigateUrl="~/Pages/PicsOld.aspx" Text="Old Pictures" />  
                <asp:MenuItem NavigateUrl="~/Pages/PicCategories.aspx" Text="Categories" />  
              </asp:MenuItem>  
              <asp:MenuItem NavigateUrl="~/Pages/Videos.aspx" Text="Videos" />   
            </asp:MenuItem>   
            <asp:MenuItem NavigateUrl="~/Pages/About.aspx" Text="About" />   
          </Items>   
         </asp:Menu>  
       </div>  
       <div class="content">  
         <asp:ContentPlaceHolder ID="MainContent" runat="server" />  
       </div>  
       <div class="clear" />  
     </div>  
     <div id="footer">  
       Media Center of The Universe Footer  
     </div>  
   </div>  
   </form>  
 </body>  
 </html>

Here is what the above layout will look like with my CSS formatting.

Here is a layout for a two column master page with a variation in the menu placement, across the top of the two content column.

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteMaster2.master.cs" Inherits="SiteMaster" %>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 <head id="Head1" runat="server">  
   <title></title>  
   <link href="~/Styles/Master3SS.css" rel="stylesheet" type="text/css" />  
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">  
   </asp:ContentPlaceHolder>  
 </head>  
 <body>  
   <form id="Form1" runat="server">  
   <div id="wrapper">  
     <div id="headerWrapper">  
       <h1>One Column Master</h1>  
     </div>  
     <div id="bodyWrapper">  
       <div class="menu">  
         <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"  
           IncludeStyleBlock="true" Orientation="Vertical">  
           <Items>  
             <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />  
             <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />  
           </Items>  
         </asp:Menu>  
       </div>  
       <div id="contentWrapper">  
         <div class="content1">  
           <asp:ContentPlaceHolder ID="MainContent" runat="server" />     
         </div>  
         <div class="content2">  
           Hello  
         </div>  
         <div class="clear"></div>  
         <div id="footer">Footer</div>  
       </div>  
       <div class="clear"></div>  
     </div>  
   </div>  
   </form>  
 </body>  
 </html>

Here is what the above layout looks like.

Here is a layout for another two column master page with the menu placement next to the left side of the two content columns.

 <%@ Master Language="C#" AutoEventWireup="true" CodeFile="SiteMaster2.master.cs" Inherits="SiteMaster" %>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
 <head id="Head1" runat="server">  
   <title></title>  
   <link href="~/Styles/Master3SS.css" rel="stylesheet" type="text/css" />  
   <asp:ContentPlaceHolder ID="HeadContent" runat="server">  
   </asp:ContentPlaceHolder>  
 </head>  
 <body>  
   <form id="Form1" runat="server">  
   <div id="wrapper">  
     <div id="headerWrapper">  
       <h1>Master Page Layout 3</h1>  
     </div>  
     <div id="bodyWrapper">  
       <div class="menu">  
         <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"  
           IncludeStyleBlock="true" Orientation="Vertical">  
           <Items>  
             <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />  
             <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />  
           </Items>  
         </asp:Menu>  
       </div>  
       <div id="contentWrapper">  
         <div class="content1">  
           <asp:ContentPlaceHolder ID="MainContent" runat="server" />     
         </div>  
         <div class="content2">  
           Hello  
         </div>  
         <div class="clear"></div>  
         <div id="footer">Footer</div>  
       </div>  
       <div class="clear"></div>  
     </div>  
   </div>  
   </form>  
 </body>  
 </html>

Here is the picture of the above layout.

More to Come, CA.

Cody's Awesome Assortment of Information...

Friday, March 4, 2011

ASP.Net Some Example Master File Layouts

No comments:

Post a Comment