Welcome to WebmasterWorld Guest from 54.146.240.181

Forum Moderators: not2easy

Message Too Old, No Replies

How to float one image over another

Can this be done in CSS?

     

Lorel

9:04 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

9:24 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

10:14 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:28 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

11:38 pm on Dec 19, 2006 (gmt 0)

5+ Year Member



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

5:19 pm on Dec 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

6:45 pm on Dec 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

7:05 pm on Dec 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

8:11 pm on Dec 20, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:21 am on Dec 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

6:33 pm on Dec 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month