Shopping Cart Software Works Well With CSS Navigation - An Example
A few weeks ago WebCart was approached by a local pet shop who wanted to create a basic online pet store which could potentially compete with heavy hitters like petco and pet smart. Once the WebCart team analyzed the competition we realized that most online pet stores are not using a css navigation within their shopping cart stores.
The first thing we decided to do was implement a good looking css navigation bar that didn’t rely on images to make it look good. The reason we decide to use CSS rather then good old images is simple. CSS doesn’t eat up bandwidth which means a lot less load time for your web pages. Second, since everything is done with basic text it’s extremely easy to insert keywords in to your navigation which will result in better ranking though the major search engines.
Below is an example of code used for a basic css rollover navigation bar
ul#list
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#list li
{
display: inline;
list-style-type: none;
}
#list a {
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
margin: 0px;
}
#list a:link, #navlist a:visited
{
color: #000000;
background-color: #CCCCCC;
text-decoration: none;
}
#list a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
Html
<div id="sample_div">
<ul id="list">
<li id="active"><a href="#" id="current">Shopping Cart Software </a>
</li>
<li><a href="#">Criteria For Shopping Cart Software </a></li>
<li><a href="#">Php Shopping Cart Software </a></li>
<li><a href="#">eCommerce Store Front </a></li>
<li></li>
</ul>
</div>









