homepage Welcome to WebmasterWorld Guest from 54.166.159.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS elastic box using images
Trying to make an elastic text box with bgimages for borders and corners
pample

5+ Year Member



 
Msg#: 3762376 posted 7:40 pm on Oct 9, 2008 (gmt 0)

I have been driving myself slowly mad for the last 2 days trying to find a way to design this elastic text box. It is made up of 9 transparent .pngs but I am having serious problems getting the side edge classes to set themselves the same height as the centre class which contains the text.

There are currently different situations occurring in IE and FF with IE showing the edges and FF not giving them any height at all. Please excuse the code as it has been a long day of trial and lots of error.

HTML

<div class="boxMiddleRow">
<div class="boxLeftEdge"></div>
<div class="boxCentre">
<div id="lipsum">
<p> Lorem ipsum ...........</p>
</div>
</div>
<div class="boxRightEdge"></div>
</div>

CSS with /* left in so you might be able to see what I've been trying and what doesn't work.

.boxMiddleRow {
position: static;
/*background-image: url(../images/content/textBoxEdgeLeft.png);
background-repeat: repeat-y;*/
width: 100%;
display:block;
/*padding:50px;*/
}

.boxLeftEdge {
background-image: url(../images/content/textBoxEdgeLeft.png);
background-repeat: repeat-y;
position: static;
display:block;
float:left;
width: 50px;
height:100%;
left: 0px;
/*margin-right:-50px;*/
/*padding-bottom:50px;*/
}
.boxCentre {
background-image: url(../images/content/textBoxCentre.png);
background-repeat: repeat;
position:static;
display:block;
/*float:left;*/
/*margin-left: 50px;
margin-right:50px;*/
margin-left:50px;
margin-right:50px;

}
.boxRightEdge {
background-image: url(../images/content/textBoxEdgeRight.png);
background-repeat: repeat-y;
position: static;
display:block;
float:right;
margin-left:-50px;
/*margin-top:-50px;*/
width: 50px;
height:100%;
right: 0px;
/*padding-top:50px;
padding-bottom:50px;*/
}

Thanks for any help

[edited by: encyclo at 10:43 pm (utc) on Oct. 9, 2008]
[edit reason] no links to personal sites please, see posting guidelines [/edit]

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3762376 posted 10:11 pm on Oct 9, 2008 (gmt 0)

You can do far simpler than needing to having 9 images.

The technique is inspired on sliding doors: where you have 2 nested boxes that let peep the outer on eon one side and the inner onne keeps the other side.

As in image you need a really big box, larger than anything you'll ever put in it. Don't worry: compression will keep the files size small enough and loading faster than any 9 individual images will do.

Next in your html you need 4 box nested so we can make them slide so that each has a corner visible.

e.g.:

<div class="boxbr">
<div class="boxtl">
<div class="boxtr">
</div>
</div>
<div class="boxbl">
Hello!
</div>
</div>

Notice how I nest the boxes, I need them to slide in each other so they each keep one corner.
The naming I use here is to indicate the corner they will end up. Not a very good naming convention but since we'll need extra elements in the html till we have css3, there's always goign to be pollution in the html using this.

Notice the two top ones not having content at all, and ready to slide left/right. They will keep the top and the bottom will be made up out of the outer one sliding with the one having the content itself. Then we'll also let the top and bottom slide just as well.

Right now those boxes don't do much yet. We'll need to decide how much "border" we need (it depends on the image itself). Let's assume for this example 20px will do fine.

For now we give each of these a color (it's much easier that way than having the eventual image already in there.)

So we start from:

.boxtl {
background-color: blue;
}
.boxbr {
background-color: green;
}
.boxtr {
background-color: red;
}
.boxbl {
background-color: yellow;
}

Not much to look at yet is it ?

The easiest one to make pop out is the red top-right one: let's give it some height. It'll stretch the top left one as well in one go.

To make the top-left one show a bit we give it some padding-left shifting the top-right one to the right side.

So now we need to let the bottom right one some space of it's own and make sure the text in the yellow bottom left one isn't in the corner.
All we need is some margin and padding.


* {
margin: 0;
padding: 0;
}
.boxtl {
background-color: blue;
padding-left: 20px;
}
.boxbr {
background-color: green;
}
.boxtr {
background-color: red;
height: 20px;
}
.boxbl {
background-color: yellow;
margin-right: 20px;
padding: 0 0 20px 20px;
}

Let's try it at this point in the stardards compliant browsers: works great.

Let's also try it in IE6 and IE7 before we put in the images in the background as it's easier to position it all perfectly with colors than with images.

All checks out in firefox, opera, safari, IE6 and IE7. No conditional comments needed for IE (that's been a while since I could say that!)

So then we grab our image and plaster it in as background instead of the colors, choosing the right corner to align it to each time.

This yields:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.boxtl {
background: url(image.jpg) no-repeat top left;
padding-left: 20px;
}
.boxbr {
background: url(image.jpg) no-repeat bottom right;
}
.boxtr {
background: url(image.jpg) no-repeat top right;
height: 20px;
}
.boxbl {
background: url(image.jpg) no-repeat bottom left;
margin-right: 20px;
padding: 0 0 20px 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="boxbr">
<div class="boxtl">
<div class="boxtr">
</div>
</div>
<div class="boxbl">
Hello!
</div>
</div>
</div>
</body>
</html>

Enjoy!

Oh there is one drawback: no transparent corners, you need to have the right background color in the image itself (the other parts of the box are under those corners and will shine through).

You can give .boxbr a width as needed.

pample

5+ Year Member



 
Msg#: 3762376 posted 10:36 pm on Oct 9, 2008 (gmt 0)

Thanks for the reply but I'm after something a bit more complicated. The images I'm using are all .pngs with transparency settings on them. I want to be able to reuse it throughout a site setting different widths and having different amounts of text so I need a way of setting the middle edges heights to be the same as the centre (content) box.

Thanks again, if what I want isn't possible I'll revert to your "sliding doors".

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3762376 posted 11:06 pm on Oct 9, 2008 (gmt 0)

The sliding doors technique makes the size very flexible. Using one image will also reduce the download time compared to 9 small images.

Setting a height on an element depending on the size of another random element is something you cannot do as such in CSS alone (you would need JavaScript)
The only thing you can do is size 100% towards a direct parent that has an explicitly set height itself. But that ruins the flexible height.

Alternatives for it exist, but if they are needed for a flexible width you'll soon enough run back into sliding doors.

BTW: IE6 doesn't do transparent background png images (you need to add some filters in a conditional comment)

pample

5+ Year Member



 
Msg#: 3762376 posted 3:35 pm on Oct 10, 2008 (gmt 0)

Hello again and thanks the replies. Sorry to keep bothering but all is not well with me yet. I've scrapped the transparent .pngs and am going with a sliding doors technique. However I've hit another brick wall.

If anyone can spot what's wrong a gold star is winging it's way to you.

[edited by: SuzyUK at 1:03 am (utc) on Oct. 11, 2008]
[edit reason] No URI's please. per TOS, and none of us ever survived on gold stars ;) [/edit]

garann

10+ Year Member



 
Msg#: 3762376 posted 3:51 pm on Oct 10, 2008 (gmt 0)

(Instead of providing a URL, you're supposed to describe the problem and provide code.)

It looks like the problem you're referring to is that your design isn't lining up and there are large gaps between the elements. Even though your divs don't have margins, your paragraphs do, and that's pushing the elements apart. Try setting the padding on the paragraphs instead of the margins.

pample

5+ Year Member



 
Msg#: 3762376 posted 6:16 pm on Oct 10, 2008 (gmt 0)

Thanks for that.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved