Solved

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

Posted on 2009-03-30
8
424 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Column Spacing 3 34
logo disappears on cell phones 5 32
svg images disappeared after editing 7 17
Menu Inconsistent 3 20
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…
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 Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now