Tag Archives: List Menu

How to build a Previous and Next buttons with List and Css scripts.

Here I’m explaining how to build a previous and next buttons with list and css scripts. Please follow the steps mentioned below.

1) We need a container div. So write a div tag first and give an ID for it. I gave for my div “prevNextContainer”.
2) Write the previous and next lists inside the container div. Give an ID “prev” for previous list and “next” for next list.
<div id="prevNextContainer">
   <li id="prev"><a href="#">Previous<a/></li>
   <li id="prev"><a href="#">Next<a/></li>
</div>

3) Add some styles to the container div.
<style>
#prevNextContainer{
   padding:0px;
   font-family:Tahoma;
   font-size:11px;
   border-bottom:3px solid #dadada;
   height:35px;
}
</style>
4) Set margin and padding to zero for ul and li tags.

#prevNextContainer ul, #prevNextContainer li{
   padding:0px;
   margin:0px;
}

5) Now we need to push previous list to left, next list to right and remove the list style. Set float to left for previous list and float to right for next list. Set the list-style-type to none for both.

#prevNextContainer #prev{
   float:left;
   list-style-type:none;
}
#prevNextContainer #next{
   float:right;
   list-style-type:none;
}

6) Now we are going to makeup the buttons. Give some style to the both anchors tags.

#prev a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#prev a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}
#next a{
   text-decoration:none;
   border:1px solid #cacaca;
   padding:5px 7px;
   width:100px;
   display:block;
   text-align:center;
}
#next a:hover{
   background:#dadada;
   border:1px solid #aaaaaa;
   color:black;
}

7) See the sample below.

Thats it…. Enjoy.

Share with Friends
[Facebook] [Jamespot] [Reddit] [StumbleUpon] [Twitter] [Email]