Create a Navigation List

We want to use the sprite image to create a navigation list. We will use an HTML list, because it can be a link and also supports a background image:

HTML file: Displayed by browser:
<style>
#navlist {
    position: relative;
}
#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}
#navlist li, #navlist a {
    height: 44px;
    display: block;
}
#home {
    left: 0px;
    width: 46px;
    background: url('../html_beg/images/img_navsprites.gif') 0 0;
}
#prev {
    left: 63px;
    width: 43px;
    background: url('../html_beg/images/img_navsprites.gif') -47px 0;
}
#next {
    left: 129px;
    width: 43px;
    background: url('../html_beg/images/img_navsprites.gif') -91px 0;
}
</style>
<body>
<ul id="navlist">
  <li id="home"><a href="demo.html"></a></li>
  <li id="prev"><a href="demo.html"></a></li>
  <li id="next"><a href="demo.html"></a></li>
</ul>
</body>



CSS example explained:

  • #navlist {position:relative;}
         - position is set to relative to allow absolute positioning inside it

  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
         - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned

  • #navlist li, #navlist a {height:44px;display:block;}
         - the height of all the images are 44px

CSS positioning and styling explained:

  • #home {left:0px;width:46px;}
         - Positioned all the way to the left. The width of the image is 46px.

  • #home {background:url(../html_beg/images/img_navsprites.gif) 0 0;}
         - Defines the background image and its position (left 0px, top 0px).

  • #prev {left:63px;width:43px;}
         - Positioned 63px to the right (#home width 46px + some extra space between items). The width is 43px.

  • #prev {background:url('../html_beg/images/img_navsprites.gif') -47px 0;}
         - Defines the background image 47px to the right (#home width 46px + 1px line divider)

  • #next {left:129px;width:43px;}
         - Positioned 129px to the right (start of #prev is 63px + #prev width 43px + some extra space). The width is 43px.

  • #next {background:url('../html_beg/images/img_navsprites.gif') -91px 0;}
         - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

Good habit Remember to use a minus sign in front of the x and y coordinates to define background locations. If you want to take the easy way out in finding the coordinates, you can always use the free Spritecow online tool.
Back button Table of Contents Next button