3. CSS Navigation Bar
There are two ways to create a horizontal
navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the
links to be the same size, you have to use the
floating method.
about.me/babon
4. CSS Navigation Bar
inline method
li {
display: inline;
}
By default, <li> elements are block elements.
Here, remove the line breaks before and after
each list item, to display them on one line
about.me/babon
6. CSS Navigation Bar
float: left;
● use float to get block elements to slide next
to each other
display: block;
● displaying the links as block elements makes
the whole link area clickable (not just the
text), and it allows us to specify the width
about.me/babon
7. CSS Navigation Bar
width: 60px;
● since block elements take up the full width
available, they cannot float next to each
other. We specify the width of the links to
60px.
about.me/babon
8. CSS Image Gallery
Use jQuery instead to handle image galleries.
See jQuery jAM Tutorials
about.me/babon
9. CSS Image Opacity
IE9, Firefox, Chrome, Opera, and Safari use
the property opacity for transparency.
● takes a value from 0.0 - 1.0. A lower value
makes the element more transparent.
about.me/babon
10. CSS Image Opacity
IE8 and earlier use filter:alpha(opacity=x).
● the x can take a value from 0 - 100. A lower
value makes the element more transparent.
opacity.html
about.me/babon
11. CSS Image Sprite
Use one single image to capture all navigation
states.
● no loading delay when a user hovers over
the image.
image | sprites.html
Apple Style CSS Sprite Menu
about.me/babon
