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.

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

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

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

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

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?