Code+Resource

For this contribution, each student will find 2 examples of code (CSS, JavaScript) that you find useful for your project. It could be a way of viewing content, formatting, navigation, menus, etc.

Include:
 * a brief description of the code; what it does
 * a breakdown of how it works;
 * a link to an example you have made
 * clarify the how can it be customized for others in simple terms

In order to change the layering order or stack order of elements in a webpage use the z-index function in css. Elements with a lower z-index value will put it behind/lower than all elements with greater z-index values. //For example:// //Z-index value of -1 like the one below will put that element (in this case an image) behind all of the other elements with a positive value.//
 * TIP 01: CSS Z-INDEX PROPERTY**

img { position:absolute; left:0px; top:0px; z-index:-1; } Link: []

Image sprites is several images incorporated into one in order to reduce server requests, create faster load time and no delay, and save bandwidth. They also eleminate possibility of image shifting especially in state changes. As a result it becomes useful for navigation, and hovers. In oder to use this css technique simply the following code is necessary.
 * TIP 02: CSS IMAGE SPRITES**

img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; }

This code identifies the portion of the image that you want visible in the browser. To create navigation from this image sprite, create an html list which looks like this:

#navlist{position:relative;}
 * 1) navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
 * 2) navlist li, #navlist a{height:44px;display:block;}


 * 1) home{left:0px;width:46px;}
 * 2) home{background:url('img_navsprites.gif') 0 0;}


 * 1) prev{left:63px;width:43px;}
 * 2) prev{background:url('img_navsprites.gif') -47px 0;}


 * 1) next{left:129px;width:43px;}
 * 2) next{background:url('img_navsprites.gif') -91px 0;}

Specify the specific portion of the image to view for each section (home, previous, next) using the left and width properties. To create a hover affect create a second "hover" image which changes the state of your first image. Next add a third line of code to each of the ones above: 
 * 1) home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
 * 2) prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
 * 3) next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

Once again specify the left and width properties to correspond to the first image.

Link:[| http://www.w3schools.com/css/css_image_sprites.asp]