Adding a stylesheet to asp.net (using Visual Studio 2010)

asp.net, css, inline, navigationbar

Solution

Several things here.

First off, you're defining your CSS in 3 places!

In line, in the head and externally. I suggest you only choose one. I'm going to suggest externally.

I suggest you update your code in your ASP form from

<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" 
        class="style6">

to this:

<td  class="style6">

And then update your css too

.style6
    {
        height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
    }

This removes the inline.

Now, to move it from the head of the webForm.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AR Toolbox</title>
    <link rel="Stylesheet" href="css/master.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
    <tr>
        <td class="style6">
            <asp:Menu ID="Menu1" runat="server">
                <Items>
                    <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
                    <asp:MenuItem Text="About" Value="About"></asp:MenuItem>
                    <asp:MenuItem Text="Compliance" Value="Compliance">
                        <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem>
                        <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
                    <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </td>
    </tr>
    <tr>
        <td class="style6">
            <img alt="South University'" class="style7" 
                src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td>
    </tr>
    <tr>
        <td class="style2">
            <table class="style3">
                <tr>
                    <td>
                        &nbsp;</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="color: #FFFFFF; background-color: #A3A3A3">
            This is the footer.</td>
    </tr>
</table>
</form>
</body>
</html>

Now, in a new file called master.css (in your css folder) add

ul {
list-style-type:none;
margin:0;
padding:0;
}

li {
display:inline;
padding:20px;
}
.style1
{
    width: 100%;
}
.style2
{
    height: 459px;
}
.style3
{
    width: 100%;
    height: 100%;
}
.style6
{
    height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
}
.style7
{
    width: 345px;
    height: 73px;
}

Problem

I am trying to add a stylesheet to a master page in an asp.net web form. Basically trying to create an inline nav menu for the top of the page. I'm having issues with it. I've created the stylesheet (the same way I would create if this were an html site) and I've put it in the directory you see below. I don't see how the code below shows any relation to the stylesheet though. Like in html, I would have - Home - About - Contact And then my stylesheet would look like this... ``` ul { list-style-type:none; margin:0; padding:0; } li { display:inline; padding:20px; } ``` And the CSS would let it display inline (across the top). But I'm not sure where to go here. ``` <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AR Toolbox</title> <asp:ContentPlaceHolder id="Stylesheets" runat="server"> <link rel="Stylesheet" href="/css/master.css" type="text/css" /> </asp:ContentPlaceHolder> <style type="text/css"> .style1 { width: 100%; } .style2 { height: 459px; } .style3 { width: 100%; height: 100%; } .style6 { height: 79px; } .style7 { width: 345px; height: 73px; } </style> </head> <body> <form id="form1" runat="server"> <table class="style1"> <tr> <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" class="style6"> <asp:Menu ID="Menu1" runat="server"> <Items> <asp:MenuItem Text="Home" Value="Home"></asp:MenuItem> <asp:MenuItem Text="About" Value="About"></asp:MenuItem> <asp:MenuItem Text="Compliance" Value="Compliance"> <asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem> <asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem> <asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem> </Items> </asp:Menu> </td> </tr> <tr> <td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;" class="style6"> <img alt="South University'" class="style7" src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td> </tr> <tr> <td class="style2"> <table class="style3"> <tr> <td> &nbsp;</td> </tr> </table> </td> </tr> <tr> <td style="color: #FFFFFF; background-color: #A3A3A3"> This is the footer.</td> </tr> </table> </form> </body> </html> ```

Original source