...

View Full Version : Resolved Creating a page with fixed header problems



MMM717
11-11-2012, 07:39 AM
Hello,

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.

Thanks in advance! :)

Excavator
11-11-2012, 08:48 AM
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.

MMM717
11-11-2012, 06:46 PM
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>&nbsp;</p>
<div id="photodiv"><center>
<img id="photoimg" src="* WM.jpg" /></center>
</div>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
<p></p>
<h1>&nbsp;</h1>
<strong>
<!-- end .content -->
</strong></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>

VIPStephan
11-11-2012, 09:24 PM
If you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

Excavator
11-11-2012, 09:53 PM
Thanks Excavator. I did have a background color set in the header, but content was still rolling up visibly through it.

Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red -

.container {
width: 960px;
overflow: auto;
background-color: #603B3D;
margin: 0 auto;
}
.header {
height: 186px;
width: 960px;
background-color: #603B3D;
text-align: left;
font-size: 0pt;
position: fixed;
}
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}

MMM717
11-11-2012, 09:59 PM
If you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small # icon above the reply field.

Sorry - I forgot. Thanks...

MMM717
11-11-2012, 10:00 PM
Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red...

Thanks! I'll try it and let you know how I do.

MMM717
11-11-2012, 10:26 PM
Excavator, that works perfectly. Thanks again so much...

Excavator
11-11-2012, 11:04 PM
Anytime :thumbsup:

MMM717
11-22-2012, 07:12 AM
Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red -

.container {
width: 960px;
overflow: auto;
background-color: #603B3D;
margin: 0 auto;
}
.header {
height: 186px;
width: 960px;
background-color: #603B3D;
text-align: left;
font-size: 0pt;
position: fixed;
}
.content {
margin: 186px 0 0;
padding: 10px 0;
font-family: "Century Gothic";
font-size: 12pt;
}



Hello Excavator,

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...

Thanks again. Happy Thanksgiving!

Excavator
11-22-2012, 05:51 PM
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) -
<!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>&nbsp;</p>
<div id="photodiv">
<center>
<img id="photoimg" src="* WM.jpg" />
</center>
</div>
<p>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
<p></p>
<h1>&nbsp;</h1>
<strong>
<!-- end .content -->
</strong></div>
<!-- end .container --></div>
<div class="footer"><p>Footer</p><!-- end .footer --></div>
</body>
</html>

Happy Thanksgiving !

MMM717
11-23-2012, 05:49 AM
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...

Excavator
11-23-2012, 04:10 PM
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.

MMM717
11-23-2012, 11:29 PM
Great - thanks again.

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.

MMM717
05-08-2013, 10:30 PM
(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...



<!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>&nbsp;</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>&nbsp;</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>

MMM717
05-18-2013, 09:07 AM
I'm still trying to get this problem of scrolling too far (due to header height) with the page buttons (the "resolved" status was for my earlier problem). I came across this on another site/forum:

http://www.cssplay.com/forum/viewtopic.php?t=570&sid=a2b41956cd85ed483a648975b8b9eefe

I tried adding a height setting in the content CSS, but all that did was limit the total amount of content that could be seen on the page at all (which is useless) and didn't limit the scrolling performed with the page buttons.

I have no interest in removing the fixed position on my header, so that's not an option. I have no problem with implementing a jQuery solution if that exists, though if it could be done without, that's even better. Whatever the solution, I don't want it to place an additional scrollbar on the page next to the one from the browser...

Facebook (for instance) has a fixed header with the (admittedly small) blue strip at the top. I never see any missing text when paging down on my news feed - if anything, it scrolls down less than a page length, which I wouldn't have much of a problem with vs. overdoing it. How does Facebook achieve its control over the page button scrolling length? Java? jQuery? Pure CSS? Something else?

Help! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum