h1

CCS Layers (Cascading Style Sheets)

August 26, 2007

 If you have used them you know they are great, if you have not used them you have got to try.

 About a year and a half ago a company called me to do some web work for them. (No designing because I am very non-aesthetic I do not work on beautiful I work on function. However if the site is all laid out in Photo show then I can put it together but databases and dynamic are what I do.) He said they were looking for someone that could take Photoshop layouts and cut them up and put them into HTML with no tables. I said how can you format the page without tables. That is how ingrained tables have become to us.  So I wanted to know more about this CCS Layers. I knew what CCS were but now Layers. Now I refuse to work with tables with few exceptions. The precision, versatility and the ability to manipulate the layers with JavaScript makes page layouts so much easier. Sometimes that can take longer but you get a much better page.

 I work with a couple of designers that had a hard time moving over the CCS Layers. The biggest hurdle was the centering of the page. This is how I do it if anyone has a better way please post the comment.
These two tags go first.

<div style=”position:relative; width:760px; margin:0 auto;”>
    <div style=”position:absolute; left 100px; top:60px; width:400px;”>

Rest of the page content

    </div>
</div>

Check out this page on how you can use JavaScript to manipulate the Layers.  Link to page.

 One thing that is important do not rely too much on your WYSIWYG editor make sure you look at the math. Calculate distances in pixels not visually. As illustrated in the link above you can change the size, visibility almost any characteristic of the Layer with JavaScript.

 The last thing Layers can help you with SEO or search engine placement.

      Rick www.epnetworking.com

Leave a Comment