Solved

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

Posted on 2009-03-30
8
427 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:nikez2k4
  • 4
  • 3
8 Comments
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24017889
See IE6 does not support PNG images.
0
 
LVL 11

Expert Comment

by:level9wizard
ID: 24017999
Take a look here:
http://www.maxdesign.com.au/presentation/liquid/

Some examples of liquid layouts. Good luck.
0
 
LVL 1

Author Comment

by:nikez2k4
ID: 24020251
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

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

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

Thanks,
James
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24037179
<!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>
0
 
LVL 1

Author Comment

by:nikez2k4
ID: 24075738
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
0
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 500 total points
ID: 24075853
For this, specify height in #test_content in pixels..
0
 
LVL 1

Author Comment

by:nikez2k4
ID: 24076541
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

0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question