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
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>I used frames, though it is not a prefered solution; but is sure simple and guaranteed to work.
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>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.