CODEWITHSUNDEEP
c#asp.netcss.netmaster-pages
Travis
Travis

Reputation: 135

Basic Styling. Navigation bar on right on Master Page

Call me a noob, but I am terrible at styling. Not my forte. But anyways, on my CSS page I need to have my MasterPage Navigation bar be on the left side. But when I click on the link to bring me to different page, it has to show up in the middle with the navigation on the left still.

Is this more then just styling? If it is, please help.

Here is my asp code:

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="~/MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Travis's Master Page = Resume Information</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
            <link href="Stylesheet" rel="stylesheet" type="text/css" />
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="page">

                <div id="header" >
                    <asp:Image ID="Image1" runat="server" Height="99px"
                        ImageUrl="./Pictures/city2.jpg" Width="70px" />
                </div>

                <div id="sidebar" >

                    <asp:HyperLink ID="Home" runat="server"
                        NavigationUrl="./Default.aspx" CssClass="link">Home</asp:HyperLink>
                    <br /><br />

                    <a href="Default2.aspx">Education</a>

                    <asp:HyperLink ID="Proficiencies" runat="server"
                        NavigationUrl="./Default3.aspx" CssClass="link">IT Proficiencies</asp:HyperLink>
                    <br /><br />

                    <asp:HyperLink ID="Involvement" runat="server"
                        NavigationUrl="./Default4.aspx" CssClass="link">Community Involvement</asp:HyperLink>
                    <br /><br />

                    <asp:HyperLink ID="References" runat="server"
                        NavigationUrl="./Default5.aspx" CssClass="link">References</asp:HyperLink>
                    <br /><br />
                </div>

                <div id="main">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                    </asp:ContentPlaceHolder>
                </div>
                <div id="message">
                    <asp:Label ID="lblMessage" runat="server" Text="This is a Label" CssClass="label"></asp:Label>
                    <br />
                </div>

            </div>
        </form>
    </body>

</html>

And laugh if you want, but this is about as far as i can get with styling.

    Body
{

}
Aside
{

}
Footer
{

}

Any help with this will be greatly appreciated. I know this is probably just very basic stuff, but I would like a helping hand.

Thanks!

EDIT: Right now, as it currently stands, it is all on the left side. The information that is entered in on other pages still shows up on the navigation bar. I can't get it to show up in the middle.

Upvotes: 0

Views: 2503

Answers (1)

kmacdonald
kmacdonald

Reputation: 3471

the fix would be to use floats:

  1. set your sidebar to float:left.
  2. set your main to float:right:
  3. after your main div add: <div style="clear: both;"></div>

this should do the trick. here is a very very simple jsfiddle that demostrates it:

http://jsfiddle.net/LM3xp/

Upvotes: 1

Related Questions