Re: [css-d] How can I do an image overlap with CSS?
At 21:35 -0700 on 06/17/2006, Robert Lane wrote about Re: [css-d] How can I do an image overlap with CSS?: Well those lines lost it in transmission - sorry. Basically I want Img A Img B where Img B overlaps and covers the lower right 2/3 of Img A. Cheat. Bring the two picture into Photoshop and put Image A in Layer 1, Image B in Layer 2, and save a flattened copy. Use the copy in your layout. -- Bob Rosenberg RockMUG Webmaster [EMAIL PROTECTED] www.RockMUG.org __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
[css-d] How can I do an image overlap with CSS?
I want to put two images (photos) into the main body of a 3 column
layout that is done in CSS.
I want one photo to appear in front of the other and with an offset from
the other photo. Something like this:
__ __
| _ |
_ | | |
| | |
How should I go about this in CSS?
There is a mainbody div with paragraphs of text. After the second
paragraph I want the photos and then want the rest of the text below the
photos.
I tried puting the images in a div and then wrapping that in a new div
called pics like this:
div id=picsdiv
img id=pic1 src=assets/Images/DSCN0016b.jpg alt=Upscale
Kitchen Remodel
img id=pic2 src=assets/Images/DSCN0003b.jpg alt=Finished
Project
/div /div
I then tried to style it like so:
div#pics {
position: absolute; padding: 20px 0;
}
#pic2 {
position: relative; top: 80px; right: 150px;
}
Then I put an id on the h3 tag for the text that follows and added
padding at the top to allow for the photos.
h3#addl {
padding: 340px 0 0;
}
This works the way I want in Firefox but in IE it is goofey looking.
You can see the page at www.tnrc.lane-consulting.com
Any ideas on how to fix?
Thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] How can I do an image overlap with CSS?
Well those lines lost it in transmission - sorry.
Basically I want
Img A
Img B
where Img B overlaps and covers the lower right 2/3 of Img A.
Robert Lane wrote:
I want to put two images (photos) into the main body of a 3 column
layout that is done in CSS.
I want one photo to appear in front of the other and with an offset from
the other photo. Something like this:
__ __
| _ |
_ | | |
| | |
How should I go about this in CSS?
There is a mainbody div with paragraphs of text. After the second
paragraph I want the photos and then want the rest of the text below the
photos.
I tried puting the images in a div and then wrapping that in a new div
called pics like this:
div id=picsdiv
img id=pic1 src=assets/Images/DSCN0016b.jpg alt=Upscale
Kitchen Remodel
img id=pic2 src=assets/Images/DSCN0003b.jpg alt=Finished
Project
/div /div
I then tried to style it like so:
div#pics {
position: absolute; padding: 20px 0;
}
#pic2 {
position: relative; top: 80px; right: 150px;
}
Then I put an id on the h3 tag for the text that follows and added
padding at the top to allow for the photos.
h3#addl {
padding: 340px 0 0;
}
This works the way I want in Firefox but in IE it is goofey looking.
You can see the page at www.tnrc.lane-consulting.com
Any ideas on how to fix?
Thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] How can I do an image overlap with CSS?
Well maybe this is an answer.
I tried changing the positions from right to left and with this it seems
ok in Firefox and IE
Anyone see problems in other browsers?
www.tnrc.lane-consulting.com
div #pics {
/*border: 1px dashed red; */
position: relative; top: 0; left: 0;
padding: 20px 0;
}
#pic2 {
position: relative; top: -180px; left: 160px;
}
h3#addl {
margin: -190px 0 0;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] How can I do an image overlap with CSS?
Robert Lane wrote:
I want to put two images (photos) into the main body of a 3 column
layout that is done in CSS.
I want one photo to appear in front of the other and with an offset
from the other photo.
www.tnrc.lane-consulting.com
Floating both images will work a lot more reliable across browser-land.
1: delete that extra div inside div#pics - not needed.
2: restyle the rest like this...
div#pics {float: left; width: 100%; height: auto; position: relative;}
#pic1, #pic2 {float: left; position: relative; display: inline; clear:
both; margin: 20px 0;}
#pic2 {margin: -200px 0 20px 100px;}
h3#addl {padding-top: 0;}
Adjust those margins on #pic1 and #pic2 to taste, and you'll get the
degree of overlapping you want.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
