ASCX as Header/Footer

  • Thread starter Thread starter Peter Wu
  • Start date Start date
P

Peter Wu

Hello,

I want to create a Header and Footer for every ASPX page I build. I
created 2 Web user controls respectively and placed them in an ASPX page.
The problem is that I cannot position the Footer to be always at the
bottom of the page. The Header and Footer are always together at the top
of the page.

Was I missing anything? Thanks!
 
Sounds like an html prob.

A usercontrol will show up where it has been placed with in your document
structure. Similar to SSI.
 
Ron Vecchi said:
Sounds like an html prob.

A usercontrol will show up where it has been placed with in your
document structure. Similar to SSI.
Click to expand...

The problem is that I cannot move it to the bottom of the page. :-(
 
Double check to make sure your HTML is well formed in your page and ASCX
(and the combined HTML output.)
Even if it was well formed to begin with, sometimes the designer "helps" you
by adding closing HTML elements in places where you didn't want them.
 
Steve C. Orr said:
Just drag or cut/paste the footer control down to the bottom of the page
where you want it.
Click to expand...

Unfortunately, it does not work. :(

Here goes my page in HTML. Thanks.


<%@ Page language="c#" Codebehind="Login.aspx.cs" AutoEventWireup="false"
Inherits="WUTT.Login" %>
<%@ Register TagPrefix="uc1" TagName="Header" Src="Header.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Footer" Src="Footer.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Login</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<LINK href="Style.css" type="text/css" rel="stylesheet">
</HEAD>
<body ms_positioning="GridLayout">
<p></p>
<form id="Form1" method="post" runat="server">
<uc1:Header id="Header1" runat="server"></uc1:Header>

<asp:TextBox id="txtUsername" style="Z-INDEX: 101; LEFT: 462px;
POSITION: absolute; TOP: 187px"
runat="server" Width="240px" tabIndex="1" Height="22"></asp:TextBox>
<asp:TextBox id="txtPassword" style="Z-INDEX: 102; LEFT: 462px;
POSITION: absolute; TOP: 216px"
runat="server" Width="240px" TextMode="Password" tabIndex="2"
Height="22"></asp:TextBox>
<DIV style="DISPLAY: inline; Z-INDEX: 103; LEFT: 330px; WIDTH: 121px;
POSITION: absolute; TOP: 187px; HEIGHT: 22px"
ms_positioning="FlowLayout">
<P>Username:</P>
</DIV>
<DIV style="DISPLAY: inline; Z-INDEX: 104; LEFT: 330px; WIDTH: 121px;
POSITION: absolute; TOP: 216px; HEIGHT: 22px"
ms_positioning="FlowLayout">Password:</DIV>
<asp:Button id="btnLogin" style="Z-INDEX: 105; LEFT: 489px; POSITION:
absolute; TOP: 270px"
runat="server" Width="104px" Text="Login" tabIndex="2"
Height="24px"></asp:Button><INPUT style="Z-INDEX: 106; LEFT: 599px; WIDTH:
104px; POSITION: absolute; TOP: 270px; HEIGHT: 24px"
type="reset" size="100px" value="Reset" tabIndex="3">
<asp:Label id="lblWarning" style="Z-INDEX: 107; LEFT: 339px; POSITION:
absolute; TOP: 331px"
runat="server" Width="366px" Visible="False" Font-Overline="True"
Font-Underline="True"
Font-Bold="True" ForeColor="Red" Height="7px">* Bad username or
password. Please try again!</asp:Label>
<DIV style="DISPLAY: inline; Z-INDEX: 108; LEFT: 80px; WIDTH: 206px;
POSITION: absolute; TOP: 50px; HEIGHT: 28px"
ms_positioning="FlowLayout">
<P>Login</P>
</DIV>
<DIV style="DISPLAY: inline; FONT-SIZE: larger; Z-INDEX: 109; LEFT:
288px; WIDTH: 384px; POSITION: absolute; TOP: 120px; HEIGHT: 16px"
ms_positioning="FlowLayout">Welcome! Please enter your username and
password.
</DIV>

<uc1:Footer id="Footer1" runat="server"></uc1:Footer>
</form>
</body>
</HTML>
 
I use all user controls on most of my sites. I use header, top navigation,
left navigation content to the right and a footer. Each of these elements is
a user control. The trick is to be sure that your code makes sense from top
to bottom tracking it all the way through your user controls as if it were
one page without user controls.

There is an example of this method at http://islandclub.us

HTH
 
Steve C. Orr said:
Double check to make sure your HTML is well formed in your page and ASCX
(and the combined HTML output.)
Even if it was well formed to begin with, sometimes the designer
"helps" you by adding closing HTML elements in places where you didn't
want them.
Click to expand...

I think ASP.NET generates the HTML code correctly. Now, it is the IE
problem. Why doesn 't IE display the copyright claim at the bottom?
Thanks.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Login</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<LINK href="Style.css" type="text/css" rel="stylesheet">
</HEAD>
<body>
<form name="Form1" method="post"
action="Login.aspx?ReturnUrl=%2fWUTT%2fMainMenu.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE"
value="dDw2MjkwNDU3Mzg7Oz75y+cu2/Z/dMJFgwdibwILNJVAyg==" />

<input name="txtUsername" type="text" id="txtUsername" tabindex="1"
style="height:22px;width:240px;Z-INDEX: 101; LEFT: 462px; POSITION:
absolute; TOP: 187px" />
</form>

<div>Copyright
This program is protected by
US and international copyright law.</div>

</body>
</HTML>
 
Try putting the header and footer into separate files.
That way you can use them anywhere you want.

HTH
 
Why not try creating a base page class that already has
the header and footer interface defined. Then all your
pages can just derive from this.
 
Rory said:
Why not try creating a base page class that already has
the header and footer interface defined. Then all your
pages can just derive from this.
Click to expand...

Any samples how to do this? Thanks.
 
Steve C. Orr said:
OIC, it looks like you are using GridLayout.
Notice how all your web controls have pixel positions listed? Well your
header and footer do not. This is basically the same as saying that
the top & left are 0,0 (at the top of the form)
Either give them pixel positions or switch your page to Flow Layout and
get rid of all the positioning HTML code.
Click to expand...

I still use GridLayout for the form and give the Footer the pixel position
like this:

<uc1:Footer id="Footer1" runat="server" style="Z-INDEX: 107; LEFT: 0px;
POSITION: absolute; TOP: 500px"></uc1:Footer>

But it does not help. The rendered HTML just loses the position specified.
Please help!
 
Back
Top