...

View Full Version : Transparent PNG to frame a container



optimus203
11-12-2011, 01:04 AM
Hey everyone. I'm trying to figure out how I could place a frame consisting of transparent PNG image within a layout. The layout is basically like below. I was thinking of just floating a div left right after the wrapper, but doesn't seem to work properly.

Here is the general idea:



<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
</div>

When I place the png as a background image, the overlap gets cropped by the heaver, nav, and content edges. I've tried z-index as well, but without any luck.

So, based on the attached image, the white and purple are part of the frame, and they overlap all gray content. Any help would be greatly appreciated.

Excavator
11-12-2011, 02:42 AM
Hello optimus203,
It's kind of hard to tell what heavier #nav and #content edges might look like. Does the background image your using actually work with the edges you have on those elements?

In this example I've set wrapper to the width of the background image and #header, #nav, #content a little narrower. Maybe that will work for you?


<!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;
}
#wrapper {
width: 1072px;
margin: 0 auto;
background: url(http://www.codingforums.com/attachment.php?attachmentid=10477&d=1321056289);
}
#header, #nav, #content {
width: 1000px;
margin: 0 auto;
}
#header {
height: 80px;
background: #999;
}
#nav {
height: 20px;
background: #0f0;
}
#content {
height: 600px;
background: #3f9;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
</div>
</body>
</html>

optimus203
11-12-2011, 03:05 AM
Thanks excavator. I've tried that route previously, but it ends up cutting off the overlaps from the png image - since I'm setting that border image as a background, I'm assuming the corresponding div's are being layed on top of the wrapper image.

The first attached image is desired effect, and the 2nd attached image is the result of setting png as part of background (the edged from header, nav, and content create a sharp edge over the wrapper image). You have to look closely, as the difference is subtle.

Excavator
11-12-2011, 03:26 AM
Maybe an hr and some playing around with the widths will work...

<!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: #fff;
}
#wrapper {
width: 1100px;
margin: 0 auto;
background: url(http://www.codingforums.com/attachment.php?attachmentid=10477&d=1321056289) repeat-y center;
}
#header, #nav, #content {
width: 1000px;
margin: 0 auto;
}
#header {
height: 80px;
background: #999;
}
#nav {
height: 20px;
background: #0f0;
}
#content {
height: 600px;
background: #3f9;
}
hr {
height: 5px;
width: 1100px;
margin: 0;
background: #000;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<hr />
<div id="nav">
</div>
<hr />
<div id="content">
</div>
</div>
</body>
</html>

optimus203
11-12-2011, 04:24 PM
Thanks Excavator, but that still doesn't solve my problem with the sides of wrapper overlaying everything else. I've modified the code you provided below. You will see that the all the non-wrapper layers are overlapping the purple wrapper borders. I need the purple wrapper borders to sit on top of everything else.

I've also attached a png of the wrapper overlay. Thanks again for all your help and effort.


<!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">
#wrapper {
width: 1100px;
margin: 0 auto;
background: url(http://www.codingforums.com/attachment.php?attachmentid=10477&d=1321056289) repeat-y center;
}
#header, #nav, #content {
width: 1060px;
margin: 0 auto;
}
#header {
height: 80px;
background: #999;
}
#nav {
height: 20px;
background: #0f0;
}
#content {
height: 600px;
background: #3f9;
}
hr {
height: 5px;
width: 1100px;
margin: 0;
background: #000;
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
</div>
</body>
</html>

Excavator
11-12-2011, 04:49 PM
Sorry I'm being so dense, not having a tranparent image it did not make sense to overlay #header, #nav and #content because it just hides them. Pretty sure z-index will sort your layers for you. Something like this example maybe.

This will make any links unuseable because they will be underneath the overlay.

<!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;
position: relative;
background: #ccc;
}
#wrapper {
height: 700px;
width: 1100px;
position: absolute;
top: 0;
left: 50%;
margin: 0 0 0 -550px;
z-index: 2;
background: url(http://www.codingforums.com/attachment.php?attachmentid=10477&d=1321056289) repeat-y center;
}
#header, #nav, #content {
width: 1060px;
position: absolute;
left: 50%;
margin: 0 0 0 -530px;
z-index: 1;
}
#header {
height: 80px;
top: 0;
background: #999;
}
#nav {
height: 20px;
top: 80px;
background: #0f0;
}
#content {
height: 600px;
top: 100px;
background: #3f9;
}
</style>
</head>
<body>
<div id="wrapper"></div>
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
</div>
</body>
</html>

optimus203
11-12-2011, 05:56 PM
Thanks Excavator. Thats what I thought about links not being unclickable - which is problematic. It looks like I will just have to chop the image into sections, set them up as background images, and lay the content layers on top of that. I appreciate your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum