www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Jun 2010
    Posts
    23

    How would I create a div for this background??

    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?
    Last edited by deXtrous; 06-19-2010 at 02:17 AM.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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?

  3. #3
    Join Date
    Jun 2010
    Posts
    23
    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.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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

  5. #5
    Join Date
    Nov 2009
    Posts
    97
    Quote Originally Posted by deXtrous View Post
    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...

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    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 {
    width300px;
    colorrgb(0,0,255);
    backgroundurl("roundedRight.jpg"top right no-repeat}
     
    .
    container a {
    font-size12pt}
    .
    desc {
    font-size18pt;
    margin0px 0px 0px 0px;
    padding20px 0px 0px 20px;
    backgroundurl("roundedLeft.jpg"top left no-repeat}
     
    .
    link {
    margin0px 0px 0px 0px;
    padding20px 0px 0px 20px;
    backgroundurl("roundedLeft.jpg"bottom left no-repeat}
     
    .
    link div {
    displayblock;
    padding0px 20px 20px 0px;
    font-stylenormal;
    backgroundurl("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</abecause 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
    Attached Images Attached Images

  7. #7
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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.

  8. #8
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Major Payne View Post
    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.
    Last edited by tirna; 06-20-2010 at 12:42 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles