ASP.NET RSS ASP.NET RSS

Master Page Footer

Please support our ASP.NET advertiser: Intel Parallel Studio Home
Thread Solved

•
•
Join Date: Sep 2009
Posts: 9
Reputation: cavpollo is an unknown quantity at this point 
Solved Threads: 0
cavpollo cavpollo is offline Offline
Newbie Poster

Master Page Footer

 
0
  #1
Oct 1st, 2009
Hi there, I got a master page and I need a panel to stay at the bottom of the web page.

This is my panel:
ASP.NET Syntax (Toggle Plain Text) 
  1. <center><asp:Panel ID="uxButtonsPanel" runat="server" BackColor="Transparent" Height="10px" Width="650px" BorderColor="#C00000" BorderStyle="Groove" BorderWidth="6px" HorizontalAlign="Center" Direction="LeftToRight"></asp:Panel></center>

I've looked in many places on the internet and many mention the use of CSS code... frankly, I don't know where that goes or how to use it...

help? tanx
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2009
Posts: 3,231
Reputation: sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of sknake has much to be proud of 
Solved Threads: 576
Sponsor
sknake's Avatar
sknake sknake is offline Offline
.NET Enthusiast

Re: Master Page Footer

 
0
  #2
Oct 1st, 2009
Master Pages with CSS
Scott Knake
Custom Software Development
Apex Software, Inc.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2008
Posts: 2,636
Reputation: adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of adatapost has much to be proud of 
Solved Threads: 472
Moderator
adatapost's Avatar
adatapost adatapost is offline Offline
Posting Maven

Re: Master Page Footer

 
1
  #3
Oct 1st, 2009
It's a sticky footer.
ASP.NET Syntax (Toggle Plain Text) 
  1.  <html>
  2.     <head>
  3.      <style>
  4.     * {margin: 0; padding: 0} 
  5.     html, body, #wrap {height: 100%}
  6.     body > #wrap {height: auto; min-height: 100%}
  7.     #main {padding-bottom: 100px}  /* must be same height as the footer */
  8.     #footer {position: relative;
  9.       margin-top: -100px; /* negative value of footer height */
  10.     	height: 100px;
  11.     	clear:both;
  12.     }
  13.     /* CLEAR FIX*/
  14.     .clearfix:after {content: "."; display: block; height: 0;	clear: both; visibility: hidden}
  15.     .clearfix {display: inline-block}
  16.     /* Hides from IE-mac \*/
  17.     * html .clearfix { height: 1%}
  18.     .clearfix {display: block}
  19.     /* End hide from IE-mac */ 
  20.  
  21.     /* Do not touch styles above - see http://www.cssstickyfooter.com */
  22.  
  23.     body {
  24.       background-image: url("Images/img.gif");
  25.       background: #99CCFF;
  26.       color: #FFF;
  27.       font-size: 13px;
  28.       font-weight: normal;
  29.       font-family: verdana;
  30.       text-align: center;
  31.       overflow: auto;
  32.     }
  33.  
  34.     div#banner {
  35.       position: absolute;
  36.       top: 0;
  37.       left: 0;
  38.       width: 100%;
  39.       height: 9em;
  40.       background: url("Images/img2.gif") repeat-x;
  41.       background: #000;
  42.     }
  43.  
  44.     div#wrap {
  45.       background: #666;
  46.       width: 84em;
  47.       margin-left: auto;
  48.       margin-right: auto;
  49.     }
  50.  
  51.     div#header {
  52.       height: 16em;
  53.       padding-top: 9em; /* banner height */
  54.       background: url("Images/header/header-bg.png");
  55.       background: #333; 
  56.     }
  57.  
  58.     div#footer {
  59.       background: #000;
  60.       width: 84em;
  61.       margin-left: auto;
  62.       margin-right: auto;
  63.     }
  64.  
  65.      </style>
  66.     </head>
  67.     <body>
  68.      <div id="banner">Banner</div>
  69.      <div id="wrap">
  70.     	<div id="main" class="clearfix">
  71.     	 <div id="header">Header</div> 
  72.     	 <div id="content">
  73.          Content<br />
  74.          Content<br />
  75.          Content<br />
  76.          Content<br />
  77.          Content<br />
  78.          Content<br />
  79.          Content<br />
  80.          Content<br />
  81.          Content<br />
  82.          Content<br />
  83.          Content
  84.        </div> <!-- end content -->
  85.     	</div> <!-- end main -->
  86.      </div>
  87.      <div id="footer">
  88.       Footer
  89.      </div>
  90.     </body>
  91. </html>
Failure is not fatal, but failure to change might be. - John Wooden
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2009
Posts: 32
Reputation: padtes is an unknown quantity at this point 
Solved Threads: 5
padtes's Avatar
padtes padtes is offline Offline
Light Poster

Re: Master Page Footer

 
0
  #4
Oct 2nd, 2009
I used frames, though it is not a prefered solution; but is sure simple and guaranteed to work.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 9
Reputation: cavpollo is an unknown quantity at this point 
Solved Threads: 0
cavpollo cavpollo is offline Offline
Newbie Poster
 
0
  #5
Oct 5th, 2009
tanx
made a few changes here and there
but it was really helpful =)

•
•
•
•
Originally Posted by adatapost View Post
It's a sticky footer.
ASP.NET Syntax (Toggle Plain Text) 
  1.  <html>
  2.     <head>
  3.      <style>
  4.     * {margin: 0; padding: 0} 
  5.     html, body, #wrap {height: 100%}
  6.     body > #wrap {height: auto; min-height: 100%}
  7.     #main {padding-bottom: 100px}  /* must be same height as the footer */
  8.     #footer {position: relative;
  9.       margin-top: -100px; /* negative value of footer height */
  10.     	height: 100px;
  11.     	clear:both;
  12.     }
  13.     /* CLEAR FIX*/
  14.     .clearfix:after {content: "."; display: block; height: 0;	clear: both; visibility: hidden}
  15.     .clearfix {display: inline-block}
  16.     /* Hides from IE-mac \*/
  17.     * html .clearfix { height: 1%}
  18.     .clearfix {display: block}
  19.     /* End hide from IE-mac */ 
  20.  
  21.     /* Do not touch styles above - see http://www.cssstickyfooter.com */
  22.  
  23.     body {
  24.       background-image: url("Images/img.gif");
  25.       background: #99CCFF;
  26.       color: #FFF;
  27.       font-size: 13px;
  28.       font-weight: normal;
  29.       font-family: verdana;
  30.       text-align: center;
  31.       overflow: auto;
  32.     }
  33.  
  34.     div#banner {
  35.       position: absolute;
  36.       top: 0;
  37.       left: 0;
  38.       width: 100%;
  39.       height: 9em;
  40.       background: url("Images/img2.gif") repeat-x;
  41.       background: #000;
  42.     }
  43.  
  44.     div#wrap {
  45.       background: #666;
  46.       width: 84em;
  47.       margin-left: auto;
  48.       margin-right: auto;
  49.     }
  50.  
  51.     div#header {
  52.       height: 16em;
  53.       padding-top: 9em; /* banner height */
  54.       background: url("Images/header/header-bg.png");
  55.       background: #333; 
  56.     }
  57.  
  58.     div#footer {
  59.       background: #000;
  60.       width: 84em;
  61.       margin-left: auto;
  62.       margin-right: auto;
  63.     }
  64.  
  65.      </style>
  66.     </head>
  67.     <body>
  68.      <div id="banner">Banner</div>
  69.      <div id="wrap">
  70.     	<div id="main" class="clearfix">
  71.     	 <div id="header">Header</div> 
  72.     	 <div id="content">
  73.          Content<br />
  74.          Content<br />
  75.          Content<br />
  76.          Content<br />
  77.          Content<br />
  78.          Content<br />
  79.          Content<br />
  80.          Content<br />
  81.          Content<br />
  82.          Content<br />
  83.          Content
  84.        </div> <!-- end content -->
  85.     	</div> <!-- end main -->
  86.      </div>
  87.      <div id="footer">
  88.       Footer
  89.      </div>
  90.     </body>
  91. </html>
Last edited by cavpollo; Oct 5th, 2009 at 7:12 pm.
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
bottomasp.net

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the ASP.NET Forum
Thread Tools Search this Thread



bottomasp.net
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC