Re: [css-d] align image to bottom right corner
On Sat, 25 Aug 2007, David Merchant wrote:
I am trying to place the file cabinet image in the bottom right hand
corner of a div. I've searched wiki, the web and poked around the
archives and what solutions I've seen I can't get to work.
It might be easier to analyze the situation if you posted the URL(s) of
your best attempt(s), or some attempts.
There are two simple strategies that might be applied:
1) Background image. You would use something like
background: url(cabinet.gif) no-repeat right bottom;
for the div element. You would need to take care of avoiding any of the
div content covering the image.
2) Positioned image. You could set
position: relative;
for the div element (just to make it possible to position the image
relative to the div), and you would include an img element, like
img src=cabinet.gif alt=
inside the div element (somewhere - choose the placement according to how
it should be rendered in non-CSS situations), and then position it, e.g.
(assuming you have div id=foo.../div markup)
#foo img { position: absolute; right: 0; bottom; }
Here, too, care is needed to avoid overlap of the image and the
rest of the content.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align image to bottom right corner
Ehm... do you have any reference to see what you're talking about (a link)? If all you want to do is put an image at that position, set it as the background, i.e. background: #fff url(path/to/image) right bottom no-repeat; · #fff is the background color, it can be omitted or set to 'transparent' (without the quotes) · 'url' is an actual keyword, and the path should not be between quotes · reference: http://www.w3.org/TR/CSS1#background Rafael. David Merchant wrote: I am trying to place the file cabinet image in the bottom right hand corner of a div. I've searched wiki, the web and poked around the archives and what solutions I've seen I can't get to work. Yes, I'm a bit green when it comes to CSS, green enough that maybe I am not searching correctly because of my ignorance. Can someone point me to a resource that will answer this question? Many thanks, David Merchant __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align image to bottom right corner
On Sun, 26 Aug 2007, karuna sagar k wrote:
For the solution mentioned below - Positioned Image:
could you elaborate on why do we need to style the div with {position:
relative;}?
To elaborate on my parenthetic remark (just to make it possible to
position the image relative to the div): Setting position: relative does
not affect the placement of the div itself but turns the div into a
positioned element. A positioned element creates a frame of reference, a
coordinate system, so that you can position other elements - such as the
image here - relative to it.
Also, couldn't we just style img with {position: relative; right: 0;
bottom: 0;}?
That wouldn't affect its position at all.
Both absolute and relative positioning is relative, just relative to
different things. Relative positioning (position: relative) is relative
to the position where the element would appear in the normal run of
layout. Absolute positioning (position: absolute) is relative to a
coordinate system established by another element.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] align image to bottom right corner
I already have a background image, a paper background. However, your post got me thinking, I can have another div inside, and set the file cabinet picture as the background to it. After a couple of minutes I got that working nicely. Except the text overlaps the image, so now I'm working at getting the paragraph tags to have enough padding or margin on the right that they won't overlap the image, but so far I can't seem to override the inherited styles for the paragraphs. TTFN, David At 09:32 PM 8/25/2007, Rafael wrote: If all you want to do is put an image at that position, set it as the background, i.e. background: #fff url(path/to/image) right bottom no-repeat; · #fff is the background color, it can be omitted or set to 'transparent' (without the quotes) · 'url' is an actual keyword, and the path should not be between quotes · reference: http://www.w3.org/TR/CSS1#backgroundhttp://www.w3.org/TR/CSS1#background __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
