I write this post because someone asked me how to create footer in an asp page. That's the main reason. However, after writing a lot about Sql Server functions (and I don't think I am really finished with that!), I indeed needed a break. Anyway...
Creating a footer for your asp page is very easy. I will show you how to do it with css styles, assuming you have a default.asp page which is your home page, an include named footer.asp which is your footer and an external css.css page containing your styles.
The default.asp page
Your default page should be something like:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Page</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
This is the main body text of your page
<!--#include file="footer.asp" -->
</body>
</html>
That is just a very simple example, complete the code with whatever you want, and save it as default.asp.
The footer.asp page
In the footer.asp page you put the content of your footer. Something like:
<table class="footer">
<tr>
<td><div align="center">This is the place where you put the footer text</div></td>
</tr>
</table>
Save it as footer.asp.As you may have noticed, we used a class named "footer" in our table tag. That is what will style the table.
The css.css file
The css.css file is where we style the table in the footer.asp page. The code should be:
.footer {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:60px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
The code will place the footer at the bottom of the home page with an absolute positioning. Width, height, font-family, font-size and text-decoration can be changed according to your needs.
If I want a header?
The css style can be easily modified in order to convert your footer in a header. In the above css style, replace:
bottom: 0px;
with
top: 0px;
and you're done.Enjoy yourself and happy programming!
Excellent! Solved my problem. Thanks.
ReplyDeleteFernando, I'm glad it helped you!
DeleteKeep on following...
Love it, got appreciation from my boss after implementing your css. thanks bro..
ReplyDeleteThanks to you, Sami!
DeleteThanks for this article. It's simple but powerful. I created the header as you asked and I included the include file for the header above the default.asp page but the body text appears at the top instead of the header. So this is what I would like to accomplish:
ReplyDeleteinclude file for header.asp
content
include file for footer.asp
Do I have to add some code for content in css file?
Thanks again.
Nope
DeleteJust follow the rules for both header and footer.
I got it working for the default.asp page with header and footer. Thanks again.
DeleteHowever, when I created another asp page which include header and footer in a sub folder then the css for header/footer don't seem to work correctly.
Here is my folder structure:
Root
==>default.asp
==>header.asp
==>footer.asp
==>Home [folder]
==> ===>AboutUs [folder]
==> ===> ===>AboutUs.asp [file]
This is my AboutUs.asp file:
The body tag goes here and I removed the body tag because it will display an error message on your website [Your HTML cannot be accepted: Tag is not allowed: BODY]
This is AboutUs page
When I loaded AboutUs.asp page, the header/footer css doesn't kick in.
Could you please tell me what I did wrong?
Thanks so much.
Check the links
DeleteMy link works OK. I know this is very tricky because my other asp pages are stored inside folder/sub folder.
ReplyDeleteYour help is greatly appreciated.
Here it goes again:
I have a default.asp page that has a link that links to [AboutUs.asp] and the path for it is [ root > Home > AboutUs > AboutUs.asp ]. In the AboutUs.asp page I have the following code:
============================
Include file for header.asp (
I cannot see the code. It is impossible to help you this way. Anyway, try to put the CSS inside the header and footer pages that you include. Check the links for the includes.
DeleteThanks again for your support. I tried to cut and paste my code into this post but I don't think your forum accepts the source code. I kept getting this error message: [Your HTML cannot be accepted: Tag is not allowed: HTML].
ReplyDeleteTo summarize:
The header is the same as your header.asp except I change the [bottom] to [top] and I added the code for head, title to the header.
The footer is the same as your footer.asp
The AboutUs.asp page is a simple page with the include file for header and footer and a line of text in between.
The issue is the css for header/footer does't kick in when I load AboutUs.asp page. It's got to have something to do with the path itself (../../header.asp). I googled it for days but couldn't come up with any resolution.
I appreciate for any input you might provide.
Is the CSS not working or you don't see the header and footer at all?
DeleteAs said, check relative or absolute path for includes. Can't help you more. Sorry.
Well, it works. Thanks so much. I put the wrong path in the css. Thanks so much again.
ReplyDeleteGreat! Thanks.
Delete