...

View Full Version : Overlapping Divs (Z-Index)



greens85
05-15-2009, 01:14 PM
Hi All,

How can I overlap a div to create the following effect:

http://i217.photobucket.com/albums/cc36/greens85/overlapping.gif

Basically I want the girls arm to stand outside the right border.

Cheers

abduraooft
05-15-2009, 01:32 PM
div.mydiv{
padding-right:100px;
position:relative;
border:1px solid #000;
width:500px;
margin:0 auto;
}
div.mydiv img{
position:absolute;
top:50%;
right:-50px;
margin-top:-50px;
}

<div class="mydiv">
<img src="myimage.jpg" width="150" height="100" alt="">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

greens85
05-15-2009, 01:57 PM
Thats almost there mate, thanks.

A couple more things if you dont mind. The text now has a rather large margin on the left. When I try and get rid of this the image moved out of place. How can I remove this margin on the left of the text but keep the image in place?

Also do i know how i can go about giving an image a transparent background as the image currently has a white one.

Sorry about all the basic questions, pretty new to this game!

Rowsdower!
05-15-2009, 02:12 PM
...Also do i know how i can go about giving an image a transparent background as the image currently has a white one...

Do you have photoshop? If not, I'm not sure of a good way to do it. I don't believe it's possible in basic editors such as MSPaint (I might be wrong though).

abduraooft
05-15-2009, 02:17 PM
A couple more things if you dont mind. The text now has a rather large margin on the left. When I try and get rid of this the image moved out of place. How can I remove this margin on the left of the text but keep the image in place?
We neither have your code nor the images. So it's almost impossible to understand your issue. Could you post a link to our page?

greens85
05-15-2009, 02:29 PM
Rowsdower - I have both photoshop & fireworks, I'm just not sure how to use them to create a transparent background!

abduraooft - The code im refering to is the code you pasted me in the first reply. I have attached a screenshot so that you can see how it creates a margin inbetween the left of the site and the content.

http://i217.photobucket.com/albums/cc36/greens85/th_textspacing.gif (http://s217.photobucket.com/albums/cc36/greens85/?action=view&current=textspacing.gif)

thanks for your time

Rowsdower!
05-15-2009, 02:40 PM
Ok, try one of these methods for transparency:
http://www.mediacollege.com/adobe/photoshop/transparent/background.html

If you save it as a gif make sure you check the box for transparency when you create the gif file (after using "save as").

greens85
05-15-2009, 02:45 PM
thats done it, thanks mate



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum