First off, I should note that I am new to this world. I'm in the process of creating a site for a business I'm launching, and am using a trial of Dreamweaver to build the site.
I would like to lock the header, which will contain my company's logo set towards the left, and a group of page buttons taking up the rest of the space. I have not created the buttons yet, but I have placed the logo.
I'm having some issues with this:
Text + pictures in the body jumps up in place once I set the header to have a fixed position, instead of starting in the position I set it in on the page before the "position: fixed;" code was added. I've tried to add space, padding, margin, etc., and nothing left a desirable result - leaving new problems such as adding the needed space back to the top, but then adding this space between paragraphs (where it shouldn't be), or moving the actual header downward, etc.
Text + pictures from the body is visible in the blank section of the header next to the logo (where I haven't added navigation buttons yet, with only the background color). Is this how it should be? I had imagined the body would disappear under this section, even if all that is currently there is a background color.
I'm using what I believe to be a CSS based photo album (taken from http://iamacamera.org/sandbox/photoshuffler/) on the front page. Aside from the initial picture shown (which is in a div, instead of the CSS rotation), the rotating album photos end up overlapping the part of the logo in the header it intersects with, instead of rolling up under it (like the div photo).
Not sure what to do - I've been experimenting on and off for days, but feel lost now. Please advise if I need to paste the code,etc. here - if so, I'll need to remove the actual text from the site, as it contains info I need to keep private for now.
Hello MMM717,
Not much to go on with the information you've provided. A description of the problem doesn't do much for finding the cause. You can post code here but a link to the test site is always best.
For your second question, about the text showing through under your header. If an element has no background color, it is by default transparent.
Thanks Excavator. I did have a background color set in the header, but content was still rolling up visibly through it.
I've pasted the code below, though with all private info replaced with generic. The photo rotation coding came from the site/designer linked in my original post.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic";
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For
consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they
contain. Remember that what you do here will cascade to the .nav list unless you write a more specific
selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape
from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the
divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an
alternate method. */
text-shadow: #A2C8CA 0 0 1px;
-webkit-text-stroke: 0.65px
-webkit-font-smoothing: antialiased;
color: #AED6D9;
font-weight: 525;
font-size: 11pt;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it
is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the
hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience
as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image
placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #603B3D;
text-align: left;
font-size: 0pt;
position: fixed;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on
their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border
to the div itself, it will be added to the width you define to create the *total* width. You may also choose to
remove the padding on the element in the div and place a second div within it with no width and the padding
necessary for your design.
*/
.content {
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #CCC49F;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the
element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the
element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated
div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style><script type="text/javascript">
<!--//--><![CDATA[//><!--
//
// CSS Photo Shuffler v1.0 by
// Carl Camera
// http://iamacamera.org
//
// SetOpacity Function and inpiration from Photo Fade by
// Richard Rutter
// http://clagnut.com
//
// License: Creative Commons Attribution 2.5 License
// http://creativecommons.org/licenses/by/2.5/
//
// Customize your photo shuffle settings
//
// * Surround the target < img /> with a < div >. specify id= in both
// * The first and final photo displayed is in the html <img> tag
// * The array contains paths to photos you want in the rotation.
// If you want the first photo in the rotation, then it's best to
// put it as the final array image. All photos must be same dimension
// * The rotations variable specifies how many times to repeat array.
// images. zero is a valid rotation value.
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"scene 97 WM.jpg",
"scene 98 WM.jpg",
"scene 20 WM.jpg",
"scene 43 WM.jpg",
"scene 39 WM.jpg",
"scene 60 WM.jpg",
"scene 79 WM.jpg",
"scene 96 WM.jpg"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 100;
// End Customization section
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg
[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
//--><!]]>
</script>
<!--------------------------------------------------------------------------------
<!--
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array--></head>
<body>
<div class="container">
<div class="header"><img src="LOGO FILE" width="443" height="186" alt="Logo 443"></div>
<div class="content">
<p> </p>
<div id="photodiv"><center>
<img id="photoimg" src="* WM.jpg" /></center>
</div>
<p> </p>
<p>MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT.</p>
<p> </p>
<p>MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT.</p>
<p> </p>
<p>MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT.<br>
</p>
<p> </p>
<p></p>
<h1> </h1>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Last edited by VIPStephan; 11-11-2012 at 09:25 PM..
Reason: added code BB tags and removed links
If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
I know this thread is marked as resolved, but I have a related question and thought it best to tie it with this particular post.
I'd like to keep the footer fixed in place at all times, no matter where one is scrolling through the main content of a page - like you did for me with the header.
I tried experimenting with adding a fixed position to the footer CSS, also adding height and width to it (using 10px for the height - to match the current padding - and 960px for the width). Nothing seems to make it stick there. At one point, something I did even made an additional scroll bar appear on the right side of the container (which was not desired at all!).
I tried using what you wrote to fix the header to the top as a reference to follow for the footer, but I'm not doing something right. I'd appreciate your assistance again...
Hello MMM717,
It's easy to add position: fixed; footer outside of your .container. Something like this might get you started (too many changes to highlight them all) -
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #C9D6A0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
text-shadow: #A2C8CA 0 0 1px;
-webkit-text-stroke: 0.65px -webkit-font-smoothing: antialiased;
color: #AED6D9;
font-weight: 525;
font-size: 11pt;
line-height: 150%;
}
a img { border: none; }
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { text-decoration: none; }
.container {
width: 960px;
background: #603B3D;
margin: 0 auto;
overflow: auto;
}
.header {
height: 186px;
width: 960px;
background: #f00;
text-align: left;
font-size: 0pt;
position: fixed;
}
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}
.footer {
height: 50px;
width: 960px;
margin: 0 0 0 -480px;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 50%;
background: #CCC49F;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
body, td, th { color: #AED6D9; }
</style>
<script type="text/javascript">
var gblPhotoShufflerDivId = "photodiv";
var gblPhotoShufflerImgId = "photoimg";
var gblImg = new Array(
"scene 97 WM.jpg",
"scene 98 WM.jpg",
"scene 20 WM.jpg",
"scene 43 WM.jpg",
"scene 39 WM.jpg",
"scene 60 WM.jpg",
"scene 79 WM.jpg",
"scene 96 WM.jpg"
);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;
var gblRotations = 100;
var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);
window.onload = photoShufflerLaunch;
function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg
[gblOnDeck] + ')';
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}
function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (--gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="LOGO FILE" width="443" height="186" alt="Logo 443"></div>
<div class="content">
<p> </p>
<div id="photodiv">
<center>
<img id="photoimg" src="* WM.jpg" />
</center>
</div>
<p> </p>
<p>MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT. MY FIRST PARAGRAPH OF TEXT.</p>
<p> </p>
<p>MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT. MY SECOND PARAGRAPH OF TEXT.</p>
<p> </p>
<p>MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT. MY LAST PARAGRAPH OF TEXT.<br>
</p>
<p> </p>
<p></p>
<h1> </h1>
<strong>
<!-- end .content -->
</strong></div>
<!-- end .container --></div>
<div class="footer"><p>Footer</p><!-- end .footer --></div>
</body>
</html>
Thanks Excavator - that works, except for one problem.
I needed a shorter height - for now I set it at 15px. When I try to center the content horizontally, things are getting cutoff vertically at the bottom - where the lower part of the content seems to be hidden beneath the screen. It looks fine as normal, left justified.
What does the negative bottom margin in the footer do, and the choice of 480px? Also the 50% left margin there. Is any of this having an influence on the above issue? Just curious so I can have a better understanding of what's going on...
What does the negative bottom margin in the footer do, and the choice of 480px? Also the 50% left margin there. Is any of this having an influence on the above issue? Just curious so I can have a better understanding of what's going on...
The -480px is half the width of .footer which is positioned 50% from the left edge of the screen.
BTW - The Center code pushing the content down seems to have been from having the <CENTER> tag placed before the <p> and a <SPAN> code I used to adjust the size of the text there. When I moved it before the paragraph code, it looked OK.
(I'd like to revive this old thread. I had to put off getting this site (and its associated business) launched for a few months for various reasons, but am getting back into working on it recently.)
I've noticed that when I hit page-down while viewing it locally (in the three browsers I have on this computer - Chrome, Firefox, & IE 10) the text scrolls a whole page length downward. On a page without a fixed header that would be OK, but with such a header I need some sort of code added so that when someone scrolls using the page buttons, one doesn't miss seeing any text without having to move back slightly. As it is, using a page down command (for instance) over-scrolls re content by the height of the header (and possibly the bit of padding below it). Obviously that's not good, and makes reading the page harder for people.
I need to make things so that when one hits the page down/up, it only moves up to the point that was last visible. I've tried a few solutions I've found from digging around online to fix this, but so far I haven't gotten any of them to work.
I've changed some things in the page since my original post - my updated code (with actual content removed) is pasted below. I hope I've worded this correctly/properly - if anything I wrote is not clear, please let me know and I'll clarify. Thanks again...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>XXX</title>
<meta name="description" content="XXX">
<meta name="keywords" content="XXX">
<meta name="geo.region" content="XXX">
<meta name="geo.placename" content="XXX">
<meta name="geo.position" content="XXX">
<meta name="ICBM" content="XXX">
<style type="text/css">
<!--
html, body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic";
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero
padding and margin on lists. For consistency, you can either specify the
amounts you want here, or on the list items (LI, DT, DD) they contain. Remember
that what you do here will cascade to the .nav list unless you write a more
specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where
margins can escape from their containing div. The remaining bottom margin will
hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements
within the divs, instead of the divs themselves, gets rid of any box model
math. A nested div with side padding can also be used as an alternate method.
*/
text-shadow: #A2C8CA 0 0 1px;
font-smoothing: antialiased;
text-rendering: optimizeLegibility
color: #AED6D9;
font-weight: 500;
font-size: .92em;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some
browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the
group of selectors that create the hover effect. ~~ */
a:link {
color: #AED6D9;
text-decoration: none; /* unless you style your links to look extremely
unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #AED6D9;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard
navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
overflow: auto;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width,
centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your
layout. It contains an image placeholder that should be replaced with your own
linked logo ~~ */
.header {
height: 200px;
width: 960px;
background-color: #603B3D;
text-align: left;
position: fixed;
z-index: 1000;
}
.header img {float: left;}
.header ul {
margin: 5px 0 0 400px;
text-align: center;
list-style: none;
}
.header ul li {
width: 127px;
margin: 0px;
float: left;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements
within this div have padding on their sides. This saves you from any "box model
math". Keep in mind, if you add any side padding or border to the div itself,
it will be added to the width you define to create the *total* width. You may
also choose to remove the padding on the element in the div and place a second
div within it with no width and the padding necessary for your design.
*/
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}
.bigger { font-size:85%; }
/* ~~ The footer ~~ */
.footer {
height: 15px;
width: 960px;
margin: 0 0 0 -480px;
padding: 10px 0;
position: fixed;
bottom: 0;
left: 50%;
background: #603B3D;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The
floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The
floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final
element following the last floated div (within the #container) if the #footer
is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style>
<link href="century_gothic_font/stylesheet.css" rel="stylesheet"
type="text/css">
<link href="century_gothic_bold_font/stylesheet.css" rel="stylesheet"
type="text/css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next
('img').fadeIn().end().appendTo('.fadein');}, 7250);
});
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
</ul></div>
<div class="content">
<p> </p><div style="float: left; width: 80px;"><img src="Brown
fill.png" alt="left side fill"></div><div style= "display:block;max-height:
429px; overflow:hidden;" id="slideshow">
<div class="fadein">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX">
<img src="XXX" alt="XXX"></div></div>
<br>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out on without
having to adjust their position on the page with arrow keys, a thumbwheel,
etc.</p>
<br>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out on without
having to adjust their position on the page with arrow keys, a thumbwheel,
etc.</p>
<br>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc.
</p>
<br>
<p></p>
<h1> </h1>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<CENTER><p><span class=bigger><a target="_blank" href="XXX">XXX <img
src="XXX" width="15" height="15" alt="XXX"></a>, <a target="_blank"
href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a
target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14"
alt="XXX"></a></span></p></CENTER>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>
Before you post, read our: 
