CSS Layers, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Layers, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.         
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Layers.


     Back             Next     



CSS Tutorial will explain us now CSS Layers, it is possible to work with layers while using CSS in a website: its basically a pieces of HTML that are placed on top of the regular page with pixel precision.
The advantages of this are obvious - but once again Netscape has very limited support of Cascading Style Sheet layers - and to top it off: the limited support it offers is quite often executed with failures in web browser.
So the real challenge when working with CSS Layers is to make them work on Netscape browsers as well as others.

Example of Cascading Style Sheet Layers

<html>
<head>
<style type="text/css">
  div.layer1 {
     background-color:lime;
     width:150px;
     height:150px;
     position:relative;
     top:10px;
     left:80px;
     z-index:2
     }

  div.layer2 {
     background-color:yellow;
     width:100px;
     height:100px;
     position:relative;
     top:-60px;
     left:35px;
     z-index:1
     }

  div.layer3 {
     background-color:orange;
     width:120px;
     height:120px;
     position:relative;
     top:-180px;
     left:175px;
     z-index:3
     }

</style>
</head>
<body>

<div class="layer1">
     Layer One<br>
     Layer One<br>
     Layer One<br>
     Layer One<br>
     Layer One<br>
</div>

<div class="layer2">
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
     Layer Two<br>
</div>

<div class="layer3">
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
     Layer Three<br>
</div>

</body>
</html>

Output of CSS Layers Example

Layer One
Layer One
Layer One
Layer One
Layer One
Layer Two
Layer Two
Layer Two
Layer Two
Layer Two
Layer Three
Layer Three
Layer Three
Layer Three
Layer Three

CSS Tutorials ends this section with these tips that to create a CSS layer all you need to do is assign the position attribute to your style. The position can be either absolute or relative for a CSS Layer.
The position itself is defined with the top and left properties for a CSS Layer.
Finally, which layer is on top is defined with the z-index attribute while using Cascading Style Sheet Layers

     Back             Next     


 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 192 visitors are online now