Menu
Hey all,
I am trying to create a css box using background images in the pic [URL=http://img212.imageshack.us/img212/2372/cssboxcorrectmf1.gif]CSS Box[URL=http://img204.imageshack.us/img204/9277/cssboxyh5.gif]CSS Box
The box is 250px wide with the height to vary depending on the content inside. I have tried repeat, repeat-x, repeat-y, no-repeat, fixed, scroll, inherit, auto, etc for the background attributes without success. If I set a fixed height like 200px, it works; but I don’t want a fixed height due to the contents will shrink or expand the box. Is there a better way in doing this other than inserting the images in the divs themselves that I am unaware? And I have been googling for a solution for over a day now. :p
How can I get the side images to repeat?
Thank you. ?
Below is the HTML:
[CODE]<head>
<title>Box</title>
<link href=”box.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div class=”divtl”></div>
<div class=”divt”></div>
<div class=”divtr”></div>
<div class=”clear”></div>
<div class=”divl”> </div>
<div class=”divm”>
test1<br />
test2<br />
test3<br />
test4<br />
</div>
<div class=”divr”> </div>
<div class=”clear”></div>
<div class=”divbl”></div>
<div class=”divb”></div>
<div class=”divbr”></div>
</body>
</html>
Below is the box.css file:
[CODE].divtl /* top left */
{
width: 22px;
height: 22px;
float: left;
background-image: url(box_top_left.gif);
}
.divt /* top */
{
height: 22px;
width: 206px;
float: left;
background-image: url(box_top.gif);
}
.divtr /* top right */
{
height: 22px;
width: 22px;
float: left;
background-image: url(box_top_right.gif);
}
.divl /* left */
{
width: 22px;
float: left;
background-image: url(box_left.gif);
}
.divm /* middle */
{
width: 206px;
float: left;
background-color: #FAFAFA;
}
.divr /* right */
{
width: 22px;
float: left;
background-image: url(box_right.gif);
}
.divbl /* bottom left */
{
width: 22px;
height: 22px;
float: left;
background-image: url(box_bottom_left.gif);
}
.divb /* bottom */
{
height: 22px;
width: 206px;
float: left;
background-image: url(box_bottom.gif);
}
.divbr /*bottom right */
{
height: 22px;
width: 22px;
float: left;
background-image: url(box_bottom_right.gif);
}
.clear /* clear floats */
{
clear: both;
}