SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast leafspirit's Avatar
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Image Overlay Problem

    Hey guys, I've been bashing my head into the wall over this for the last two hours.

    I have two images, both of which have a width of 600px. Their container has a min-width of 600, and a max-width of 990. Both images are positioned 50px outside of the container, and I want one image to overlay the other, to create a line that will expand as the user resizes their browser. However, I can't get them to overlap, as they just break the container.

    See http://www.leafspirit.com for what I'm talking about.

    Here is the CSS for the divs containing the images

    Code:
    #headerBG{
    width: 600px;
    height: 220px;
    z-index: 1000;
    left: -50px;
    position: relative;
    }
    
    #branding {
    width: 600px;
    height: 200px;
    z-index: 1001;
    right: -50px;
    top: 0;
    position: absolute;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'm not exactly sure what you are trying to do, but it sounds like you'd be better off using background images. For example, have one image as a background on #headerWrapper, and the other on #headerBG. Whichever you want to sit underneath when they overlap, but that on #headerWrapper. You could align one to the left and one to the right.

    That should work nicely.

  3. #3
    SitePoint Enthusiast leafspirit's Avatar
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response!

    I thought of that, except when I apply one of them as a background, since the positioning is negative, part of them gets cut off, and I couldn't manage to fix that problem either. Tried applying overflow: visible and everything else I could think of. Starting to have fantasies of laptopicide at this point.

    EDIT: as for what I'm trying to do. I want the headerBG image to stay on the left when the page is resized, and the branding image to stay on the right, and as the page is resized, the line between them will expand and contract.

  4. #4
    SitePoint Enthusiast leafspirit's Avatar
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I guess disregard this question. Apparently all it took was adding position: relative to the wrapper class. I didn't think I had to explicitly define it as such, but then I've been working with CSS for all of 2 days.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by leafspirit View Post
    when I apply one of them as a background, since the positioning is negative, part of them gets cut off
    Not sure what you mean by that. There's no need for any "negative" positioning.

    I want the headerBG image to stay on the left when the page is resized, and the branding image to stay on the right, and as the page is resized, the line between them will expand and contract.
    It's doing that now, as far as I can see. It's just that the page can't expand much because of the max-width that's set (which isn't very wide).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by leafspirit View Post
    Ok, I guess disregard this question. Apparently all it took was adding position: relative to the wrapper class. I didn't think I had to explicitly define it as such, but then I've been working with CSS for all of 2 days.
    Ah, I see. I was already looking at the updated page. Glad you got what you wanted.

  7. #7
    SitePoint Enthusiast leafspirit's Avatar
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not sure what you mean by that. There's no need for any "negative" positioning.



    It's doing that now, as far as I can see. It's just that the page can't expand much because of the max-width that's set (which isn't very wide).
    I mean that the images extend 50px outside of the wrapper on either side. I suppose you're right and I could have just set the contentWrapper width to less than the header, but you have to keep in mind that I'm pretty much just winging it the whole way through with a grand total of a weeks worth of web design knowledge that's spread across every possible field. Basically I have very little clue what I'm actually doing and I'm just bashing my head against whatever brick walls I come to until I figure out a way to get what I want. Hence why my max-width is what it is, because I didn't think to do any screen resolution research until yesterday, so I had no clue that almost 80% of web users have resolutions larger than 1024. It's not exactly a big deal though, since the only things I'll have to redo when I change it to something more audience appropriate are the header images, which are placeholders anyway, but I'm too sick of dealing with that particular problem to go spend another 8 hours floundering my way around GIMP right now.

    Thanks for the reply!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Well, you've done jolly well for being at it such a short time. Yeah, I didn't realize quite what you were doing. Anyhow, 900px or thereabout is fine for a width, IMHO. I just wondered if you weren't suer why the divs didn't keep expanding.


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
  •