Skip to main content

Forums

This topic contains 4 replies, has 0 voices, and was last updated by  tutzor 11 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #22680

    tutzor
    Member

    Hello, I’m trying to create a div box with round corners and shadows all around it, what is the best way to do it? Its height has to be auto stretched and the width will be fixed. Here is the image so you can see what I mean: http://www.helpnetwork.org/tutzor/images/main-bg.gif Thanks in advance.

    #47489

    Edwin
    Member

    This reply has been reported for inappropriate content.

    I think the best way is working with two images. A top-image with only the round corners on the top and a bottom image very high with the bottom corners. Maybe it’s even better to use three images (so you can use smaller images) but this is probably the easiest way:

    Code:
    div#example {
    background: url(top.gif) no-repeat top center;
    }
    div#example p{
    background: url(bottom.gif) no-repeat bottom center;
    }

    hello

    It’s already late here, so sorry for any mistakes, but I just wanted to give you a quick answer, hope I did it well ;)

    #47491

    This reply has been reported for inappropriate content.

    That is what I do when working with fixed widths, but if you are looking for something more dynamic without images try javascripts. They have their draw backs too though, render time, compatibility, and sometimes massive amounts of code added to your document.

    #47505

    daGUY
    Member

    This reply has been reported for inappropriate content.

    I would do it with three divs, so you could have the middle repeat infinitely and still have the rounded corners on the top and bottom. Something like this:

    Code:
    div#top {background-image: url(‘../images/top.jpg’); background-repeat: no-repeat;}
    div#middle {background-image: url(‘../images/middle.jpg’); background-repeat: repeat-y;}
    div#bottom {background-image: url(‘../images/bottom.jpg’); background-repeat: no-repeat;}
    Code:
    Content goes here!

    Of course, you have to give the top and bottom dimensions since they’re empty, etc. But that’s the general setup.

    #47510

    Adam
    Member

    This reply has been reported for inappropriate content.

    If you mean like this website where the whole page has rounded corners and has shadow around it have a look at the videos chris did about the creation (from scratch) of this website.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star