Jump to content
Stef's Coding Community
Sign in to follow this  
Aspire

Image directly above footer

Recommended Posts

I'm new to CSS and frustrated by what should be a simple image positioning. I hope someone can help me. (I'm tempted to go back to tables!)

 

Using a Dreamweaver CSS template to start with, I have a header, left sidebar, main content and footer. twoColFixLtHdr.css The sidebar is not as high as the content and under it I want to put an image that sits tight against the footer. The content height will vary from page to page. The sidebar should sit at the top left under the header and the image should sit at the bottom left on top of the footer.

 

Could someone please tell me how to do that?

Share this post


Link to post
Share on other sites

Here's a very simple example:-

http://www.wickham43.com/forumposts/aspire100426.html

 

I haven't used your styles and I don't know what your markup is.

 

My example puts a style of position: relative; in the footer style and then creates a class for the image

.above { position: absolute; top: -90px; left: 0; }

 

where the top size is the negative image height so that it sits just above the footer all the time.

 

<div id="footer">
<img class="above" src="images/orangew90x90.jpg" alt="Orange W">
<p>Other Footer content</p>
</div>

 

I expect that there are several other ways to do it.

Share this post


Link to post
Share on other sites

I do not know what you html is like and I assume you mean you want the image to be above the footer ('top of the footer') but if you have a div that is containing the sidebar and content that you can simply add position: relative to that containing div and then apply position: abolute; bottom: 0 for image itself. Keep in mind that the image must be within that containing div just before the closing </div> for it to work. If you have the image located elsewhere within that containing div then you may have to add left: 0; to the css I provided earlier.

Edited by newseed

Share this post


Link to post
Share on other sites

@newseed: I think his problem is more related to the sidebar div not stretching to the full height of the content area and not reaching the footer :P

 

The only way I can see is to do it using absolute positioning on the image, and relative positioning on the footer as Wickham suggested:

 

#footer { position: relative; } /* Set relative position so inside elements can be positioned relative to this element */

#footer img { position: absolute; top: -90px; } /* 90px or whatever the height of your image is */

Share this post


Link to post
Share on other sites

I read as though he was merely stating that the sidebar is not as high as the content and so he wanted to use that space for the image. He didn't imply that he wanted the div to stretch down. Having a div wrapped around the sidebar and main content will work by applying what I suggested earlier.

 

Nevertheless, I was not implying that Wickham's (or your) method was incorrect but instead I was just providing another alternative. :)

 

Note: could the negative positioning work effectively if by chance the sidebar is longer than the main content?

Share this post


Link to post
Share on other sites

Thanks, everybody. The absolute position and negative image height solved the problem. I never would have gotten that on my own. Now it's perfect.

Wickham, thanks for posting the sample. Examining your code was a huge help.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...