PDA

View Full Version : align image to bottom



esthera
Feb 17th, 2010, 07:36 PM
on my page

http://www.awe bforyou.com/studentplace/essaybank.asp

I want the image of the books to align to the bottom of the blue left side
how can i do this?

I did in my css


but it still doesn't align to the bottom of the page (depending on the length of the right side)

<div style="background-image:url(images/leftBarBottomImage.jpg); background-position:bottom; background-repeat:no-repeat; width:235px; height:280px; text-align:center; vertical-align:bottom; position:relative; ">&nbsp;</div>

Excavator
Feb 17th, 2010, 08:17 PM
Hello esthera,
The way it's coded now, your inline style is positioning LeftBarBottomImage.jpg in the bottom center of a 235px by 280px div.
That doesn't affect where that div is positioned in your #sidebar.

Try it like this instead -

<div style="background-image: url(&quot;images/leftBarBottomImage.jpg&quot;); width: 235px; height: 280px; text-align: center; position: absolute; bottom: 0; left: 0;">&nbsp;</div>
You may want to adjust that bottom: __px; to come up high enough to clear your footer.

You will need to make #container (or #sidebar) relative for that to work, like this -

#container {
margin: 0px auto;
width: 1110px;
text-align: left;
position: relative;
}

Your use of inline styles does not make edits/debugging very easy.

esthera
Feb 17th, 2010, 08:44 PM
when i do that it doesn't show that image at all

Excavator
Feb 17th, 2010, 08:59 PM
I think it may not like the " surrounding the image path.
It could be one of these 525 errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.awebforyou.com%2Fstudentplace%2Fessaybank.asp) are affecting it too...