Solved

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

Posted on 2009-03-30
8
429 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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