CSS Forum

**NewBreed** · 06:30 PM

Problem: http://everythingzen.freehostia.com

OK, I am getting frustrated. I've been working on this site a lot and it still needs a lot of work. Many minor things need to be done that will be easy fixes, but my main problem lies with trying to make these boxes. I'd like an easy way to match up my headers on each of these boxes like you see on the top. I'd also like to make the whole box to have rounded corners but I need to get this header working for me first...

My problem is that I'm using the same width for the header and the box background. But they aren't matching up. I know how to align these things up but I'd really like to have a 10px image match a 10 px image in size.
I know I can mess with padding, margin, and the size of the images till everything matches, but I'd like to make it so I don't have to guess and check like crazy when i create boxes for the rest of my life.

So please help me create this in an easier fashion!
This is how the finished product of the boxes should look like:
http://everythingzen.freehostia.com/webpage copy.png

**LadynRed** · 03-25-2009, 10:49 AM

Those 2 are not at all alike, so which boxes on the header are you referring to.

On the dog layout, you could simplify that header quite a bit and eliminate a few of those divs.

**NewBreed** · 03-25-2009, 04:10 PM

Well right now I'm scared to change anything... I'll wait till I get your feedback again.

This is my top box, I want the bottom two to look like this one.
(by header i was referring to box headers, hope we're on the same page.)

I'll relabel code so it's easier to understand, the labeling now was to help my messed up head to understand what I was doing.

Code:

/*top box*/
.topmidtop /*BOX HEADER*/
{
    margin: .5em .3em .0em .5em;
    padding-left: .5em;
    width: 741px;
    float: left;
    background: url('topmidtop.png') no-repeat;
}

.topmiddle /*TOP BOX*/
{
    margin: .0em .3em .3em .5em;
    padding: .8em;
    width: 741px;
    float: left;
    background: url('topmidmid.png') repeat-y;
}
/*End of top box*/

THESE NEED CHANGING

Code:

.middletop/*box header*/
{
    width: 345px;
    float: left;
    background: url('middletop.png') no-repeat;
}

.middle/*Middle Box*/
{
width: 345px;
margin: 0 0 .3em .5em;
padding: .8em;
float: left;
background: url('middle.png') repeat-y;
}


.righttop/*box header*/
{
    width: 353px;
    float: left;
    background: url('righttop.png') no-repeat;
}

.right /*Right Box*/
{
    width: 353px;
    padding: .8em;
    margin: 0 .5em .3em -.5em;
    float: left;
    background: url('rightmid.png') repeat-y;
}

Images are the same size. Yet when i upload them on the page they shrink... Like I said, I can keep uploading the image to make it work, but I don't want to go through life guessing and checking images.

What specifically can I simplify?