i m trying to create like this but not seusess http://gandhidhaval.googlepages.com/h-m.jpg code is ------------------css---------------------- ul { display:inline; padding; 2px; font-family:arial,sans-serif;text-align:center;border: thin solid #000;} li.home { background: url(home.gif; color:#F00;} li.page { background: url(mob.gif; color:#000;} li.contact { background: url(p.gif; color:#000;} ----------html------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link id="Style" href="css.css" type="text/css" rel="Stylesheet" /> </head> <body> <ul> <li class=â€homeâ€>HOME</li> <li class=â€pageâ€>CONTACT</li> <li class=â€contactâ€>ABOUT</li> </ul> </body>
try ul { display:inline; padding; 2px; font-family:arial,sans-serif;text-align:center;border: thin solid #000;} ul li {display:inline;} .home { background: url(home.gif); color:#F00;} .page { background: url(mob.gif); color:#000;} .contact { background: url(p.gif); color:#000;} Code (markup): but i would have to see the images to be sure on the rest of it....because just that isn't going to do it. but it is closer to how I would do it.
Ok, let's see... from the image it looks like you don't want the buttons to have a background style, showing through to the desktop... 1px rounded corner borders - fairly simple. First, it's buttons, this should be ALL the HTML we need if we aren't doing background effects: <ul id="menu"> <li class="home current first"><a href="#">Home</a></li> <li class="contact"><a href="#">Contact</a></li> <li class="about last"><a href="#">About</a></li> </ul> Code (markup): I like to mark the line by what it is (home, contact, about), mark which one the current page is (current), and mark the first and last ones. This makes styling fairly easy. We could use :first-child and :last-child, except IE is a bit #DDD in that department. For CSS, first thing we'll do what I always do, zero all margins and padding so we have a nice clean baseline in all browsers: * { margin:0; padding:0; } Code (markup): Now for #menu... we'll give it a little padding so we can see it away from the screen edge, and turn the list-style to none. #menu { margin:8px; list-style:none; } Code (markup): Now for the LI's. This is where we'll apply that red 1px border - Now, I'm gonna use a little 'trick' here. First I'll make a image that has that border 256px wide x 32px tall - BUT, if we apply that image top left on the first li, top right on the last, and -8px 0px on all others, we can have any number of buttons up to any width, so long as no single button is not more than 240px wide. This is called the 'sliding background' technique, and is used for a great many 'tricks' like 'six corners', 'eight corners' and 'sliding doors'. Here's that image. http://battletech.hopto.org/for_others/dhaval/images/button_borders.gif We'll also float these left so they appear inline and as display:block; (automatic behavior with a float) #menu li { float:left; background:url(images/button_borders.gif) -8px 0px no-repeat; } #menu .first { background-position:0px 0px; } #menu .last { background-position:top right; } Code (markup): On to the anchors. Each of these has a different image applied - rather than making separate images and inlining the image tag on each, what we can do is put them all in one image and slide the background around to show the one we want - it's a hair more code, but it also means two less handshakes with the server and a slightly SMALLER image file. We'll make each image 32px tall, .png compression of the palettized transparancy should make that not really increase the filesize any. Which looks a little something like this: http://battletech.hopto.org/for_others/dhaval/images/button_icons.png These will need to be display:block so we can apply our icon image with a minimum of muss and fuss... We'll add some margins to the anchors to spread them apart/widen them... we'll apply 18px of left padding to make room for the images - the widest of our images is 14px, so 4px of padding should make it fairly attractive. We'll also set our colors, font, decorations, etc... One thing to point out is the line-height of 32px - doing that will automagically center our text top to bottom. We're using PX sized fonts because we are working with px height containers and backgrounds, using %/em or PT would break at default zoom in Opera/IE... Makes resizing impossible in IE6/earlier and broken in FF, but being FF still acts like Netscape 3's sweetly retarded cousin in that department, and Opera/IE7 do it a bit more ... sensibly, we're fine. #menu a { display:block; margin:0 8px; padding-left:18px; color:#666; font:bold 14px/32px tahoma,sans-serif; text-decoration:none; text-transform:uppercase; background:url(images/button_icons.png) 0px 0px no-repeat; } Code (markup): Next let's apply our non-default colors. We'll do the red for the 'current' item, and a bright red for mouse-overs and keyboard navigation. #menu .current a { color:#F00; } #menu a:active, #menu a:hover { color:#F64; } Code (markup): Now, not all of our icon images are the same width - something we can adjust by just assigning different padding-lefts. Just take the width of each, add the same 4px and apply that as padding... we also still need to slide them up on the Y axis so that each LI shows the correct image (right now they'd all just show the home icon) - something fairly easy to do. #menu .home a { padding-left:16px; } #menu .contact a { padding-left:12px; background-position:0px -32px; } #menu .about a { background-position:0px -64px; } Code (markup): ...and that's it. You can see it in action live here: http://battletech.hopto.org/for_others/dhaval/template.html as with all my examples, the directory: http://battletech.hopto.org/for_others/dhaval is unlocked so you get can all the gooey bits. You'll also notice a second 'more complex' version in that example that actually does a full blown mouse-over effect with a styled background... Just like the first example it relies on only two images to function - the sliding background technique used to do the icons is applied to this background image: http://battletech.hopto.org/for_others/dhaval/images/button_borders_mouseover.png when we want the darker version, we just slide the background up -32px. It requires a SPAN inside the ancors to be 'fully functional' without resorting to a behavior .htc for IE 6 and earlier. ... and as always, XHTML 1.0 strict, works in IE 5.5, 6&7, Opera, Safari and Firefox... it does NOT function in IE 5.0 or 5.2 due to errors in those browsers float models - *** 'em. Seriously, we can't bend over backwards to support old code bases forever. I've pretty much dropped IE 5.x support, I suggest everyone else do the same. Anyone gives you gripe about it, tell them to get something made in THIS millenium. We've for the most part given Nyetscape 4 the boot, it's time for the other boot to kick that paper hanging SOB known as IE5 right in the kiester too. If you need more explanations, fire away.
great help thanks need some more help http://gandhidhaval.googlepages.com/nav1.jpg all code is http://gandhidhaval.googlepages.com/help.zip
Well, you've got some issues... you've got a XHTML doctype and you are neither closing your LI's nor putting all your tags in lower case... Be a good start. Second, you are still in development, some actual FORMATTING on your code would go a long ways towards making sure you close all your tags properly - the tab key exists for a reason. you are also excessively class/id heavy for elements that frankly... don't need to exist... the double DIV wrapper around the two top menus for example. The lack of closing the LI's is a possible cause to any spacing issues, though I would also suspect that this: #header-m .a li { list-style:none; Is a contributor. List-style is best applied to the UL, NOT it's LI's, and you aren't declaring the LI's as display:block... which is NOT always the default behavior in all browsers. Change that to: #header-m .a { list-style:none; } #header-m .a li { display:block; and change the HTML for those to: <ul class="a"> <li>20 unique color styles</li> <li>16 collapsible module positions</li> <li>Easily change width or set to fluid</li> <li>Flexible pull-down panel</li> <li>RokMooMenu & SplitMenu menu options</li> </ul> Code (markup): I'd also suggest a more verbose classname than "a" - though given you are a sole element inside a DIV with an ID, I probably wouldn't even bother using a class there... You also might want to try using HEADER tags for your headers. Semantic markup and all that... and clean out all those all uppercase tags - or switch your doctype to one that matches your HTML.