Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS Issue


  • Please log in to reply

#1
adams0423

adams0423

    Member

  • Member
  • PipPipPip
  • 123 posts
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?
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0

#3
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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!
  • 0

#4
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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
  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0

#6
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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...
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0

#8
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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


  • 0

#9
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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.

  • 0

#10
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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.

  • 0

#11
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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!
  • 0

#12
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
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
  • 0

#13
adams0423

adams0423

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 123 posts
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 :)
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP