Getting an image to always sit on top of sticky footer

I’m trying to get my character to always stand on top of the sticky footer. How do I achieve this?

here is my website:
Untitled Document

(let me know if any other info is needed to solve this problem)

Hi,

Place the cartoon in the footer and then absolutely place it above the footer. Preserve the 500px space with a min-height on an element in the main section.

The basics with a working sticky footer.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
#outer {
    background:#ffffcc;
    margin:auto;
    min-height:100%;
    margin-top:-202px;/*footer height - this drags the outer 202px up through the top of the monitor */
    text-align:left;
    clear:both;
}
* html #outer {
    height:100%
}
#header {
    border-top:202px solid #fff; /* soak up negative margin and allows header to start at top of page*/
}
#footer {/* footer now sits at bottom of window*/
    margin:auto;
    height:199px;/* must match negative margin of #outer */
    clear:both;/* for opera 11*/
    background: url(http://www.brysonprice.com/img/homefootgrad.png);
    border-top:3px solid #282828;
    position:relative;/* stacking context for cartoon */
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
h1, h2, p {
    padding:0 10px;
}
#outer:after {
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.cartoon {
    text-align: center;
    width:100%;
    position:absolute;
    height:500px;
    top:-503px;
    background:blue;/* for testing */
    margin:auto;
}
#main {
    min-height:503px;/* preserve height of cartoon*/
}
* html #main {
    height:503px
}
</style>
</head>
<body>
<div id="outer">
    <!-- border top on header soaks up sticky footer so son;t remove header -->
    <div id="header">
        <h1>Sticky Footer</h1>
    </div>
    <!-- cartoon will sit over the space preserved by #main -->
    <div id="main"></div>
</div>
</div>
<div id="footer">
    <p>Footer</p>
    <div class="cartoon">Cartoon</div>
</div>
</body>
</html>


If you are putting content in the middle as well then you’ll have to protect the cartoon with bottom padding on #main instead.

Paul,

The sticky footer has a border on the top. If I place the cartoon inside the sticky footer, the border will then be on top of the cartoon. Correct?

Did you not check out my working example above? The blue background in that example would be your cartoon and as you can see it sits on top of that border exactly as you wanted :).

The cartoon is taken out of the footer using absolute positioning and placed above it. That’s the only way you can keep track with the footer

Your sticky footer was broken which is why I gave you a working version to work with. Just dop your content into my set up and adjust to suit.:slight_smile:

Paul,

1st off, I just want to say thank you for being very generous and sharing your knowledge with a newb like me. This was exactly what I was looking to do : )

It did exactly what I wanted except in IE 6, and IE 7. I tested with IE tester (check the pic below)

http://i187.photobucket.com/albums/x292/bigbonthabeat/IE6and7.jpg

Here is the UPDATED LINK to my website: www.brysonprice.com/stickyfooter.html

Hi,

Try adding left:0 to .cartoon.


.cartoon {
    text-align: center;
    width:100%;
    position:absolute;
    height:500px;
    top:-503px;
    background:blue;/* for testing */
    margin:auto;
  [B]      left:0;[/B]
}


IE6 and 7 like co-ordinates rather than auto co-ordinates or it takes its 100% width from the central position because of the text-align:center;

Paul,

Adding, left:0 to the .cartoon div worked :slight_smile:

There is one last problem though…the star images, the ‘bryson price’ image and the navigation images are a little off from the original. I tried adding margins/ padding, centering the text, vertical aligning the images and moving the div that the images were in, but none of these things made the images move : /

What can I do to align these images as they were before?

OLD webpage: Untitled Document
Webpage with Paul’s fix: Sticky Footer at Bottom

Once again, I really appreciate you helping me out. I have been searching for a while on how to fix this problem. Thanks for sharing your expertise and time to help

H,

Try this:


.centertopfoot img{
vertical-align:middle
}

Hopefully that will align them vertically as they are inline elements.

Don’t use an empty p element just to make space. You could simply add some padding top to your centertopfoot element instead.:slight_smile:

This helped the star images and the ‘bryson price’ image, but I tried to apply this same concept to the ‘bio, music, contact’ and it did this:
Sticky Footer at Bottom
(the images never properly centered within the div and when I added padding, it only added it to the vertical lines)

Does it have something to do with those images being .swf files? The ‘bio, music and contact’ images are .swf files, while the 2 vertical lines are .png files.

HI,

Which page am I looking at exactly. That link seems ot be the front page again which seems to look ok. Was I supposed to navigate to another page.

If you are trying to center something other than an image then place a div around the element and give that div the width of the element (not 100%) then use margin:auto which will center the block element in the avialable space…

The page I wanted you to look at was the same page( Sticky Footer at Bottom).
On my end, it looks like this (I circled the problem):
http://i187.photobucket.com/albums/x292/bigbonthabeat/problem-1.jpg

I tried setting a width and putting a “margin:auto” with the div (the div on my page that goes around these elements is ‘wrapmenu’), but things got messed up. Maybe it’s because it’s not just one element inside the div(it’s 5 elements).

I’m just trying to get the navigation menu to look like the one on my old page:
Untitled Document

Try something like this:


.wrapmenu object{
    display:inline;
    vertical-align:middle
}
.wrapmenu img{padding:5px 0 0}
.wrapmenu{padding-top:20px}


I think that’s what you were after :slight_smile:

Paul,

Am I doing something wrong?

I inserted this code, but the spacing was really off. And I messed around with the code a little and got it to look like this:
http://www.brysonprice.com/stickyfooter

I found that I had to insert
“padding-top: 0px;” into the code so that the navigation menu would be out of place:

.wrapmenu object{
    display:inline;
    vertical-align:middle
	padding-top: 0px;
}

And also, I tried messing with this code:

.wrapmenu img{padding:5px 0 0}
.wrapmenu{padding-top:20px}

Chaning the .wrapmenu img padding would only move the bars in between the words, but when changing the .wrapmenu padding, it would pad ALL the elements (including the bars).

I looks pretty good now, but I would like it to be centered in between the bars like this (as it was on brysonprice.com):
http://i187.photobucket.com/albums/x292/bigbonthabeat/centered.jpg. But if this is too much to ask, it’s all good. You have helped me out tremendously already! Thanks Paul

Hi,

We must be seeing different things :slight_smile:


* html #main {
    height:503px
}
[B].centertopfoot img {
    vertical-align:middle;
    padding-top: 30px;
}
.wrapmenu object,.wrapmenu img {
    display:inline;
  vertical-align:middle;
}
.wrapmenu img {
    padding:5px 0 0
}
.wrapmenu{padding-top:20px}[/B]



I get the result shown in my screenshot.

Isn’t that what you wanted or is there some more alignment needed?

You might also want to add these minor adjustments for IE7 and 6.


* html .wrapmenu{padding:0}
*+html .wrapmenu{padding:0}
* html .centertopfoot img{padding-top:10px}
*+html .centertopfoot img{padding-top:10px}


Paul,

I didn’t know I was supposed to put .wrapmenu object &.wrapmenu img together on the same line and that’s what messed up my results.

Everything is working great now. THANK YOU so much for helping me out. This has been the best help I’ve ever had on a forum! Your awesome

Glad to help :slight_smile:

Paul,

I’m sorry to ask another question, but when I was testing the homepage, for some reason, the BIOGRAPHY, MUSIC and CONTACT links don’t link properly on all browsers. On Firefox and Safari, when you click the BIOGRAPHY, MUSIC and CONTACT objects, it takes you to the pages. But not in INTERNET EXPLORER or GOOGLE CHROME. Do you know why this is happening?

Hi,

I believe that you need to embed the link in the actual flash file when you make it. I don’t get involved in flash so may be a question more suitable for the flash forum :slight_smile:

I tried all my normal tricks but IE doesn’t want to play ball.

alright, thanks again Paul. You have been more than helpful:)