Results 1 to 3 of 3

Thread: Logo that overlaps a div, beyond its borders

  1. #1
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Logo that overlaps a div, beyond its borders

    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
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  3. #3
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Something like that, although that link doesn't give many details...

    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>

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
  •