Member Avatar for cavpollo

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:

<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

  • 4 Contributors
  • 4 Replies
  • 1K Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by cavpollo

Recommended Answers

All 4 Replies

Member Avatar for kvprajapati

It's a sticky footer.

<html>
    <head>
     <style>
    * {margin: 0; padding: 0} 
    html, body, #wrap {height: 100%}
    body > #wrap {height: auto; min-height: 100%}
    #main {padding-bottom: 100px}  /* must be same height as the footer */
    #footer {position: relative;
      margin-top: -100px; /* negative value of footer height */
    	height: 100px;
    	clear:both;
    }
    /* CLEAR FIX*/
    .clearfix:after {content: "."; display: block; height: 0;	clear: both; visibility: hidden}
    .clearfix {display: inline-block}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%}
    .clearfix {display: block}
    /* End hide from IE-mac */ 
    
    /* Do not touch styles above - see http://www.cssstickyfooter.com */
    
    body {
      background-image: url("Images/img.gif");
      background: #99CCFF;
      color: #FFF;
      font-size: 13px;
      font-weight: normal;
      font-family: verdana;
      text-align: center;
      overflow: auto;
    }
    
    div#banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 9em;
      background: url("Images/img2.gif") repeat-x;
      background: #000;
    }
    
    div#wrap {
      background: #666;
      width: 84em;
      margin-left: auto;
      margin-right: auto;
    }
    
    div#header {
      height: 16em;
      padding-top: 9em; /* banner height */
      background: url("Images/header/header-bg.png");
      background: #333; 
    }
    
    div#footer {
      background: #000;
      width: 84em;
      margin-left: auto;
      margin-right: auto;
    }
    
     </style>
    </head>
    <body>
     <div id="banner">Banner</div>
     <div id="wrap">
    	<div id="main" class="clearfix">
    	 <div id="header">Header</div> 
    	 <div id="content">
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content
       </div> <!-- end content -->
    	</div> <!-- end main -->
     </div>
     <div id="footer">
      Footer
     </div>
    </body>
</html>
commented: Helpful +0
Member Avatar for padtes

I used frames, though it is not a prefered solution; but is sure simple and guaranteed to work.

Member Avatar for cavpollo

tanx
made a few changes here and there
but it was really helpful =)

It's a sticky footer.

<html>
    <head>
     <style>
    * {margin: 0; padding: 0} 
    html, body, #wrap {height: 100%}
    body > #wrap {height: auto; min-height: 100%}
    #main {padding-bottom: 100px}  /* must be same height as the footer */
    #footer {position: relative;
      margin-top: -100px; /* negative value of footer height */
    	height: 100px;
    	clear:both;
    }
    /* CLEAR FIX*/
    .clearfix:after {content: "."; display: block; height: 0;	clear: both; visibility: hidden}
    .clearfix {display: inline-block}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%}
    .clearfix {display: block}
    /* End hide from IE-mac */ 
    
    /* Do not touch styles above - see http://www.cssstickyfooter.com */
    
    body {
      background-image: url("Images/img.gif");
      background: #99CCFF;
      color: #FFF;
      font-size: 13px;
      font-weight: normal;
      font-family: verdana;
      text-align: center;
      overflow: auto;
    }
    
    div#banner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 9em;
      background: url("Images/img2.gif") repeat-x;
      background: #000;
    }
    
    div#wrap {
      background: #666;
      width: 84em;
      margin-left: auto;
      margin-right: auto;
    }
    
    div#header {
      height: 16em;
      padding-top: 9em; /* banner height */
      background: url("Images/header/header-bg.png");
      background: #333; 
    }
    
    div#footer {
      background: #000;
      width: 84em;
      margin-left: auto;
      margin-right: auto;
    }
    
     </style>
    </head>
    <body>
     <div id="banner">Banner</div>
     <div id="wrap">
    	<div id="main" class="clearfix">
    	 <div id="header">Header</div> 
    	 <div id="content">
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content<br />
         Content
       </div> <!-- end content -->
    	</div> <!-- end main -->
     </div>
     <div id="footer">
      Footer
     </div>
    </body>
</html>
Edited by cavpollo because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.