1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to display IMG over the DIV border

Discussion in 'CSS' started by Junije, Aug 19, 2010.

0
Page 1 of 2
  1. #1
    Ok, here it is, I'm trying to solve a problem which has been bothering me for 2 days, and I can't figure it out how to solve it :mad:

    I have to DIV elements one below another, and a IMG element positioned inside the first div at its bottom, in such way that it should display half of the image over the DIV's border. But, for some reason, it doesn't. And I don't know how to make it show the rest of the IMG that is over the parent DIV border :(

    Here's how it looks, and how it should look:
    [​IMG]

    Someone please help me I gonna go crazy with this CSS styling :(
     
    Junije, Aug 19, 2010 IP
  2. bhuthecoder

    bhuthecoder Member

    Messages:
    245
    Likes Received:
    11
    Best Answers:
    1
    Trophy Points:
    43
    #2
    use z-index property
     
    bhuthecoder, Aug 19, 2010 IP
  3. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    I would really appreciate if you would take the time to explain it to me Sir.
     
    Junije, Aug 19, 2010 IP
  4. bhuthecoder

    bhuthecoder Member

    Messages:
    245
    Likes Received:
    11
    Best Answers:
    1
    Trophy Points:
    43
    #4
    check this
    http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
    Code (markup):
     
    bhuthecoder, Aug 19, 2010 IP
  5. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Thanks for the help! This does help me a bit by understanding what z-index is, but from what I can see, those elements are all placed as parents on the screen.
    The DIV's in the example above have no parent-child structure.

    What I have is a child IMG inside a parent DIV, and what I want to, is to show the child IMG outside the borders of the parent DIV.
    Sorry if it sounds complicated, but It really is :s
     
    Junije, Aug 19, 2010 IP
  6. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #6
    You have site to show it?

    z-index is the way to go, believe us ;)
     
    CSM, Aug 19, 2010 IP
    Junije likes this.
  7. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7

    Nah, it's on localhost... This sh1at is killing me...I've set the two DIVs and the IMG "position:relative", and set DIV 1 and DIV 2 to "z-index:1" and IMG to "z-index:2" but it's still the same :\
     
    Junije, Aug 19, 2010 IP
  8. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #8
    Show us the CSS and HTML for that stuff.
     
    CSM, Aug 19, 2010 IP
  9. wpg56

    wpg56 Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Is your img set to absolute and does it have top and left amounts
     
    wpg56, Aug 19, 2010 IP
  10. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #10
    No, the IMG is set "position:relative" since the first DIV is not of fixed height, so I cant position the IMG with "absolute", the left and right attributes are specified. I can do the IMG over DIV with absolute positioning, but I need the IMG to always be at the bottom of the first DIV so I need the relative positioning, but I can't manage to get it working right...
     
    Junije, Aug 19, 2010 IP
  11. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #11 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#theimage {
	background-image: url("http://atlantichosting.net/images/logo.gif");
	background-repeat: no-repeat;
	width: 295px;
	height: 90px;
	position: absolute;
	left: 302px;
	bottom: -45px;
	z-index: 2;
}
#block1, #block2 {
	padding: 40px 20px;
	background-color: #0f0;
	position: relative;
	width: 900px;
	margin: 0 auto;
}
#block2 {
	background-color: #f00;
	z-index: 1;
}
-->
</style>
</head>

<body>

<div id="block1">
	<p>Block1</p>
    
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <div id="theimage"></div>
</div>

<div id="block2">
	<p>Block 2</p>
    
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

</body>
</html>
    HTML:
     
    tolra, Aug 20, 2010 IP
    Junije likes this.
  12. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #12
    Wow, wonderful this is what I was looking for tolra, it works just as it should now.

    Also thanks to everyone else!
     
    Junije, Aug 20, 2010 IP
  13. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #13
    Don't know if absolute positioning is the right way tbh. If I resize my browser to 1280x1024, what happens then? ;)
     
    CSM, Aug 20, 2010 IP
  14. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #14
    Did you try it? :)

    The OP didn't say if they wanted fluid of fixed width, so I went fixed width as it's less effort. If you try it you'll find that the image stays put relative to the divs.
     
    tolra, Aug 20, 2010 IP
  15. tolra

    tolra Active Member

    Messages:
    515
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    80
    #15
    I'll just add as an alternative you could cut the image in half and put each half as a background to the appropriate div aligned to the top and bottom of the div as appropriate, it's even simpler but may not work if the image is being uploaded by end users and such like.
     
    tolra, Aug 20, 2010 IP
  16. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #16
    That's what I said. It's hard to see it from a normal graphic, no?
     
    CSM, Aug 20, 2010 IP
  17. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #17
    bottom:-45px;

    Hm, anyway. He got his "solution".

    My solution would be:

    
#theimage {
    background-image: url("http://atlantichosting.net/images/logo.gif");
    background-repeat: no-repeat;
    width: 295px;
    height: 90px;
    position: absolute;
    left: 302px;
    overflow:auto;
    z-index: 2;
}
    Code (markup):
     
    CSM, Aug 20, 2010 IP
  18. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #18
    Damn...
    The problem is solved 99% but for some reason the IMG wont display outside the parent DIV from the DIV it was placed in.

    My two DIVs are nested within many other DIVs, and while the solution does work, it seems that the other parent DIVs are somehow "blocking" the IMG from displaying on top of them. :\

    Do all my other DIVs on the page, that are parents of the two DIVs need to have "position:relative" and "z-index" set to below of the IMG?

    I still can't manage to understand the CSS logic, it seems so much more complicated then it should be....
     
    Junije, Aug 20, 2010 IP
  19. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #19
    As we said before it is better if you paste your CSS/HTML if you want us to help. Ofcourse, the image-div should have a higher z-index than the other 2 divs...
     
    CSM, Aug 20, 2010 IP
  20. Junije

    Junije Well-Known Member

    Messages:
    136
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #20
    It's a LOT of CSS/HTML to paste here, and it would take me a lot of time to just get the important parts, but as I already have the most important part of the problem solved, I think I'm going to able to get this working sooner or later.
     
    Junije, Aug 20, 2010 IP
Page 1 of 2