Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts

    Transparent PNG to frame a container

    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:

    Code:
    <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.
    Attached Thumbnails Attached Thumbnails Transparent PNG to frame a container-png-overlap.jpg  
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?

    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;
    }
    #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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.
    Attached Thumbnails Attached Thumbnails Transparent PNG to frame a container-png-overlap.jpg   Transparent PNG to frame a container-png-overlap2.jpg  
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe an hr and some playing around with the widths will work...
    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: #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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.

    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">
    #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>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    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;
    	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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    optimus203 (11-12-2011)

  • #7
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    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.
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •