PDA

Click to See Complete Forum and Search --> : How to create the css for this graphic

mattastic
04-22-2010, 10:43 AM
Hi, I need to create css using the attached graphic, can anyone tell me the best way to go about it and how to slice it up?

I need to the div to expand vertically depending upo howmuch text is in there.

Thankyou
apeg
04-22-2010, 02:15 PM
Vertical is easy, there are probably better ways to do this but this will probably be the easiest:

<style type="text/css">
.constant {
background-repeat:repeat-y;
background-attachment: scroll;
background-position: top center;
background-image:url(images/-CENTER SLICE-);
}
#container {
width:585px;
padding:0px;
margin:0px;
}
#roof {
background-image:url(images/-TOP SLICE-);
height:-HEIGHT OF TOP SLICE-px;
background-repeat:no-repeat;
}
#content_floor {
background-image:url(images/-BOTTOM SLICE-);
background-repeat:no-repeat;
background-position:bottom center;
}
</style>
<div id='container' class='constant'>
<div id='roof' class='constant'></div>
<div id='content_floor' class='constant'>
put your content here
</div>
</div>

-aPeg
tirna
04-26-2010, 06:09 AM
This code will create a box that is automatically expandable in both the X and Y directions depending on the content.

The background is a 4 sided border with rounded corners.

I have attached the 2 background image slices the box uses.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid Box</title>
<style type="text/css">
<!--

.container {
width: 200px;
color: rgb(0,0,255);
background: url("roundedRight.jpg") top right no-repeat}
.container a {
font-size: 12pt}

.desc {
font-size: 18pt;
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") top left no-repeat}

.link {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 20px;
background: url("roundedLeft.jpg") bottom left no-repeat}

.link div {
display: block;
padding: 0px 20px 20px 0px;
font-style: normal;
background: url("roundedRight.jpg") bottom right no-repeat}

-->
</style>

</head>
<body>

<div class="container">
<div class="desc">This box is:</div>
<div class="link">
<div>
<a href="#">Indestructable</a><br />because it is expandable both X and Y directions.
<p>Even more text<p>
<p>Some paragraph text</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</div>
</div>

</body>
</html>