visit this http://gandhidhaval.googlepages.com/fnav.jpg also here is a image http://gandhidhaval.googlepages.com/LeftMenuBackround.jpg
There are plenty of tutorials for this, but to break it down, you're going to need to set the margins and padding on your list, list items and links to 0 before getting started CSS-wise (yes, I said lists). The HTML would look like this: <ul id="menu"> <li><a href="#">Menu Text</a></li> <li><a href="#">Menu Text</a></li> <li><a href="#">Menu Text</a></li> <li><a href="#">Menu Text</a></li> <li><a href="#">Menu Text</a></li> <li><a href="#">Menu Text</a></li> </ul> Code (markup): If you're not going to use the universal selector ( * { } ) to set your margins and padding on everything in the page to zero so you can have total control over how you style it, you're going to have to do so the old fashioned (and messy) way instead: /* this will not be needed if using the universal selector to strip everything of margins and padding */ #menu, #menu li, #menu a { margin: 0; padding: 0; } Code (markup): Set your UL to have no list items, float it to the left (or right, depending on where you want it to be), and give it a width: #menu { float: left; /* or right */ list-style: none; /* removes the bullets */ width: 200px; /* I prefer EMs since they scale the text in IE */ } Code (markup): To squash an IE bug (specificially older versions of IE), you'll have to float the list items as well. #menu li { float: left; } Code (markup): The bulk of the styling would go on the links. This is where your backgrounds will go (since they're solid colors I suggest you use background-color instead of background-image here). Set your background color, borders, your default link text color, set the display to block (so you can select the whole area), give it a height of 1% to force IE 5/6 into "layout mode", remove the underlines and anything else you need. Then style the various link states as needed ( :link :visited :hover :active ), applying styles for the changes that need to be made (don't copy all the styles from the #menu a { } rule, since they will be referencing that as their baseline. I wrote an extensive tutorial on this in a previous post here. You can read it by following the link below: http://forums.digitalpoint.com/showthread.php?p=2619952#post2619952 (And the minor correction I had to make later in that thread.) http://forums.digitalpoint.com/showthread.php?p=2630993#post2630993
You have two choices. Use background-image: url('/link/to/image.jpg'); or (preferably) include it in the background property itsefl: background: url('link/to/image.jpg') top left repeat-x; (this will set the background image in the upper-left hand corner of the HTML tag you want and then make it only repeat horizontally). For example: #menu a { background: url('/images/menubg.jpg') no-repeat; } Code (markup): Would set a non-repeating background image to the links in the menu.
But seriously, since all you have with your background is a single color with a border, you can easily save yourself the HTTP request, the download on the visitor (especialy dialup users such as myself) and possible accessibility issues by simply setting the background color on the link to be the same as the background color on the image, and then set a border around it as well via CSS.
ok as per your opinion i decide to i make with color but there is problem here is code see this...something is wrong..... plese check it and tell me ----------------------------css------------------------ #menu2 { display:block; } #menu2 ul { margin: 0; padding: 0; list-style: none; width: 144px; float: left; } #menu2 li A { border-bottom: 1px solid #BBAECC; background: #E5E0E7; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; } --------html-------------------- <div id="menu2"> <ul> <li><a href="default.asp">Home</a></li><br> <li><a href="Location.asp">Location</a></li><br> <li><a href="default.asp">Physician</a></li><br> <li><a href="default.asp">Health</a></li><br> <li><a href="default.asp">Center</a></li><br> <li><a href="default.asp">Event</a></li><br> <li><a href="default.asp">Research</a></li><br> <li><a href="default.asp">About Us</a></li><br> </ul> </div>
Get rid of the DIV (you don't need it) and apply the styling to the UL instead. Then remove the <br> tags from your lists (they don't belong there). I'd also use shorthand on your CSS as well: #menu2 { float: left; list-style: none; margin: 0; padding: 0; width: 144px; } #menu2 a { background: #E5E0E7; border-bottom: 1px solid #BBAECC; color: #000; display: block; font: bold 12px/16px Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-decoration: none; width: 100%; } Code (markup): I did add a line-height property to the mix, but that's required when using the font short-hand property. I also set the margins and padding to 0 on the links, and set their display to block (so the entire area is clickable). Then I set their width to 100% to get around an IE bug (called "hasLayout"). The HTML would remain the same, but without the DIV, and the DIV's ID moved to the UL: <ul id="menu2"> <li><a href="default.asp">Home</a></li> <li><a href="Location.asp">Location</a></li> <li><a href="default.asp">Physician</a></li> <li><a href="default.asp">Health</a></li> <li><a href="default.asp">Center</a></li> <li><a href="default.asp">Event</a></li> <li><a href="default.asp">Research</a></li> <li><a href="default.asp">About Us</a></li> </ul> Code (markup):
still some more help needed.... see this both main is http://gandhidhaval.googlepages.com/fnav.jpg now i developed as per your help and your code.... http://gandhidhaval.googlepages.com/newe.jpg
Ah, you want to set the text to the middle, and then add some top and bottom padding. #menu2 a { border-top: 1px solid #BBAECC; padding: 2px 0; /* this replaces padding: 0; */ text-align: center; Code (markup):