How to create the css for this graphic

@apegApr 22.2010 — #Vertical is easy, there are probably better ways to do this but this will probably be the easiest:

[CODE]	<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>[/CODE]

-aPeg

@tirnaApr 26.2010 — #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.

[code=php] 
 <!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>
 [/code]

[upl-file uuid=c4be8217-1aa0-4efc-8606-913aaa548e6f size=3kB]roundedLeft.jpg[/upl-file]

[upl-file uuid=06583e74-58ba-4b77-9e97-b6b53aafa4e3 size=9kB]roundedRight.jpg[/upl-file]

How to create the css for this graphic

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

How to create the css for this graphic

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴