homepage Welcome to WebmasterWorld Guest from 50.19.172.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to float one image over another
Can this be done in CSS?
Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 9:04 pm on Dec 19, 2006 (gmt 0)

I can't figure out how to float one image over another with the first smaller image on the top left and 2nd larger image on the right with them slightly overlappingin the middle. I will eventuall need to put text in the lower left corner but for now I'm leaving that out.

I tried putting them in a div box the same width of the images minus the overlap with align left or right on the images, trying to force them to overlap but that didn't work, the first one is above the other.

Here is the html:

<div class="box450">
<a href="images/faline1.jpg"><img src="images/faline1b.jpg" width="225" height="219" border="0" align="left" alt="Faline 1"></a>
<a href="images/faline2.jpg"><img src="images/faline2.jpg" width="250" height="372" border="0" align="right" alt="Faline 2"></a>
</div>

here is the css:

.box450 {width:450px;
margin-left:auto;
margin-right:auto; }

I know how to use float but not sure how I would do that when there are two images.

Can someone tell me what I'm doing wrong please?

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3193750 posted 9:24 pm on Dec 19, 2006 (gmt 0)

You won't be able to overlap them using float. You'd need to absolutely position the images, making sure that the image in front had a higher z-index setting than the one behind.

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 10:14 pm on Dec 19, 2006 (gmt 0)

This was quick and dirty and only quickly x-browser tested but should work - note the use of position: relative; rather than float. I simply wanted to move the one image not totally remove things from flow.

CSS:

* {padding: 0; border: 0; margin: 0;
}
.box450 {width: 450px; margin: 0 auto;
}
img {display: block;
}

Note: I removed the align left/right from the HTML.

HTML for bigger right image on top:

<a href="images/faline1.jpg">
<img src="images/faline1b" width="225" height="219" border="0" alt="Faline 1">
</a>

<a href="images/faline2.jpg">
<img src="images/faline2" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>

HTML for smaller left image on top:

<a href="images/faline1.jpg">
<img src="images/faline1b" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;">
</a>

<a href="images/faline2.jpg">
<img src="images/faline2" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>


Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 11:28 pm on Dec 19, 2006 (gmt 0)

Hi Iamlost

Thanks for working on this but the images aren't displaying. I work from a Mac and tried all the latest browsers (Safari, Firefox, Netscape and Opera. On Opera it shows the outline of the images even though I have border="0" so I can see that it's working--just can't see the images.

Do you have any idea what would cause the images to not load?

PS. I'm using your last suggestion for left image on top.

[edited by: Lorel at 11:29 pm (utc) on Dec. 19, 2006]

smells so good

5+ Year Member



 
Msg#: 3193750 posted 11:38 pm on Dec 19, 2006 (gmt 0)

This is a barebones look at what I've done to float one image over another.

<style type="text/css">
.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
.imgB1 { position:absolute; top: 75px; left: 80px; z-index: 3; }
</style>

<img class=imgA1 src="http://full.path.to/imageA.jpg"><img class=imgB1 src="http://full.path.to/imageB.jpg">

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 5:19 pm on Dec 20, 2006 (gmt 0)

Lorel: I can't doublecheck the code on a Mac, unfortunately. In doing my 'test' I simply replaced your image and path [<img src="">] with my own.
Are you sure the image paths/names are correct?

Try remove styling and see if the images appear - if not the images aren't being found. If the images appear put styling back on and comment out the CSS, then un-comment out line by line until the images appear. This may help narrow the problem area.

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 6:45 pm on Dec 20, 2006 (gmt 0)

Iamlost

You were right. I had left off the .jpg on the images for some reason. I stared at that code over and over and couldn't see it till this morning.

It's working now.

Thanks to the others also.

Lori

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 7:05 pm on Dec 20, 2006 (gmt 0)

I have one more problem. I need some text below the top left picture and to the left of the other picture, i.e., nestled in the black space. I tried adding this style tag to the text but it doesn't work:
<div style="position:relative:top:235px;left:15px;">

I tried several different options but the text is always below the bottom most picture by 2 inches.

Is it possible to do this?

Here is the code that places the pictures in the correct position:

<div class="box450">
<a href="images/faline1.jpg"><img src="images/faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;"></a>
<a href="images/faline2.jpg"><img src="images/faline2b.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-175px;left:200px;"></a>
blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 8:11 pm on Dec 20, 2006 (gmt 0)

Ok I think I have the positioning problems figured out. I put the text block below the first picture and the following code aligns everything perfectly. EXCEPT there is now a large blank space below this block (box450) about 3 inches high due to relative positioning. I have several of these boxes to place on the page so I don't want that much wasted space.

Is there any way to eliminate the blank space below each relative positioned box other than putting each section of the page in a position absolute box? I'm not even sure that will work.

<div class="box450">
<a href="images/faline1.jpg"><img src="images/faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:1;"></a>
<div class="box200" style="position:relative; top:-25px:left:15px;padding-top:5px;padding-right:5px;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<a href="images/faline2.jpg"><img src="images/faline2b.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-345px;left:200px;"></a>
</div>

iamlost

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 12:21 am on Dec 21, 2006 (gmt 0)

Playing with relative positioning can get convoluted depending on the code around and after.

In this instance (my example) you are moving the second larger image up and to the right. The natural flow does NOT account for the move and continues on as if the second larger image were still in its original in-flow position.

Thus the text needs to be 'moved' as well. I enclosed it in a <p> and moved it up the height of the larger image which places it directly under the smaller image. I also specified a width (the width of the div minus the width of the larger image) so the text will remain visible.

However this leaves even more 'blank' space before any subsequent natural flow content. I have added a border to the containing div which shows the empty space vacated by relatively positioning the image and text.

CSS:

* {padding: 0; border: 0; margin: 0;
}
.box450 {width: 450px; margin: 0 auto; border: 2px #000 solid;
}
img {display: block;}

HTML:

<div class="box450">

<a href="images/faline1.jpg">
<img src="faline1b.jpg" width="225" height="219" border="0" alt="Faline 1" style="position: relative; z-index:10;">
</a>

<a href="images/faline2.jpg">
<img src="faline2.jpg" width="250" height="372" border="0" alt="Faline 2" style="position: relative; top:-219px;left:200px;">
</a>

<p style="position: relative; top: -372px; width: 200px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra odio nec augue. Donec dolor. Sed et est. Maecenas libero mi, ultricies non, condimentum ac, auctor at, ipsum. Quisque purus orci, aliquam a, ornare vel, fringilla sed, massa. Aenean quis lectus. In sit amet libero. Proin porta iaculis magna. Proin semper risus vel risus.
</p>

</div>

In standards compliant browsers adding an explicit height to the containing div (assuming you know approximately how much text) neatly solves this problem. In at least some IE(win) versions with their auto-expanding height the problem persists.

One possible IE work-around is to use conditional statement(s) and a negative bottom-margin equal to the height of the larger image (372px) minus any 'extra' text. Note that if the containing div has a border or a differing background to surrounding or subsequent content the result is unsightly. Note that I have not x-tested IE for quirks/standards/versions differences.

The biggest problem with supplying code suggestions is that what works well in isolation may not be the best solution given the rest of the code. And the difficulties with extant non-standards compliant versions. Oh, the joy of web design :-)

Lorel

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3193750 posted 6:33 pm on Dec 21, 2006 (gmt 0)

Thanks Iamlost.

Adding height to the div box fixed it. I added it to the div as a style as every box has different heights.

It looks ok on all the mac broswers (except the padding at bottom is different in each one).

I'll check windows later.

thanks much!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved