Menu
I have some DIVs stacked on top of each other to achieve an opacity look and everything is working OK. But, I would like to put a logo in the top left corner of the main content window and the left column. I would like this logo to hang over the edges of the content & left column DIVs and be the top most layer. Can anyone help me with this?
Here is my code:
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
body {
margin: 0px;
}
.header-wrap {
height: 75px;
margin: 0px auto;
width: 850px;
}
.page-wrap {
position: relative;
width: 900px;
height: 300px;
margin:0 auto;
line-height: 300px;
}
.page-wrap-bg {
background-color: #000;
position: absolute;
width: 530px;
z-index: 1;
filter: alpha(opacity=80);
opacity: 0.8;
height: 500px;
line-height: 300px;
}
.page-wrap-bg2 {
background-color: #000;
position: absolute;
width: 350px;
right:0;
z-index: 1;
filter: alpha(opacity=80);
opacity: 0.8;
height: 500px;
line-height: 300px;
}
.page-content {
position: relative;
z-index: 2;
float:left;
width: 530px;
Height: 500px;
border-color:White;
border-style:solid;
border-width:1px;
}
.page-column {
position: relative;
z-index: 2;
float:right;
width: 350px;
Height: 500px;
border-color:White;
border-style:solid;
border-width:1px;
overflow:auto;
}
.page-column-header {
position: relative;
z-index: 2;
top:10px;
left:9px;
width: 330px;
Height: 100px;
border-color:White;
border-style:solid;
border-width:1px;
}
.page-column-header .logo {
background-image: url(images/logo.png);
height: 100px;
width: 150px;
position: absolute;
left: -25px;
top: -25px;
}
</style>
</head>
<body>
<div class=”header-wrap”>
</div>
<div class=”page-wrap”><p></p>
<div class=”page-wrap-bg”></div>
<div class=”page-wrap-bg2″></div>
<div class=”page-content”>
</div>
<div class=”page-column”>
<div class=”page-column-header”>
<div class=”logo”></div>
</div>
</div>
</div>
</body>
</html>