Have a play around with this it may help <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd";> <HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>Medarc Ltd.</title> <STYLE type="text/css"> html {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px} ul {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px} ol {padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px} body {padding-right: 0px; padding-left: 0px; background: #ffffff repeat-x 50% top; padding-bottom: 0px; margin: 0px; font: 0.6875em tahoma, arial, sans-serif; color: #4d4d4d; padding-top: 0px} img {border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px} a {color: #7f99ae; text-decoration: none} a:hover {text-decoration: underline} #width { margin-left: 10px; width: 850px; margin-right: auto; text-align: left; min-height: 100%} p.last{ font-size:0.8em; border-top:.1em solid #000; margin:0; width:100%; padding:.1em 1em; color: #777; background: #ccc; } #topnav {border-top: #fcda2e 4px solid; margin: 9px 0px 0px; width: auto} #topnav LI { display: inline; background: #849eb3 no-repeat left top; float: left; width: auto; height: auto} #topnav A {border-right: white 1px solid; display: block; background: no-repeat left top; font: 11px/20px tahoma, arial, sans-serif; width: 84px; color: #fff; text-align: center} li.empty{ background: black no-repeat left top; width: 1px; height: auto; } #topnav A:hover {background: #fcda2e no-repeat left top; text-decoration: none} #topnav A.selected {background: #fcda2e no-repeat left top; text-decoration: none} </style> </head> <body> <div id="width"> <ul id="topnav"> <li><a title="National" href="national.cfm">National</a></li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="national.cfm">National</a> </li> <li><a title="National" href="international.cfm">International</a></li> <li><a title="Contact" href="contact.cfm">Contact</a></li> <li class="empty"><A title="" href="">National</a></li> </ul> </body> </html>
Josue Martinez <[EMAIL PROTECTED]> wrote: Hello, listers: I am working on this nav list, and I'm stuck because I don't know how to position the elements as I want. I have an unordered list of links I want to style like this image: http://www.ic.sunysb.edu/clubs/phiota/test/assets/images/v1_index.jpg Here is the html file http://www.ic.sunysb.edu/clubs/phiota/test/ And here's the navigation CSS (The entire css document is here: http://www.ic.sunysb.edu/clubs/phiota/test/base.css ) div#nav { width: 606px; margin: 1px 0; background-color: #000; } div#nav ul { margin: 0; padding: 0; width: 91px; background: black; font: bold 12px "Trebuchet MS", Helvetica, Arial, Tahoma, Verdana, sans-serif; list-style: none; } div#nav ul li { width: 91px; height: 20px; margin: 0; text-align: left; } div#nav li:hover { background: red; } div#nav li a { display: block; width: 91px; text-decoration: none; color: white; } ------------------------------- I'd appreciate any help you can give me. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ --------------------------------- Boardwalk for $500? In 2007? Ha! Play Monopoly Here and Now (it's updated for today's economy) at Yahoo! Games. --------------------------------- Ready for the edge of your seat? Check out tonight's top picks on Yahoo! TV. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
