[WSG] How to align images at the *bottom* with CSS?

[Antonio]

Hi everybody,

I have a block with an smaller image inside.
I'd liked to align the image at the *bottom* of the block...
How can I do it with CSS?

Thanks for your help!
Antonio



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to align images at the *bottom* with CSS?

[Matthew Pennell]

On 9/13/06, Antonio [EMAIL PROTECTED] wrote:

I have a block with an smaller image inside.
I'd liked to align the image at the *bottom* of the block...
How can I do it with CSS?


#block {
 position: relative;
}

#block img {
 position: absolute;
 bottom: 0;
}


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to align images at the *bottom* with CSS?

[Tom Livingston]

On 9/13/06 12:16 PM, Antonio [EMAIL PROTECTED] wrote:

 I have a block with an smaller image inside.
 I'd liked to align the image at the *bottom* of the block...
 How can I do it with CSS?

If it is not important content - important info as opposed to just
decorative - make it a background image:

Div.your divnamehere{background:#pink url(path to your image) bottom center
no-repeat;}

Change center to left or right, etc.

HTH

-- 
Tom Livingston | Senior Multimedia Artist | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to align images at the *bottom* with CSS?

[Ted Drake]

Try vertical-align:bottom
As in p img {vertical-align:bottom}

Ted


-Original Message-


Hi everybody,

I have a block with an smaller image inside.
I'd liked to align the image at the *bottom* of the block...
How can I do it with CSS?

Thanks for your help!
Antonio




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] How to align images at the *bottom* with CSS?

[Antonio]

Thank you very much Matthew, Tom and Ted for your answer.
The Matthew's solution is OK for me.
;-)

Antonio

Le 13 sept. 06 à 19:05, Matthew Pennell a écrit :


On 9/13/06, Antonio [EMAIL PROTECTED] wrote:

I have a block with an smaller image inside.
I'd liked to align the image at the *bottom* of the block...
How can I do it with CSS?


#block {
 position: relative;
}

#block img {
 position: absolute;
 bottom: 0;
}





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] How to align images at the *bottom* with CSS?

[Ted Drake]

My suggestion ( p img {vertical-align:bottom }) makes it easier to align an
image with a string of text.  Matthew's is better for placing an image in a
block, which is what your were asking for.
However, I’d suggest avoid vague positioning. i.e. don’t use
background-position:bottom. Use background-position:0 100%; instead. The
same for your positioning, use bottom:0, left:0…

I’ve worked on a number of large sites that change over the course of time
and vague positioning falls apart when someone updates the image 6 months
from now. Or tries to over ride it later on with a more specific rule.  It’s
just a good practice to define your positioning specifically.

Ted Drake
www.last-child.com




On Behalf Of Carlos Carreo


background-position: bottom;



Matthew Pennell a écrit :

On 9/13/06, Antonio [EMAIL PROTECTED] wrote:
I have a block with an smaller image inside.
I'd liked to align the image at the *bottom* of the block...
How can I do it with CSS?

#block {
  position: relative;
}

#block img {
  position: absolute;
  bottom: 0;
}





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***