How would I create a div for this background??

**deXtrous** · 06-19-2010, 01:06 AM

Hey folks, first time doing this sort of background where all the borders are different, and I'm a bit lost.

Here's a picture of the div I want to create. It's approx 260x300. I have a few effects like curved edges, stroke, gradient and glow around it.

http://img685.imageshack.us/img685/8273/howtok.jpg

I was thinking, slice the top part where the curved edge ends, then somehow repeat a gradient slice along x axis, then again somehow add another for the bottom.

is the key to put a div inside a div?

**tirna** · 06-19-2010, 01:16 AM

maybe I'm missing something

but I would have thought you could just create a div using

Code:

 
<div id="myDiv"></div>

with css of

Code:

 
#myDiv {
width:  260px;
height: 300px;
background-image: url("myPic.jpg")
}

and then put whatever content you like inside the div.

Am I missing something?

**deXtrous** · 06-19-2010, 01:46 AM

True, I guess I was thinking too far into the saving-precious-kb mode by making gradients for backgrounds.

thanks for clearing my head up.

**tirna** · 06-19-2010, 02:04 AM

no problem

I assume you understand how to create a div inside "myDiv", size and position it accordingly so that any content only appears over the dark central part of your background and not over its borders - assuming that is what you eventually want to do.

If you need anymore help, just ask

**Sub_Seven** · 06-19-2010, 11:12 AM

Originally Posted by deXtrous

I was thinking, slice the top part where the curved edge ends, then somehow repeat a gradient slice along x axis, then again somehow add another for the bottom.

That would work if the div's height will decrease/increase according to its content...

**tirna** · 06-19-2010, 05:48 PM

if you would like to make a fluid box whose background border image "resizes" according to content, this is one way of doing it.

I have attached the 2 sliced background images used in the demo.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Fluid Box</title>
 
<style type="text/css">
<!--
 
.container {
width: 300px;
color: rgb(0,0,255);
background: url("roundedRight.jpg") top right no-repeat}
 
.container a {
font-size: 12pt}
.desc {
font-size: 18pt;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") top left no-repeat}
 
.link {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") bottom left no-repeat}
 
.link div {
display: block;
padding: 0px 20px 20px 0px;
font-style: normal;
background: url("roundedRight.jpg") bottom right no-repeat}

-->
</style>

</head>
<body>
 
<div class="container">
 <div class="desc">This box is:</div>
    <div class="link">
        <div>
            <a href="#">Indestructable</a> because it is expandable both X and Y directions. 
            <p>Even more text<p>
            <p>Some paragraph text</p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
    </div>
 
</div>
</body>
</html>

**Major Payne** · 06-19-2010, 11:18 PM

Wouldn't making a top slice, bottom slice and a small middle slice properly sized work? I did that and it was much easier. The middle sliced was set to repeat-y so it expanded with the content. The coding wasn't all that complex.

Might also look into CSS3's new background methods.

**tirna** · 06-19-2010, 11:23 PM

Originally Posted by Major Payne

Wouldn't making a top slice, bottom slice and a small middle slice properly sized work? I did that and it was much easier. The middle sliced was set to repeat-y so it expanded with the content. The coding wasn't all that complex.

Like with most layouts, there is more than 1 way to do something.

Personally I find it easier to use only 2 slices to make the box expand both horizontally and vertically.

Post your code and slices so others can see another way of doing it.

Thread: How would I create a div for this background??

Thread Tools

Display

How would I create a div for this background??

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions