Arctic_Fox
July 8th, 2008, 09:30 PM
I'm trying to make a simple box using CSS. It should be white in the middle, fading to grey on the sides. I've mostly copied it from a site, as I don't know CSS. This is really all I need, so I don't want to spend much time on learning it (sorry, I'm short on time). Could anyone help me complete this small example? I have an image for the interior, one for each of the four sides of the box, and the 4 corners.
style.css
/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop { background: url(tp.gif) repeat-x top; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop div div { background: url(tr.gif) no-repeat top right; }
.rbbot div div { background: url(bl.gif) no-repeat bottom left; }
.rbbot div{ background: url(br.gif) no-repeat bottom right; }
.rbbot { background: url(bp.gif) repeat-x bottom; }
/* height and width stuff, width not really nessisary. */
.rbtop div,.rbtop div div, .rbtop, .rbbot div, .rbbot div div, .rbbot {
width: 100%;
height: 15px;
font-size: 1px;
}
.rbcontent { margin: 0 15px; }
.rbroundbox { width: 50%; margin: 1em auto; }
test.html
<html>
<head>
<title>Win!</title>
<style type="text/css">
@import url('style.css');
</style>
</head>
<body>
<div id="body">
<div class="rbroundbox">
<div class="rbtop"><div><div></div></div></div>
<div class="rbcontent">
<p>Text here. And here.</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div><div></div></div></div>
</div><!-- /rbroundbox -->
</div>
</body>
</html>
:guitar:
style.css
/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop { background: url(tp.gif) repeat-x top; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop div div { background: url(tr.gif) no-repeat top right; }
.rbbot div div { background: url(bl.gif) no-repeat bottom left; }
.rbbot div{ background: url(br.gif) no-repeat bottom right; }
.rbbot { background: url(bp.gif) repeat-x bottom; }
/* height and width stuff, width not really nessisary. */
.rbtop div,.rbtop div div, .rbtop, .rbbot div, .rbbot div div, .rbbot {
width: 100%;
height: 15px;
font-size: 1px;
}
.rbcontent { margin: 0 15px; }
.rbroundbox { width: 50%; margin: 1em auto; }
test.html
<html>
<head>
<title>Win!</title>
<style type="text/css">
@import url('style.css');
</style>
</head>
<body>
<div id="body">
<div class="rbroundbox">
<div class="rbtop"><div><div></div></div></div>
<div class="rbcontent">
<p>Text here. And here.</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div><div></div></div></div>
</div><!-- /rbroundbox -->
</div>
</body>
</html>
:guitar: