#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    13
    Rep Power
    0

    Overlapping image on centered banner


    Hi all,
    I'm working on a header which I'm having trouble with. Here's a crude diagram of what I'm looking to accomplish:

    Code:
                            ____________
     _______________________|           |___
    |  _____________________|    Logo   |_  |
    | |                     |___________| | |
    | |  Banner                           | |
    | |___________________________________| |
    |                                       |
    |                                       | <-- container div
    Uhhh, hopefully you can see what I'm getting at!

    I want a logo to be positioned on top of the banner image, but offset above and to the right, outside the container div holding the banner.

    Note also that the container div is centered in the page, so that the relative amount of space on either side of the container div increases and decreases with the browser window.

    Approaches I've tried:
    (1) Use position:absolute for the logo. The problem here is the horizontal position. Regardless of what I've tried, the logo moves horizontally with the size of the window. I want the logo fixed relative to the container div.

    (2) I've tried to use negative margins and place the logo inside the container div, but this doesn't seem to work either.

    How should I do this? All suggestions welcome.
    Thanks!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Give the container <div> "position:relative" to create a new positioning context for descendant absolutely positioned elements.

    (2) I've tried to use negative margins and place the logo inside the container div, but this doesn't seem to work either.
    We can't tell you why that didn't work if we can't see the code you used.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    13
    Rep Power
    0
    With some other help, I managed to get it working as follows:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	width: 800px;
    	margin: 30px auto;
    	padding: 50px 0 500px;
    	position: relative;
    	background: #999;
    }
    #banner {
    	height: 100px;
    	width: 700px;
    	margin: 0 auto;
    	background: #fc0;
    }
    #logo {
    	height: 100px;
    	width: 200px;
    	position: absolute;
    	top: -25px;
    	left: 500px;
    	background: #099;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="banner"></div>
            <div id="logo"></div>
        <!--end container--></div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo