[adams0423]

I have a container that uses Relative Position at 1000 px width, auto height, and auto margins so that it is centered. The contents of this container use Absolute Positioning.

After the container I want to place a footer. No matter what I try the footer is appearing at the top of the screen, overlapping the container.

Thoughts/suggestions?

[Advertisements]

Why so wide and why absolute positioning? You're limiting your pages to those using higher then 800 x 600 res. With absolute positioning, no way will your page be flexible for those who may have a large screen res, but use a smaller browser window.

As for footer, do you have page online so you can leave an URL? Hate looking through a bunch of code onscreen.

Ron

[Major Payne]

Why so wide and why absolute positioning? You're limiting your pages to those using higher then 800 x 600 res. With absolute positioning, no way will your page be flexible for those who may have a large screen res, but use a smaller browser window.

As for footer, do you have page online so you can leave an URL? Hate looking through a bunch of code onscreen.

Ron

[adams0423]

Looking through recent traffic on my sites I'm finding that fewer than 3% of my visitors have resolutions less than 1024x768. Also I have seen very few flexible width sites (that aren't primarily text based) that have truly appealing appearance. I prefer to keep the control over the appearance using absolute.

But, we digress. I will post the structure of the site to the web shortly so that I can possibly get help with my problem. Thanks!

[adams0423]

Just for reveiw I set it up on a Geocities site. The images are broken here, I know, but the images aren't an important part of what I'm trying to resolve.

Specifically the div I have marked as "subnav" should be at the very bottom of the page and centered. Instead it is showing up at the top of the page, overlapping the container.

This was intended as a quick page to help out a friend, but this one glitch has driven me crazy!

Thanks for any help you can provide.

http://www.geocities.com/adams04230520

[Major Payne]

Try chancing the main #subnav style to:

#subnav {
	position: absolute;
	bottom: -600px;
	width: 70%; /* See note below */
	text-align: center;
	padding: 0 15%;
}

* Stupid hack lets IE see 100%, others see 70%. */
#subnav {
	\width: 100%;
	w\idth: 70%;
}

I would also put the links in a list like this:

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="history.html"> History</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="list.html"> List of Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>

And add this to CSS:

#nav li { list-style: none; }

Ron

[adams0423]

This would move my subnav to the bottom, but it wouldn't allow for varying amounts of text on the sub-pages. I was hoping to find a method that would drop the subnav to just below the container, whether the container extended down 200px or 2000px.

Any thoughts? Thanks for the help so far...

[Major Payne]

Your subnav is outside of the main content container if I remember correctly and will aways be at the bottom no matter how little or how much content you have on the page.

Ron

[adams0423]

That is the behavior that I would 'expect' as well, but the subnav is showing up at the very top of the page, overlapping the container.

Your subnav is outside of the main content container if I remember correctly and will aways be at the bottom no matter how little or how much content you have on the page.

Ron

[Major Payne]

I just looked at your CSS file for the subnav and I do not see the styling I posted (#5 above/below) on it. As you add content past the point where your subnav currently sits, you have to reset the value "bottom: -600px;" As it stands now, it will only work on the one page with that amount of content.

Let me see if I can come up with something more flexible since you will be using this on every page.

I guess you realize your pages will never validate nor have proper coding as long as you use Geocities?

Ron

Edited by Major Payne, 17 January 2008 - 01:14 PM.

[Major Payne]

Still working on it off/on, but this is one idea of keeping the subnav at the bottom and allowing the rest of page to scroll. Of course, colors, etc. would be your choice:

New Method

Keep in mine I'm doing this at 1024X768 rs on an 17-inch screen.

Ron

Edited by Major Payne, 17 January 2008 - 03:33 PM.

[adams0423]

I re-wrote the CSS file this morning switching from absolute positioning to floats and it seemed to have worked pretty well. Decreased the amount of code as well, so hopefully it will load faster.

It would be nice if there was a way to use a "clear" option without using floats, but I couldn't find a way.

www.geocities.com/adams04230520

Using this method the subnav clears properly, no matter how much text there is, and without having to modify the "height" on every file.

Thanks for your efforts on this MP!

[Major Payne]

Guess you didn't like my "New Method" page with the fixed footer. The way you have it now is a way I did it long ago, by just moving the footer divs inside the container for the text, but I figured you wanted it all the way across the bottom like it your text example. Guess I should have asked as we could have been done with this long ago.

Ron

[adams0423]

Actually even moving the footer div inside the container, it was still showing up overlapping the container div. I had tried that with several iterations of my testing without success.

Regardless, your help is much appreciated, and I may be using the fixed footer trick down the line for other needs