Hello
I have a CSS footer here: http://www.bayingwolf.com/test1.html which I got from a CSS-Tricks tutorial:
http://css-tricks.com/snippets/css/sticky-footer/
Basically, it work like this:
<style> CSS footer attributes </style> followed by:
<body>
<div class="page-wrap">
</div>
<footer class="site-footer">
Text, etc
</footer>
</body>
</html>
In between these: <div class="page-wrap">………..</div> goes all the HTML, and I have tried to use this CSS-Tricks footer snippet by placing it in my Site.Master file as follows:
* {
margin: 0;
}
html, body {
height: 100%;
}
a:link {color:#ffffff; background-color:transparent; text-decoration:none}
a:visited {color:#ffffff; background-color:transparent; text-decoration:none}
a:hover {color:#ffffff; background-color:transparent; text-decoration:underline}
a:active {color:#ffffff; background-color:transparent; text-decoration:none}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 40px;
width: 700px;
margin: 0 auto;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
-moz-border-radius-topright:6px;
-moz-border-radius-topleft:12px;
-webkit-border-top-right-radius:12px;
-webkit-border-top-left-radius:12px;
}
.site-footer {
background: #676767;
font-family: 'Droid Sans', 'Trebuchet MS', sans-serif;
font-size:14px;
color: #ffffff;
text-align:center;
padding-top:30px;
}
However, the footer is not showing up at all in any of my aspx files (Register.aspx, Index.aspx, Contact.aspx, and a couple of others). All of these files have
MasterPageFile="~/Site.master"
at the very top of the page.
What can be preventing these files from ‘seeing’ Site.master or from Site.master displaying the footer?
Thanks for any advice.
Did you put the CSS into it’s own stylesheet and link to it? If so, keep in mind that ASP.Net won’t adjust URLs by default so if your .master is in one directory, and your .aspx pages are in another, you need to ensure that the link references work properly.
You can do this by changing the link so it’s app root relative and has the runat="server" attribute like so:
<link href="~/styles/mystyle.css" rel="stylesheet" type="text/css" runat="server" />
You can also do the following without using runat="server"
<link href="<%= ResolveUrl("~/")%>styles/mystyle.css" rel="stylesheet" type="text/css" />
Hello Mark
Thanks for your reply.
I wasn’t using the logon.css file I have (it was blank). However, I have now copied and pasted the footer CSS into it and, using your:
<link href="<%= ResolveUrl("~/")%>styles/logon.css" rel="stylesheet" type="text/css" />
I have linked the various ASPX files to it. For some reason, only one file can see it and, even then, the footer, while centred, is about 100px off the bottom of the screen. That’s the worrying part! The other ASPX files are not displaying the footer at
all.
In terms of how the files are organised in Solution Explorer, they look like this:
Is that how they should be given I am using: <link href="<%= ResolveUrl("~/")%>styles/logon.css" rel="stylesheet" type="text/css" />
Thanks again.
Hi Bluenose,
If you want all your pages have footer css style,i suggest that you can put the css file reference to your master page.
According to the structure of your web project,it seems that your login.css file is not in the "styles" folder.
so you can try to the code :
<link href="login.css" rel="stylesheet" />
Or you can put your login.css to your Content folder ,then try the code below in your master page:
<link rel="Stylesheet" type="text/css" href="<%= ResolveUrl("~/Content/login.css") %>"/>Best Regards,
Kevin Shen.
Based on your image, it looks like your Logon.css file is actually located directly under your Account folder (unless my eyes are playing tricks on me), which would mean that you would reference it like so :
<link href="<%= ResolveUrl("~/Account/logon.css")%>" rel="stylesheet" type="text/css" />
As long as you reference this within your Master Page, any pages that inherit from it should also be able to see the same styles. One of the best ways to troubleshoot issues like these is to use the available Developer Tools (F12) within your browser. You
should be able to check the Console section and see any files that failed to load along with their appropriate paths that were attempted (which can be very helpful for troubleshooting).