simple menu


Step-5: Now padding to be added to display more decorative. Moreover, the underline to be taken out from the menu names. Width of each block also to be given. For this, the anchor (a) elements of css to be used.
<head> <style type="text/css"> ul# menu { list -style: none; margin: 5x; padding: 0px; width:500px; } ul#menu li { display: inline; } ul#menu li a { padding: 5px ; width: 100px; background-color:#CCC; text-decoration: none; text-align: center; } </style> </head>
With the above code (i.e changing the css in header keeping the body same -as mentioned in page no-1), the output would be:

Step-6: Add border for each menu name. This will differentiate between each menu name. This is done in css (in header). The code will be :
<head> <style type="text/css"> ul#menu{ list style-type: none; margin: 0px; padding: 0px; width:500px; } ul#menu li { display: inline; } ul#list-nav li a { padding: 5px 20px; ackground-color:#CCC; text-decoration: none; border-left:1px solid #fff; } </style> </head>
With the above code (i.e changing the css in header keeping the body same -as mentioned in page no-1), the output would be:



page: 3 of 4        back   |  next

No comments:

Click Here To add Comment

Post a Comment