Hinzufügen eines Stylesheets zu asp.net (mit Visual Studio 2010)

Ich versuche, fügen Sie ein stylesheet, um eine master-Seite in einem asp.net web-Formular. Im Grunde versucht, zu erstellen eine inline-nav-Menü oben auf der Seite. Ich habe Probleme mit ihm. Ich habe das stylesheet (die gleiche Weise, die ich anlegen würde, wäre dies eine html-Seite) und ich habe es in das Verzeichnis, das Sie unten sehen. Ich sehe nicht, wie der code unten zeigt keinen Bezug zu der stylesheet obwohl.

Ähnlich wie in html, ich hätte

Home
Über
Kontakt

Dann mein stylesheet würde dann so Aussehen...

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

li {
display:inline;
padding:20px;
}

Und CSS-lass es display inline (über die Spitze). Aber ich bin mir nicht sicher, wohin Sie gehen hier.

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

setzen Sie Ihre css - Datei zwischen den <head> .... css file </head> spielen Sie nicht mit der design-Ansicht in aspx Seite, wie Sie selbst Klassen erstellen, wie style1, style2.... erstellen Sie einfach eine eigene CSS-Datei und legen Sie es, wie ich vorgeschlagen haben.. Wenn es display:inline dann sollten Sie sich Ihre inline-style-tags in <head>

InformationsquelleAutor JPC Solutions | 2013-04-23

Einige Dinge hier.

First off, du bist die Definition der CSS in 3 Orten!

In der Zeile, in der Kopf-und extern. Ich schlage vor, Sie wählen nur eine. Ich werde Euch zeigen, extern.

Ich schlage vor, Sie aktualisieren Sie Ihren code in Ihren ASP-Formular aus

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

<td  class="style6">

Und dann aktualisieren Sie Ihre css zu

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

Dieser entfernt die inline.

Nun, um es zu bewegen aus dem Kopf des 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>

Nun, in eine neue Datei namens master.css (im css-Ordner) hinzufügen

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;
}

Wenn ich das mache, was Sie gesagt haben, zu tun, ich bin immer diese Fehlermeldung und ich verstehe nicht, warum? [link]box.com/s/bu7q6q7yp37csf85xylp
Noch bevor ich Tat, was Sie vorgeschlagen haben, wenn ich gerenderten Seite, es war nur zeigt mir ein Directory-Listing und nicht die Website selbst. Gedanken?
Directory-listing kann bedeuten, dass die Standard-Dokument ist anders, als Sie liefert

InformationsquelleAutor Dave

Fügen Sie Ihren Stil hier:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BSC.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/NewStyle.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

Dann in die Seite:

<asp:Table CssClass=NewStyleExampleClass runat="server" >

InformationsquelleAutor Mario

Das einzige, was Sie tun müssen, ist fügen Sie in der cshtml-Datei, in der Kopf, die folgende Zeile:

        @Styles.Render("~/Content/Main.css")

Den gesamten Kopf Aussehen wird somethink wie:

    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>HTML Page</title>
         @Styles.Render("~/Content/main.css")
    </head>

Hoffe, es hilft!!

InformationsquelleAutor SomeAnonymousPerson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.