Positioning an Image (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

MCD -> Positioning an Image (6/23/2009 7:43:12)

I am trying to position an image so that it will be on top of the footer. Absolute positioning will allow me to do this on a page but not multiple pages of varying length. Relative positioning will allow me to move the image left or right but not up and down. Can anyone help with this matter?

The page is located here. This is a page I am building for future sites so that I will have the basics completed.

The CSS that is being used on the image is this:

#wrapper #container #leftnav img {
position:relative;
left:25px;
}



d a v e -> RE: Positioning an Image (6/23/2009 8:42:24)

just put the image in the footer and float if right or left if necessary



MCD -> RE: Positioning an Image (6/23/2009 8:51:05)

That will not do what I need. I need the image standing on the footer, not in it.



Tailslide -> RE: Positioning an Image (6/23/2009 8:54:56)

Bloomin' IE6!! People wonder why designers hate IE6...

This is pretty simple to do in IE7 and up plus obviously all modern browsers. You can easily use AP to do it.

IE6 is a pain though, so better to use background images and fiddle, fiddle, fiddle!

Anyway - here you go: http://www.littleblueplane.com/test/mark.html

Changed a fair bit of the css I'm afraid - it's all in the doc head.



MCD -> RE: Positioning an Image (6/23/2009 10:10:39)

I took your code Tailslide and used it. I sweated this for days...you took minutes. I am so jealous. I see what you did but why the padding-bottom:433px; in the #leftnav?



Tailslide -> RE: Positioning an Image (6/23/2009 10:33:58)

Because otherwise, if the page is really short the menu (or other contents of that div) will overlap on top of the image. The image is 433px high. With bottom margin or padding on the div which will sit on top of it, it ensures the background image is always visible.



MCD -> RE: Positioning an Image (6/23/2009 10:59:22)


quote:

ORIGINAL: Tailslide

Because otherwise, if the page is really short the menu (or other contents of that div) will overlap on top of the image. The image is 433px high. With bottom margin or padding on the div which will sit on top of it, it ensures the background image is always visible.


I understand now and that makes sense. My debt to you keeps piling up. Thanks again Tailslide. Have a great day. I plan to finish this sample then build another. I am finding it is the best way of learning CSS.



Tailslide -> RE: Positioning an Image (6/23/2009 11:45:18)

You're right - it's the best way.

Keep it really simple and then test with everything you can think of! Once you have a basic framework for your sites then you can start adding in more complex stuff safe in the knowledge that the basic structure works fine - it'll just be the new stuff you need to keep track of. (slightly simplistic but generally true!)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625