I'm trying to make it so that the box has the ability to move for different sized screen res's.

So far I've got the top and the bottom images working up to 1660 width... that's as large as I can test.

I don't have an idea how to get the side images in place. I've tried all kinds of things and no luck. I think i'm going to sleep on it and see if it looks any better when I wake up.

If you have any ideas i'd love to try them.

http://www.pgzz.gamerunion.com

my css code

#container{
        width: 100%;
        margin: auto;
        }
        .content_box {
        margin-left: 30px;
        margin-right: 30px;
}
.box{
    height: 70px;
    overflow: hidden;
    background: #fff url(images/r1_c3.jpg) top right no-repeat;
}
    .box div{
        width: 600px;
        height: 70px;
        overflow: hidden;
        background: #fff url(images/r1_c1.jpg) top left no-repeat;
    }

.content{
    background: url(images/b__05.png) repeat;
    padding: 20px 20px 20px; 
    clear: both;
    margin-left:100px;
    margin-right: 100px;
    }

.footer{
    height: 70px;
    overflow: hidden;
    background: #fff url(images/r3_c3.jpg) bottom right no-repeat;
    clear: both;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
    .footer div{
        width: 600px;
        height: 70px;
        overflow: hidden;
        background: url(images/r3_c1.jpg) left bottom no-repeat;
    }

Thanks for the advice!

Can anyone see why i lost my content?

I got the side images up but they are not repeating like they should and all the text in the box is gone.

Can you see what I need to change?

#container{
        width: 100%;
        margin: auto;
        }
        .content_box {
        margin-left: 30px;
        margin-right: 30px;
}
.box{
    height: 70px;
    overflow: hidden;
    background: #eff1c0 url(images/r1_c3.jpg) top right no-repeat;
}
    .box div{
        width: 800px;
        height: 70px;
        overflow: hidden;
        background: #eff1c0 url(images/r1_c1.jpg) top left no-repeat;
}

.content{
    background: url(images/rr.jpg) center right repeat-y;
    clear: both;
    height: 20px;
    overflow: hidden;
    margin-right: 29px;
}
    .content div{
        background: url(images/ll.jpg) center left repeat-y;
        width: 800px;
        height: 20px;
        overflow: hidden;
        margin-left: 29px;
}
.footer{
    height: 70px;
    overflow: hidden;
    background: #eff1c0 url(images/r3_c3.jpg) bottom right no-repeat;
    clear: both;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
    .footer div{
        width: 800px;
        height: 70px;
        overflow: hidden;
        background: url(images/r3_c1.jpg) left bottom no-repeat;
    }

Thanks for the help

Well, your content div only has a height of 20px!

.content {
background:transparent url(images/rr.jpg) repeat-y scroll right center;
clear:both;
height:20px;
margin-right:29px;
}

Remove the height, or put in a min-height (which won't work for IE6).

LadynRed you are my hero!!!!


Thanks for the help I thought that was the height of the images I was using not the div its self.

It's looking good I just need to fingure out how to patch up the gaps and it should be good.

http://www.pgzz.gamerunion.com/

For the gap at the top, caused by margin collapse (not a bug), add padding-top: 1px to the <div> holding your text.

The bottom gap is coming from the default margin on your <p> tags. To kill that gap, add padding-bottom: 25px; to that same div. You can vary that number to suit your layout.

Thank you so much!!! <Hugs>

You're very welcome

I've found a little snag in my box. It breaks on screen res's wider than 1600px.

The guy that pointed it out to me has a screen res of 2560x1600. I changed the images so my sliding door effect opens to 2560px with no problem but now it breaks on small screen res's.

So I think i'm in need of another way to make the box all together.

Do you know of any guides for making a css box with images and borders?

Everything i've found so far uses background colors in places that I need to use images and I can't figure out how to edit the code to allow the box to be flexible in width and height with all of my images.

Any ideas?

How does it break? Most people aren't going to be using greater than 1600x1200, btw.

tim

It breaks down the middle like this






I've got an 800px image on the right and one on the left. So any res over 1600w breaks it.

If you had an image posted there, it isn't showing.

I've been taking a look at it, but I'm still a bit thrown off by your menu; it's all out of whack. I hope you saved a copy of the old version before the modifications. If you have, roll it back and let's see what we can do to help you with it.

tim

Yep i did.

www.pgzz.gamerunion.com/test.html

I'm just looking for good clean code. I built this by picking though 3 different guides that didn't do everything I needed them to and then played around with it until i started to look like a box.

I haven't been able to find a guide that lets me use images for corners and top, bottom, and side borders.

here's a look at my css code

#container{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
}
        .content_box {
        margin-left: 84px;
        margin-right: 84px;
}
.box{
    height: 100px;
    overflow: hidden;
    background: #eff1c0 url(images/r1_c3.jpg) top right no-repeat;
}
    .box div{
        width: 800px;
        height: 100px;
        overflow: hidden;
        background: #eff1c0 url(images/r1_c1.jpg) top left no-repeat;
}

.content{
    background: url(images/rr.jpg) center right repeat-y;
    clear: both;
    margin-right: 84px;
    margin-left: 84px;
}
    .content div{
        background: url(images/ll.jpg) center left repeat-y;
        width: auto;
        padding-top: 1px;
        padding-bottom: 25px;
}
.footer{
    height: 100px;
    overflow: hidden;
    background: #eff1c0 url(images/r3_c3.jpg) bottom right no-repeat;
    clear: both;
    margin-bottom: 30px;
    margin-left: 84px;
    margin-right: 84px;
}
    .footer div{
        width: 800px;
        height: 100px;
        overflow: hidden;
        background: url(images/r3_c1.jpg) left bottom no-repeat;
}

I can't reproduce it, but my monitor doesn't go over 1600x1200. Sounds like it's trying to break it in half for multiple monitors. Since your layout probably shouldn't extend past 1600 anyway, put in a max-width:1600px; on your body and container div. That will work on everything but IE6 and early builds of IE7. I seriously doubt that many using those will be using larger than 1600, but if you worry about that put in a conditional comment fix for those.

Soon, on to the menu....

tim

Sweet!!! I didn't think of doing that.

I've added it to both the box and the body but I have a question. I have a repeating tile image in my body tag that's the background for my whole page. Would that repeating tile image stop at 1600px wide if I have that code in the body?
I've got 2 images in the header of my page what need to repeat off the screen as well.

Couldn't I just add the code to my box and not the body? I think it would do the trick but I need to find someone with a huge screen res to test it.

here's a new link. I've made alittle progress on the navbar.

http://www.pgzz.gamerunion.com

Originally Posted by Snot

Sweet!!! I didn't think of doing that.
...
Couldn't I just add the code to my box and not the body? I think it would do the trick but I need to find someone with a huge screen res to test it.

In a word, yes.

Originally Posted by Snot

here's a new link. I've made alittle progress on the navbar.

http://www.pgzz.gamerunion.com

Looks like you're shaping this thing up pretty well.

tim

Yea I'm trying to. My code is not very clean and i'm looking into better ways to do it without having so much going on.