Master Page and CSS creation 1

Halliarse · Oct 24, 2014

Good Morning and Help!!

Visual Studio 2012 / ASP 4.0

I am currently in the process of building a web-based software application and decided that the best way to start was to create all of my indivisual pages and code first and then design the overall layout afterwards....I've since realised that this is not the best way!

I have done several days research on how to create a master page and external CSS file and I'm not getting anywhere....I am VERY new to this and I need a point in the right direction!

I have attached a screenshot of what I am trying to acheive in terms of a basic layout! All I'm after is a header that contains and image and a menu selection, a left panel that will hold detailedd menu items and a centra panel which will be populated by the actual web pages and a footer. Whilst I'm not expecting someone to codee this for me, if someone could show me where / how to start I woud be a happy developer again!

Many thanks and apologies if I have not provided enough information!

Steve

jbenson001 · Oct 24, 2014

Here is an example for you.
Master page:

Code:

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

<!DOCTYPE html>

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div class="BasicContent">
            <div id="header">
                Header stuff here ...
            </div>
            <div class="navBar">
                <ul class="navigation">
                    <li><a href="#">Menu Item 1</a> |</li>
                    <li><a href="#">Menu Item 2</a> |</li>
                    <li><a href="#">Menu Item 3</a> |</li>
                    <li><a href="#">Menu Item 4</a></li>
                </ul>
            </div>
            <div id="mainContent">
                <div id="detailMenu">
                    <div class="navBar">
                        <ul class="navigation" style="float: none;">
                            <li style="float: none;"><a href="#">Detail Menu Item 1</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 2</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 3</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 4</a></li>
                            <li style="float: none;"><a href="#">Detail Menu Item 5</a></li>
                        </ul>
                    </div>
                </div>
                <div id="pageContent">
                    <asp:ContentPlaceHolder ID="contentPageContent" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div class="clear">
            </div>
            <div id="footer" >
                footer stuff here ...
            </div>
        </div>
    </form>
</body>
</html>

Content Page

Code:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<asp:Content ID="pageContent" ContentPlaceHolderID="contentPageContent" Runat="Server">
    This is content from your page that inherits the master page.
</asp:Content>

Css file:

Code:

.BasicContent {
    font: 11px/18px verdana, geneva, sans-serif;
    width: 1024px;
    margin: 0 auto;
}

.navBar {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 20px 0;
    width: 1024px;
    height: 22px;
}

.navigation {
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0 10px;
    width: 1004px;
}

    .navigation li {
        display: block;
        height: 22px;
        float: left;
        padding: 0;
        margin: 0;
    }

.detailNavigation li {
    display: block;
    height: 22px;
    padding: 0;
    margin: 0;
}

.navigation a {
    display: block;
    height: 22px;
    float: left;
    background-color: Transparent;
    font-size: 13px;
    padding: 0 8px;
    line-height: 22px;
    font-family: "Trebuchet MS",Helvetica, sans-serif;
    text-decoration: none;
}

    .navigation a:hover {
        color: #ffff00;
        text-decoration: none;
    }

    .navigation a.active {
        color: #ffff00;
        text-decoration: none;
    }

#detailMenu {
    width: 200px;
    float: left;
}

.clear{
    clear: both;
}

Halliarse · Oct 27, 2014

Thanks Jbenson001, this have definately given me more of an idea!

I ran this as a test and it doesn't quite line up, with the footer displaying mid screen....as attached.

Also, how easy is it to replace the text version of 'Detail Menu Item' as buttons?

Many thanks

Steve

jbenson001 · Oct 27, 2014

Not sure why the css is not working exactly for you... i ran mine in FirFox.

I gave you this as an example. You can now modify it anyway you want. It will help you learn CSS and
master pages, etc.

You can also use any control you want. I wouldn't use buttons for navigation, it is confusing to the user and will also cause postbacks(unless you use HTML buttons)

Halliarse · Oct 27, 2014

It is working, I was looking at the preview in VS, when I actually ran the page it was fine! (Doh!!)

I've started working with your example built into my solution and actually making some progress so thank you for that.

One last question though....when I load the page that is now linked to the Master, the first field is a drop down and for some reason it doesn't appear to work! Any ideas please? (I've attached the code)

Thanks

Steve

jbenson001 · Oct 27, 2014

You can post code in here like this:

Code:

This is my code

See the TGML tags

Also explain what "it doesn't work" means

Halliarse · Oct 27, 2014

TGML?

Apologies, that what a bit vague wasn't it?

Prior to adding the link to the master page, the web page worked fine. However, the first field, a drop down box (DropDownList1), no longer seems to activiate when you select it.

Code:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AddStylistHours.aspx.vb" Inherits="Snip_IT.AddStylistHours" MasterPageFile="~/Snip-IT.Master" %>

<asp:Content ID="pageContent" ContentPlaceHolderID="contentPageContent" Runat="Server">

        <div style="height: 212px">
    
        <asp:Label ID="Label1" runat="server" Text="Salon"></asp:Label>
        <asp:DropDownList ID="DropDownList1" runat="server" cssClass="curves" AutoPostBack="True">
        </asp:DropDownList>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Stylist" Visible="False"></asp:Label>
        <asp:DropDownList ID="DropDownList2" runat="server" cssClass="curves" AutoPostBack="True" Visible="False">
        </asp:DropDownList>
        <br />
        <asp:Label ID="Label3" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime1" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime1" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label9" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod1" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        <asp:Label ID="Label4" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime2" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime2" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label10" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod2" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        <asp:Label ID="Label5" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime3" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime3" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label11" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod3" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        <asp:Label ID="Label6" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime4" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime4" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label12" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod4" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        <asp:Label ID="Label7" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime5" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime5" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label13" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod5" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        <asp:Label ID="Label8" runat="server" Visible="False"></asp:Label>
        <asp:TextBox ID="txtStartTime6" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtEndTime6" runat="server" MaxLength="5" cssClass="curves" Visible="False"></asp:TextBox>
        <asp:Label ID="Label14" runat="server" Text="Lunch Period" Visible="False"></asp:Label>
        <asp:TextBox ID="txtLunchPeriod6" runat="server" MaxLength="2" cssClass="curves" Visible="False"></asp:TextBox>
        <br />
        
    </div>
        <asp:Button ID="butAdd" runat="server" Text="Add Stylist Hours" cssClass="curves" Visible="False" />
        <asp:Button ID="butCancel" runat="server" Text="Cancel" cssClass="curves" />
 </asp:Content>

jbenson001 · Oct 27, 2014

Replace your css with this:

Code:

.BasicContent {
    font: 11px/18px verdana, geneva, sans-serif;
    width: 1024px;
    margin: 0 auto;
}

.navBar {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 20px 0;
    width: 1024px;
    height: 22px;
}

.navigation {
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0 10px;
    width: 1004px;
}

    .navigation li {
        display: block;
        height: 22px;
        float: left;
        padding: 0;
        margin: 0;
    }

.detailNavigation {
    z-index: 2;
    list-style: none;
    padding: 0;
    margin: 0 10px;
    width: 200px;
}

.detailNavbar {
    position: relative;
    top: 0;
    left: 0;
    margin: 0 0 20px 0;
}

.detailNavigation li {
    display: block;
    height: 22px;
    padding: 0;
    margin: 0;
    width: 200px;
}

.navigation a {
    display: block;
    height: 22px;
    float: left;
    background-color: Transparent;
    font-size: 13px;
    padding: 0 8px;
    line-height: 22px;
    font-family: "Trebuchet MS",Helvetica, sans-serif;
    text-decoration: none;
}

    .navigation a:hover {
        color: #ffff00;
        text-decoration: none;
    }

    .navigation a.active {
        color: #ffff00;
        text-decoration: none;
    }

#detailMenu {
    width: 200px;
    float: left;
}

.clear {
    clear: both;
}

On the master page change this:

Code:

               <div id="[COLOR=#CC0000]detailMenu[/color]">
                    <div class="[COLOR=#CC0000]detailNavbar[/color]">
                        <ul class="[COLOR=#CC0000]detailNavigation[/color]" style="float: none;">
                            <li style="float: none;"><a href="#">Detail Menu Item 1</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 2</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 3</a> </li>
                            <li style="float: none;"><a href="#">Detail Menu Item 4</a></li>
                            <li style="float: none;"><a href="#">Detail Menu Item 5</a></li>
                        </ul>
                    </div>
                </div>

Halliarse · Oct 27, 2014

Legend!! Thank you very much!

jbenson001 · Oct 27, 2014

Glad to help. good luck

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Master Page and CSS creation 1

Halliarse

IS-IT--Management

jbenson001

Programmer

Halliarse

IS-IT--Management

jbenson001

Programmer

Halliarse

IS-IT--Management

jbenson001

Programmer

Halliarse

IS-IT--Management

jbenson001

Programmer

Halliarse

IS-IT--Management

jbenson001

Programmer

Similar threads

Part and Inventory Search

Sponsor