Css Tips

1. Easy/Smooth Roll Over Images

   The Css is like this: It gives the link a background and positions it to 0px on the image, then on hover it moves the image 51px. Try it to see with your own image to make easy rollovers, it only takes one image. Example: You make one image, one half is normal and the other half is what you want to see when you hover (normal is 1-50px, hover is 51-100px;). When doing nothing, the image is at 0px or the start of the image. When you hover the image it moves to 51px where the hover image starts. (Image doesn't acually move, just the view box/area you can see of the image moves).

2. Preloading Images

   Css/Html: As you see I have a css code that goes to the class NAV. On hover it changes to a different image, doing this when the person hasn't already loaded the image to their cache will cause the image to look choppy and take some time to make the hover image appear. Then, you see the div! This puts the image on the page so when the page loads the image loads too, but if you look in the Div you see style='display:none;'. This makes everything in the div invisible so the image won't show put it will still be loaded.

3. Visibility vs Display

   These are statements that hides something. Both do the same thing but have different results, lets look at the differences:

Display

• Removes from page and moves everything up
• Can't grab it after deletion
• Easier To Type

Visibility

• Removes from page but keeps everything in the same place
• Can still grab it's values and such after deletion
• More Characters to type and people who can't spell may get it wrong

</p><p>.display {</p><p>display: none;</p><p>}</p><p>.visibility {</p><p>visibility: hidden;</p><p>}</p><p>