INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Master Page and CSS creation

Master Page and CSS creation

(OP)
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

RE: Master Page and CSS creation

Here is an example for you.
Master page:

CODE

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<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;
} 

RE: Master Page and CSS creation

(OP)
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

RE: Master Page and CSS creation

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)

RE: Master Page and CSS creation

(OP)
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

RE: Master Page and CSS creation

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



RE: Master Page and CSS creation

(OP)
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 --> ASP

<%@ 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> 

RE: Master Page and CSS creation

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="detailMenu">
                    <div class="detailNavbar">
                        <ul class="detailNavigation" 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> 

RE: Master Page and CSS creation

(OP)
Legend!! Thank you very much!

RE: Master Page and CSS creation

Glad to help. good luck

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close