CODEWITHSUNDEEP
cssasp.net
user3503518
user3503518

Reputation:

CSS is disappeared

I have the following HTML code. The Page Address is: "AdminPages/AdminPage.aspx" - 

 <head>
 <meta charset="UTF-8">
 <title>Admin Page</title>
 <link href="Scripts/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" href="Scripts/bootstrap-theme.min.css">
 <script src="Scripts/jquery.min.js"></script>
 <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="Scripts/CSS/AdminPage.css" />

 </head>
 <body>
 <div class="bs-example">
<form runat="server">
<nav id="myNavbar" class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">            
            <asp:LinkButton class="navbar-brand" style="color:white" ID="AdminHomePage" runat="server" href="AdminPages/AdminPage.aspx">Home</asp:LinkButton>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">TEST</a></li>
                <li><a href="AdminPages/Profile.aspx">Profile</a></li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Inbox</a></li>
                        <li><a href="#">Drafts</a></li>
                        <li><a href="#">Sent Items</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Trash</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                        <asp:Label ID="emailDeatilsLabel" runat="server" style="color:white"></asp:Label> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li class="divider"></li>
                       <li><asp:LinkButton ID="LogOutLabel" runat="server" href="UserPages/LogOut.aspx">Log Out</asp:LinkButton></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
</nav>
    </form>

 </div>
 </body>
 </html>

And when I clicked on the label:

      <asp:LinkButton class="navbar-brand" style="color:white" ID="AdminHomePage" runat="server" href="AdminPages/AdminPage.aspx" Home</asp:LinkButton>

I want to stay in the current page,but when I clicked the css is disappeared and the address has been changed ,how can I fix it?

Before: http://srv2.jpg.co.il/1/542749dc3a7fd.png
After: http://srv1.jpg.co.il/2/54274a4285747.png
(I have no credits to post images)

Upvotes: 1

Views: 626

Answers (2)

Mark Fitzpatrick
Mark Fitzpatrick

Reputation: 1624

All your script references need to be relative to either: 1) The domain root. This is done by using / at the beginning of a url such as "/Site/Scripts/CSS/AdminPage.css" 2) App relative. It sounds as if your application is published in a directory under the root, so app relative may be best. App Relative is done on server controls using ~/ at the beginning. You can also inject it into the output by using <%= ResolveUrl("~/Scripts/CSS/AdminPage.css") %>

<%= is shorthand for response.write. ResolveUrl is a method made available in page and control classes to help resolve the url relative to the app root, page, etc..

Personally, I go for the app root approach. That makes your code portable and you don't have to repeatedly fix it every time you deploy it to a different location.

Keep in mind, a master page is just a template. Like any other web design application that uses template, you have to determine how any files referenced in the template will be resolved when you use that template for pages in different folders.

You are continuing to have problems with the visuals because, most likely, you only changed one reference. You need to change the references for every CSS file and all the scripts as well to ensure they are app relative (or domain root relative, whichever you choose)>

Upvotes: 0

user1864610
user1864610

Reputation:

The path to your CSS file is relative to the current folder - probably the web root /. The AdminPages.aspx file is also in a path relative to the current folder. When you load it your CSS path points to a folder relative to AdminPages and so it isn't found.

Change the path in your <link elements to be absolute:

<link rel="stylesheet" type="text/css" href="/Scripts/CSS/AdminPage.css" />
                                             ^ add this.

You might need to make similar changes to other paths.

Upvotes: 1

Related Questions