Hello,
I know how to make it with tables but I can't figure out how to do it in css.
Here is what I have.
http://www.pgzz.gamerunion.com
The white box in the middle is made with tables and 9 images. I would like to create the same look using css.
I've read a number of pages about css rounded corners using 4 images but when I try to add in images for the top middle, bottom middle, and sides middle. It doesn't work.
Any idea how or if this effect can be done in css?
Thanks
Update
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!
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
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
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?
CODE
#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
You have "overflow: hidden;" for your .content class, meaning that instead of expanding to fit your content it will just hide it.
Try removing that and see if works?
Iain
Try removing that and see if works?
Iain
It made the content show back up but it also added a new problem.
The bottom images are not sticking to the bottom margin any more.
I still can't get the side images to repeat.
The text is kinda just a place holder thats not really important. I'm trying to make the box resize to have a 30px gap on the sides. The bottom should go down as far as the text does.
I had it working with tables and i've been reading rounded corner guides to try and make it work in css but my skills are limited at best.
I've got all the content on another web page i'm making a new design for so my plan is to copy everything out of the wrapper and past it into my box.
Do you know of a better way to get the box working?
The only guides I can find just tell you how to use 4 corner images and a back ground color to get the look. I havent found one that tells me how to get the bottom, top, and sides.
Just by playing around with it I got the top and bottom images to work by increasing the width to 800px for each. They kinda just overlap each other.
For the sides i'm trying the same thing and its almost working. They are there and in the right place but they are not repeating.
here is the html part of my page. All the test text was just to make sure that the bottom images moved down as the content on the page got larger.
The bottom images are not sticking to the bottom margin any more.
CODE
.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;
}
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;
}
I still can't get the side images to repeat.
CODE
.content{
background: url(images/rr.jpg) center right repeat-y;
clear: both;
height: 20px;
margin-right: 29px;
}
.content div{
background: url(images/ll.jpg) center left repeat-y;
width: 800px;
height: 20px;
margin-left: 29px;
}
background: url(images/rr.jpg) center right repeat-y;
clear: both;
height: 20px;
margin-right: 29px;
}
.content div{
background: url(images/ll.jpg) center left repeat-y;
width: 800px;
height: 20px;
margin-left: 29px;
}
The text is kinda just a place holder thats not really important. I'm trying to make the box resize to have a 30px gap on the sides. The bottom should go down as far as the text does.
I had it working with tables and i've been reading rounded corner guides to try and make it work in css but my skills are limited at best.
I've got all the content on another web page i'm making a new design for so my plan is to copy everything out of the wrapper and past it into my box.
Do you know of a better way to get the box working?
The only guides I can find just tell you how to use 4 corner images and a back ground color to get the look. I havent found one that tells me how to get the bottom, top, and sides.
Just by playing around with it I got the top and bottom images to work by increasing the width to 800px for each. They kinda just overlap each other.
For the sides i'm trying the same thing and its almost working. They are there and in the right place but they are not repeating.
here is the html part of my page. All the test text was just to make sure that the bottom images moved down as the content on the page got larger.
CODE
<div id="container">
<div class="content_box">
<div class="box">
<div>
</div>
</div>
</div>
<div class="content">
<div>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
</div>
</div>
<div class="footer">
<div>
</div>
</div>
</div>
<div class="content_box">
<div class="box">
<div>
</div>
</div>
</div>
<div class="content">
<div>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
<p>Test Test</p>
</div>
</div>
<div class="footer">
<div>
</div>
</div>
</div>
Maybe these will inspire you: http://www.cssjuice.com/25-rounded-corners...iques-with-css/ . Or else search for "rounded corners css".
Thanks for the link!!!
This one sounds like what i'm trying to do
http://www.456bereastreet.com/archive/2005...rs_and_borders/
It looks like it gives any width like I want but do you know if it will also become taller as I add more content to the page?
This one sounds like what i'm trying to do
http://www.456bereastreet.com/archive/2005...rs_and_borders/
It looks like it gives any width like I want but do you know if it will also become taller as I add more content to the page?
I done!!!!
I had to get alot of help but it think it's good unless you see any problems?
I had to get alot of help but it think it's good unless you see any problems?
Congrats, it looks quite good already even without content 
.
.
You're welcome, NovaArgon.
Ah, you used a table anyway. I thought you wanted to leave those out and use CSS.
Ah, you used a table anyway. I thought you wanted to leave those out and use CSS.
In the setup I have now? Do you mean the buttons?
http://www.pgzz.gamerunion.com
I didn't know I was using them anymore <gulp>
http://www.pgzz.gamerunion.com
I didn't know I was using them anymore <gulp>
Definitely no tables there.
Oops, sorry, I looked at the url without pgzz. Didn't look further up.
Pity though that the navigation list doesn't stay on one line. Wasn't that you asking about using images without built-in text, in another thread of yours? Would avoid using <span> and inline images.
Pity though that the navigation list doesn't stay on one line. Wasn't that you asking about using images without built-in text, in another thread of yours? Would avoid using <span> and inline images.
Yea I've got two things I'm trying to fix right now.
one the box is doing what a box should but it breaks with screen res's larger than 1600 width. I'm using two images that are 800px wide on the left and right so that the box re sizes it's self for different screen res's. I'm not sure if I just need to make the images wider to stop it from breaking or if that will just make it break on small screen res's. I'm going to play with that here in a bit.
The other is I've been trying to figure out how to get my nav bar working.
I'm going to re size everything once it's all fixed.
one the box is doing what a box should but it breaks with screen res's larger than 1600 width. I'm using two images that are 800px wide on the left and right so that the box re sizes it's self for different screen res's. I'm not sure if I just need to make the images wider to stop it from breaking or if that will just make it break on small screen res's. I'm going to play with that here in a bit.
The other is I've been trying to figure out how to get my nav bar working.
I'm going to re size everything once it's all fixed.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.