ansaurus

Question

Answer 1

+1 A:

I'd probably go for something like this:

CSS:

body {
    margin: 0;
    padding: 0;
}
div#left {
    display: inline;
    float: left;
    height: 100%;
    width: 30%;
    background: #A00;
}
div#top_right {
    display: inline;
    float: right;
    height: 30%;
    width: 70%;
    background: #000;
}
div#bottom_right {
    display: inline;
    float: left;
    height: 70%;
    width: 70%;
    background: #CCC;
}

HTML:

<div id="left">
</div>
<div id="top_right">
</div>
<div id="bottom_right">
</div>

Put in background colours just to tell them apart, good luck!

Stann0rz 2010-08-09 13:34:12

how does this stuff makes wits way into a master page?and how in master page do i get links i want in the top div to load various .aspx pages into the content div section. do i use content pane instead of div?

kacalapy 2010-08-09 13:44:19

Have you looked into http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx for defining master pages and their content?

Stann0rz 2010-08-09 14:01:44

Answer 2

+1 A:

Building upon Stann0rz answer, here is what a master page and content view could look like. This example was done using ASP.NET MVC but would apply very closely to traditional ASP.NET Webforms.

MASTER PAGE:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }
    div#left {
        display: inline;
        float: left;
        height: 100%;
        width: 30%;
        background: #A00;
    }
    div#top_right {
        display: inline;
        float: right;
        height: 30%;
        width: 70%;
        background: #000;
    }
    div#bottom_right {
        display: inline;
        float: left;
        height: 70%;
        width: 70%;
        background: #CCC;
    }
</style>
</head>
<body>
    <div id="left">
        <ul>
          <li>Navigation Item 1</li>
          <li>Navigation Item 2</li>
        </ul>
    </div>
    <div id="top_right">
        <span>Tab 1</span>
        <span>Tab 2</span>
    </div>
    <div id="bottom_right">
        <asp:ContentPlaceHolder ID="BottomRightContent" runat="server">
    </div>
</body>
</html>

CONTENT VIEW:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="BottomRightContent" runat="server">
    [Bottom-right content goes here]
</asp:Content>

John Gully 2010-08-09 14:29:54

how do i make it so if i have 4 links to content pages that i can get them to load in the content of the bottom right pane?im looking to have links that look like tabs in the top header of the maser page sections and have it control the loading of other .aspx pages as content in the main div/content section of the page.so to have one master page with 3 sections and the main section pre-fill with other pages that hold the content.

kacalapy 2010-08-09 14:55:57

If I understand you question correctly, you want the left navigation and tabs at the top to stay the same for each page. The only thing that changes would be the content in the BottomRightContent.You can accomplish this simply by adding that navigation and tab HTML to directly to the masterpage. Then each content page would only contain a reference to the BottomRightContent.

John Gully 2010-08-09 16:08:19

Edited the code example to have static navigation and tab content in the MasterPage.

John Gully 2010-08-09 16:12:51

ansaurus

tags:

views:

answers:

syntax for layouit using DIV + CSS?

related questions