Log in

View Full Version : Logo that overlaps a div, beyond its borders


Quimbly
02-04-2011, 01:01 AM
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:



____________
_______________________| |___
| _____________________| 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!
Nile
02-04-2011, 01:16 AM
Something like: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html#outside
Quimbly
02-04-2011, 03:55 AM
Something like that, although that link doesn't give many details...

With some other help, I managed to get it working as follows:


<!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>