asked on

How do I create a liquid container with transparent PNG border images?

I am trying to create a container that uses transparent PNG images for the borders. I have followed numerous tutorials on the net but I can't quite get it to work how I want. I think the problem is that I am using transparent images for the borders, where as the tutorials I have seen expect the images to be solid - i.e. the background the container sits on it a single colour.

I'm still learning CSS so I might be missing a concept or 2 here but could someone provide some code on how this might be done?

Essentially what I would like to be able to do is have a resizable (liquid) container that uses transparent PNG images for borders. I need the border images to be transparent as the background the container sits on is a gradient and it needs to be resizable as I will be using jQuery to animate it.

One of the main problems I seem to be having is that I need the container to be able to resize depending on the content that is inside it. So not only do I need to be able to resize the whole thing with jQuery but it needs to resize dynamically depending on the amount of content inside it.

I have attached an image of the end result I am trying to create. If you need anymore info or would like to see what I have tried so far then let me know.

Cheers,
James

qwerty021600

See IE6 does not support PNG images.

level9wizard

Take a look here:
http://www.maxdesign.com.au/presentation/liquid/

Some examples of liquid layouts. Good luck.

nikez2k4

ASKER

Thanks for the link :) I have read the information there but other than the theory behind the structure nothing is relevant to what I am trying to do here.

I have attached the code I have been working on. There are a couple of problems with it though:

1. Firstly the container doesn't vertically fill the wrapper. If I set the height of the wrapper to 200px (as in the example), I want the top and bottom section to stay fixed to the top and bottom of the wrapper and the content section to fill the space in between.

2. The other problem with the code at the moment is that if you put too much content in the box the size doesn't change with it. The wrapper stays fixed at 200px and the content overflows underneath whatever is below the wrapper div.

I have spent nearly all day on this and my CSS knowledge is holding me back. If you find out what's wrong could you explain what I have missed or what I can do to create this liquid box that I can animate.

Thanks again,
James

P.S.
qwerty - I'm not too bothered about IE6 at this point, I need to get the container working as i need first and then I can get the PNG issues sorted.

<style type="text/css">
#test_wrapper {
	width: 200px;
	height: 200px;
	position: relative;
	border: 1px solid black;
}
 
#test_top {
	height: 30px;
	margin-right: 30px;
	background: url(images/page_bg_tl.png) no-repeat left top;
}
 
#test_top span {
	display: block;
	position: relative;
	height: 30px;
	margin-right: -30px;
	background: url(images/page_bg_tr.png) no-repeat right top;
}
 
#test_content_wrapper {
	margin-right: 30px;
	background: url(images/page_bg_l.png) repeat-y left top;
}
 
#test_right_bg {
	background: url(images/page_bg_r.png) repeat-y right top;
	padding: 0 30px 0 30px;
	margin: 0 -30px 0 0;
}
 
#test_content {
	background: #FFF;
}
 
#test_bottom {
	height: 30px;
	margin-right: 30px;
	background: url(images/page_bg_bl.png) no-repeat left bottom;
}
 
#test_bottom span {
	display: block;
	position: relative;
	height: 30px;
	margin-right: -30px;
	background: url(images/page_bg_br.png) no-repeat right bottom;
}
</style>
<div id="test_wrapper">
    <div id="test_top"><span></span></div>
    <div id="test_content_wrapper">
    	<div id="test_right_bg">
            <div id="test_content">
                <p>This is some text.</p>
            </div>
        </div>
    </div>
    <div id="test_bottom"><span></span></div>
</div>

Open in new window

nikez2k4

ASKER

Does anyone have any suggestions? I am really stuck here and I'm not sure what the next step is...

Thanks,
James

qwerty021600

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#test_wrapper {
width: 200px;
height: 200px;
position: relative;
border: 1px solid black;
            overflow: scroll;
}

#test_top {
height: 30px;
margin-right: 30px;
background: url(images/page_bg_tl.png) no-repeat left top;
            position:relative;
}

#test_top span {
display: block;
position: relative;
height: 30px;
margin-right: -30px;
background: url(images/page_bg_tr.png) no-repeat right top;
}

#test_content_wrapper {
margin-right: 30px;
background: url(images/page_bg_l.png) repeat-y left top;
}

#test_right_bg {
background: url(images/page_bg_r.png) repeat-y right top;
padding: 0 30px 0 30px;
margin: 0 -30px 0 0;
}

#test_content {
background: #FFF;
}

#test_bottom {
height: 30px;
margin-right: 30px;
background: url(images/page_bg_bl.png) no-repeat left bottom;
            position: relative;
}

#test_bottom span {
display: block;
position: relative;
height: 30px;
margin-right: -30px;
background: url(images/page_bg_br.png) no-repeat right bottom;
}
</style>

</head>

<body>
<div id="test_wrapper">
<div id="test_top"><span>Header Text</span></div>
<div id="test_content_wrapper">
<div id="test_right_bg">
<div id="test_content">
<p>This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.
This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.This is some text.</p>
</div>
</div>
</div>
<div id="test_bottom"><span>Bottom Text</span></div>
</div>
</body>
</html>

nikez2k4

ASKER

Thanks for your reply qwerty...however the problem still remains. The content area doesn't fill the spare space in the container and only enlarges with the content.

I would like the content section to fill the container, but also include the borders on all sides. So essentially the content area has a 100% height minus the widths and heights of the borders (30px on each side).

I hope that makes sense.

Any ideas?

Thanks,
James

ASKER CERTIFIED SOLUTION

qwerty021600

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nikez2k4

ASKER

If i set the content div to a pixel height then it's not liquid so as the height and width of the container changes with animation the content div will remain static, which is not what I want.

I have updated my CSS so that everything works exactly how I want. I have tested it in IE 7 & 8, FF 3, Chrome and Safari 4 Beta. At they all display the same thing. The problem I am having now is that the content div scales as it is set to 100%, however it is taking the 100% height of the over all container which means there are 60 pixels extra to the height which I can't get rid of.

I don't seem to be able to change the margin heights of the content boxes...presumeably because the height is set to 100%.

If you try my code now it should look how I want it to look, but I just need to get rid of the extra pixels (60 of them) that are causing the content div to expand outside of the container box.

Thanks for your help :)

James

P.S.
I have added a second wrapper set so you can see what happens when you have 2 boxes next to each other vertically.

<style type="text/css">
#test_wrapper {
	width: 200px;
	height: 200px;
	position: relative;
	border: 1px solid black;
}
 
#test_top {
	height: 30px;
	margin-right: 30px;
	background: url(images/page_bg_tl.png) no-repeat left top;
}
 
#test_top span {
	display: block;
	position: relative;
	height: 30px;
	margin-right: -30px;
	background: url(images/page_bg_tr.png) no-repeat right top;
}
 
#test_content_wrapper {
	background: url(images/page_bg_l.png) repeat-y left top;
	height: 100%;
	width: 100%;
}
 
#test_right_bg {
	background: url(images/page_bg_r.png) repeat-y right top;
	padding: 0 30px 0 30px;
	height: 100%;
}
 
#test_content {
	background: #FFF;
	height: 100%;
}
 
#test_bottom {
	height: 30px;
	margin-right: 30px;
	background: url(images/page_bg_bl.png) no-repeat left bottom;
}
 
#test_bottom span {
	display: block;
	position: relative;
	height: 30px;
	margin-right: -30px;
	background: url(images/page_bg_br.png) no-repeat right bottom;
}
</style>
<div id="test_wrapper">
    <div id="test_top"><span></span></div>
    <div id="test_content_wrapper">
    	<div id="test_right_bg">
            <div id="test_content">
                <p>This is some text.</p>
            </div>
        </div>
    </div>
    <div id="test_bottom"><span></span></div>
</div>
<div id="test_wrapper">
    <div id="test_top"><span></span></div>
    <div id="test_content_wrapper">
    	<div id="test_right_bg">
            <div id="test_content">
                <p>This is some text.</p>
            </div>
        </div>
    </div>
    <div id="test_bottom"><span></span></div>
</div>

Open in new window