SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I have this overlapping image with divs?

    I am working on a client's website and am wondering how can I do this: http://imageshack.us/photo/my-images/818/exampleb.jpg/, in css. Thanks in advance.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    If it weren't for that darn Internet Explorer 6 and 7, you could just have a float hanging out.

    However if Haslayout is tripped in any little way on the grey box, you're stuck.

    So more likely you'll have to rel-po the grey box and abso-po the blue one. Or possibly you could get away with just rel-po-ing the blue box. The idea is, the grey box would need to have a set (limited) height and overflow: hidden. Positioning the blue box lets you give it a z-index and that may let you overcome the overflow: hidden (now I'm not sure, I haven't done that in a long time... if plain z-index can't work then blue box will have to be abso-po'd which will take it completely out of the document flow and the parent's overflow settings definitely can't stop it).

    Or, I am assuming the grey box is a real box. if it's not, but just a fixed-height background image, then do that. The box containing the blue box doesn't have to have a background colour. It can be transparent and still hold the grey background image.

    If you'd like to see code examples of what I mean, let me know.

  3. #3
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Actually, unless I misinterpreted the example, this is pretty easy to pull off--even with support for IE 6/7.

    All you need to do is float the image to the right, give it a right margin so you have that sexy gutter, and then a negative top margin of just a little bit less than the full height of the dark box. BEHOLD.

    This technique is, of course, useless if the dark box's height is determined dynamically (by text, for example).
    I'm the web overlord for Graphic Business Systems

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you sdleihssirhc for your code, but I would like to see how Stomme's code work as well. Can I please see some code examples Stomme poes?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by !designer! View Post
    I would like to see how Stomme's code work as well.
    Quote Originally Posted by Stomme poes View Post
    If it weren't for that darn Internet Explorer 6 and 7, you could just have a float hanging out.
    That's probably what I'd do anyway, and work out some kind of solution for teh dead browsers (if I could be bothered) later.

    So here's what I'd try first:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    body { margin:0; }
    div { background-color:#404040; min-height:175px; padding: 10px; margin-top: 50px; }
    img { float:right; margin-right:10px;  }
    </style>
    
    </head>
    
    <body>
    	<div><img src="http://placehold.it/300x400"></div>
    	
    </body>
    
    </html>
    Didn't bother with the bg image, as that's just an image repeated on the body element.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2010
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for your help, I have solved the problem now.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by !designer! View Post
    I have solved the problem now.
    Just out of interest, how did you do it?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •