Search the Community
Showing results for tags 'navigation'.
-
Hi everyone. I have been trying to solve a problem that top navigation css affects other div menus. (margin, background color) Here my all source are: <!doctype html> <style> @charset "UTF-8"; body { font: 9pt, Helvetica, Arial, sans-serif !important; font-family: Sans-Serif; margin: 0px; padding: 0px; border:0px; color: #333; } dl, dt, dd{margin:0px; padding:0px; border:0px;} dl, dt, dd a, a:visited, a:hover, a:focus{margin:0px; padding:0px; border:0px;} div {border:0;} Img {border:0;} Img Img a:visited, Img a:hover {border:0; margin:0; padding:0;} a {margin:0; padding:0; border:0;} ul, li{list-style:none; border:0px; padding:0px; margin:0px;} ul, li a, a:visited, a:hover, a:focus{list-style:none; border:0px; padding:0px; margin:0px;} #wrapper{width:1000px; *zoom:1; margin:0px; padding:0 10px 0 10px; text-align:center;} #wrapper:after{content:""; clear:both; display:block; } #top_logo{ width:1000px; height:70px; border:#000 1px solid; text-align:center; } #top_logo ul li a, a:visited, a:hover{ position:relative; width:140; height:32px; padding:19px 430px 19px 431px; } #top_lang{ *zoom:1; position:absolute; width:1000px; top:0px; padding:0px; margin-top:2px; float:right; } #top_lang:after{content:""; clear:both; display:block;} #top_lang ul{position:relative;} #top_lang ul li{float:right;} #top_lang ul li a, a:visited{ margin:0; padding:0 1px 0 0; border:0; display:block; width:17px; height:12px; } #top_menu{width:1000px; height:50px; margin-bottom:20px; clear:both; border:1px #FF0000 solid;} #top_menu ul{position:relative;} #top_menu ul li{float:left; text-align:center;} #top_menu a, a:visited{ margin:0; padding:0; border:0; display:block; width:166px; height:32px; padding-top:18px; background-color:#345a92; color:#fff; font-size:10pt; font-weight:bold; text-decoration:none; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } #top_menu a:hover{background-color:#0575b2; font-weight:bold;} #top_menu ul li:last-child a, a:visited{ margin:0; border:0px; padding:0; width:170px; height:32px; padding-top:18px; } #top_menu ul li:last-child a:hover{ background-color:#cf4e56; } #top_menu ul li:last-child a:after{content:""; clear:both;} /* Top Menu CSS end */ </style> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="dist/iepp.min.js"></script> <![endif]--> <body> <div id="wrapper"> <!-- top start --> <!-- language selection start --> <div id="top_logo"> <ul> <li><a href="index.php"><img src="Images/Logo_KFCSED.jpg" title="HOME" alt="to main page"></a></li> <!-- <li><img src="Images/main_slogan.jpg" id="slogan"></li> --> </ul> </div> <div id="top_menu"> <ul> <li><a href="about_us.php">About Us</a></li> <li><a href="get_involved.php">Get Involved</a></li> <li><a href="project.php">Projects</a></li> <li><a href="Partners.php">Partners</a></li> <li><a href="contact_us.php">Contact Us</a></li> <li><a href="#">DONATE</a></li> </ul> </div> <!-- top_navi menu end --> <!-- top end --> </div> </body> </html> div id "top menu" affect other divs and change all background color - top_logo, and other main contents. (I put example preview of IE8) Could you explain me why this li a, a:visited affects others? Have no idea.......and it is killing me! Thanks in advance.
-
good day! so im working on a certain parallax website, newbie here aneways. The problem is i want my navigation bar to be transparent just like this site : http://www.xplaye.com/en/ i tried using opacity and background :transparent but it does not work at all. it only gives me a navigation that has a white background and i really want it to be transparent as if menu items were floating. anyone who has an idea? answers are greatly appreciated. thanks a lot CHEERS! heres my css : .nav{ height: 40px; width:auto;}.nav ul li{ list-style:none; text-decoration:none; display: inline-block; padding: 10px; padding-right:20px; float: right; }.nav ul li a { text-decoration: none; color:#FFF; font-family:Calibri; }.nav ul li a:hover { color: #6be0d6;}.nav ul li a:active{ color: #6be0d6; }
-
Hi. I've worked with HTML a bit in the past but I'm a bit rusty. Actually, I'm very rusty as it's been some time. When the Home page for my online shop loads, the sidebar navigation links are all open - both the Parent links and all the sub-links as well-and I want just the Parent links to appear as closed, and then have all the associated sub links open when the Parent link is clicked. Subsequently, all the subsection links would open and close when clicked, either individually or when the Parent link is reclicked to close the entire section. As it is now, there about 50 links open when the Home Page loads and the sidebar looks very messy and cluttered, and downright confusing and intimidating. What code would I use to get the Parent Links to be visible first (and closed) when the Home Page loads, and then have all the other links open and close as needed? Thanks.
-
How to change only part of the font to a different color in a navigation link? See my website; www.cleareyesight-batesmethod.info On the left < is the navigation. I want the top words in each pages navigation to be in green and the rest of the text to stay navy blue. Example, in the home page, top navigation; I want NATURAL EYESIGHT IMPROVEMENT to be green. The rest of the text under it to stay navy. When I try to change the color it does not work and it also causes spaces between the 2 different colored text. How to do this? Maybe in html? Thanks, Mary
-
Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;}
-
My navigation's drop down menu just quite working. I'm not sure what the problem is. The coding is all there and looks fine, so does the CSS. I don't see anything that should be effecting it. Help? You can see the design here: http://sugar-baby.org/The navigation SHOULD drop down like this: http://i43.tinypic.com/1zodpbb.jpg
-
Alright. So I'm attempting, quite unsuccessfully, to make the navigation bar at the top of my page to be the full width of whatever screen it is being viewed on. It's one of those simple navbars you can find tutorials on everywhere. (If I get some of the lingo wrong here, feel free to correct. I'm still learning.) ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}li {float:left;}a:link,a:visited {display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:12px; text-decoration:none;}a:hover,a:active {background-color:#7A991A;} <ul><li><a href="home">Home</a></li><li><a href="portfolio">Portfolio</a></li><li><a href="services">Services</a></li><li><a href="contact me">Contact Me</a></li></ul> I'd appreciate any sort of help.
-
Dear,I just got back into web dev, now i have a small question.I'm bussy on my new portfolio and i want it to be a single page portfolio.So i setup my site in sections ( Image rotator , home , service , contact ,...)and i am wondering how to make a menu that starts on the botom of the image rotator section and as i scroll down it will rise to the top of the page and stay there even if i scroll further then the rotator section.The following link will give you an idea of what i mean .http://themestrong.com/demo/argo_wp/Also , while i'm at it . does someone also know how to make a "Back to Top" button that will display if i enter the second Section ?Thanks in advance !Jochem.
-
I am trying to center this menu. Right now it is a local site uploaded through WAMP - but here is the css. .main-navigation {clear: both;display: block;padding: 1.5em;}.main-navigation:after {clear: both;content: "";display: block;}.main-navigation ul {list-style: none;margin: 0 auto;padding-left: 0;}.main-navigation li {float: left;margin: 0.5em 0;position: relative;}.main-navigation a {color: #7c948a;display: block;font-size: 1.4rem;font-weight: bold;margin-right: 2em;text-decoration: none;}.main-navigation ul ul {background: #e9e0d1;border: 1px solid rgba( 0, 0, 0, 0.1 );display: none;float: left;position: absolute;top: 1.2em;left: 0;z-index: 99999;}.main-navigation ul ul ul {left: 100%;top: 0;}.main-navigation ul ul a {padding: 0 1.5em;width: 200px;}.main-navigation ul ul li {}.main-navigation li:hover > a,.main-navigation li.current_page_item a,.main-navigation li.current-menu-item a,.main-navigation ul ul a:hover {color: #33605a;}.main-navigation ul ul :hover > a {}.main-navigation ul li:hover > ul {display: block;} Any ideas?
-
Hi, I need some help. I haven't worked with HTML in a long time and need to edit my website. My web developer friend designed the current template for my website, but he's been too busy to help me edit it. My website is available here: http:///NBCnewman.weebly.com I am in desperate need of some more main content space, but I don't wish to move to a horizontal navigation bar. In looking at my current navigation bar on the left, I believe I can get a bit more content space by making the navigation bar a bit narrower. But, I don't know how to change that in my HTML code (I don't even know what portion of my code refers to the navigation bar). Or, is there a way to make everything wider - my header image and move things out to the left and right a bit into the gray area on the sides so that I have some more white main content space in the middle? I hope what I'm saying makes sense! Please help. I am pasting the HTML code for my web design below in the hopes that someone can tell me where I do this and what code to use. Thank you!! *|* { margin:0pt; padding:0pt;}body { background: transparent url(background2.gif) repeat-x center top; background-color:#333333; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0;}p { line-height:1.5;;}h1, h2, h3{ line-height:1.5;;}#wrapper { width:960px; margin:0pt auto; overflow: hidden}#top-buffer { height:30px;}#header { overflow: hidden;}.weebly_header {float:left;background: transparent url(headerNew.jpg) no-repeat center top;width:100%;height:233px; }#sitename-area { background: transparent url(sitename_background.gif) no-repeat center top; width:290px; height:226px; float:right; border-style:solid; border-width:0px border-color:#666666}#sitename { color:#924a2e; font-size:2em; font-weight:bold; padding:50px 20px 20px 20px; text-align:center; width:264px;}#content-wrapper { background: transparent url(content_background.gif) repeat-y center top; overflow: hidden;}a:link, a:hover, a:visited { color:#924a2e; font-weight: bold; text-decoration:underline;} #navigation { float:left; width:246px; height:100%; margin-top:40px; font-family:"lucida grande", arial, sans-serif; font-size:1.3em;} #navigation ul { float:left; position:relative; margin:5px 0 10px 15px; list-style-type:none; }#navigation li { display:block; font-size:1em; padding:11px 0 0 10px; margin:0; width:200px; height:27px; border-bottom:1px solid #d7d5c4; text-align:left;}*html #navigation li { margin-right:4px;}#navigation a:link { float:left; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#565040; font-weight:normal; text-decoration:none;} #navigation a:visited { color:#565040; font-weight:normal; text-decoration:none;}#navigation a:hover { background-color:#98b4b1; display:block; padding:11px 0 0 10px; margin:-11px 0 0 -10px; width:200px; height:27px; color:#924a2e; font-weight:bold; text-decoration:none;}#active a:link { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:hover { color:#924a2e; font-weight: bold; text-decoration:none;}#active a:visited{ color:#924a2e; text-decoration:none; font-weight: bold; }#content { float:right; width:674px; min-height:400px; height:auto !important; height:400px; background-color:#f8f7f1; padding:30px 20px 30px 20px;}*html #content{ padding-top:35px;}img.image-left { margin-right:15px; float:left;}img.image-right { margin-left:15px; float:right;}#footer { float:left; width:960px; margin:20px 0 30px 0;}#footer-contents { float:left; color:#ebe9dc; font-family:"lucida grande", "lucida sans", arial, sans-serif; padding:12px 0 0 20px; width:940px; height:28px;}*html #footer-contents { margin-top:-5px;}input { background-color:#fff; border:1px solid #999; font-size:12px;}textarea { background-color:#fff; border:1px solid #999; font-size:12px;} /****************************** flyout menus ******************************/ #weebly-menus .weebly-menu-wrap { z-index: 5000;} #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none;} #weebly-menus .weebly-menu li { float: left; clear: left; width: 170px; text-align: left;} #weebly-menus .weebly-menu li a { position: relative; display: block; width: 100%; height:25px; background: #b5b299; border-right: 1px solid #d7d5c4; border-left: 1px solid #d7d5c4; border-bottom: 1px solid #d7d5c4; text-decoration: none; font-size: 11px; font-weight: normal; line-height:1; padding:8px 0 5px 2px; color: #924a2e;} #weebly-menus .weebly-menu li a:hover { background: #98b4b1; font-weight: bold; } #weebly-menus span.weebly-menu-title { display: block; padding: 5px 10px;} #weebly-menus span.weebly-menu-more { background: transparent url(http://images.weebly.com/weebly/images/submenu_arrow.gif) no-repeat center top; display: block; position: absolute; right: 5px; top: 0; font-family: Courier; height: 28px; line-height: 29px; padding:3px 0 3px 0;}
-
Can someone help me figure out how to create the navigation displayed in the header on top of this page? http://themes.iki-bir.com/ikaros/ If someone could give me some direction to learning how to make these types of navigations, I'd really much appreciate it.
-
Hey guys, I have the following problem: On my blog (http://nachdenkblog.tumblr.com) I want to make it possible to switch directly between the blog entries.At the bottom of the main site you can see pagination between the sites. (BTW, it's in German but I guess you see what it means.) But if you open a specific entry you can see a similar but smaller footer without links to click.The code I used for this is the following: {block:PermalinkPage} <div class="FUSSBEREICH PERMA"> <div class="SCHATTEN"> </div> <div class="FUSS"> <div class="NAVIGATION"> {block:Pagination} <ul> {block:PreviousPost} <li> <a href="{PreviousPost}"> Vorheriger Eintrag </a> </li> {/block:PreviousPost} {block:NextPost} <li> <a href="{NextPost}"> Nächster Eintrag </a> </li> {/block:NextPost} </ul> {/block:Pagination} </div> </div> </div> {/block:PermalinkPage} (In case you need to know: FUSSBEREICH = footer; SCHATTEN = shadow; FUSS = foot)But as I said, no link at all is displayed. Can someone tell me why? Regards,Thomas
-
Hi All, I'm new to web programming in general and need some advice for a site that I'm trying to pull together. The best I can do is try to describe what I'm trying to do because I really have no idea of how to implement this idea.The primary purpose of the site is to be a blog with separate directories for different themes. I was hoping to have a navigation menu on the side of the site with sort of an archive list in which a user could select the article they wish to read by selecting their way through directories as displayed in the menu. I want to be able to just bring up the article without having to redirect to a different page or reload the current one when an article is selected.I would be putting this together with Dreamweaver, but have no idea what to build this element in (JScript, VBScript, or flash item?) Thanks for any advice or guidance!
-
Hi. Not quite sure where to start with this one. Am creating a website at the moment, and within that site - in my SQL Compact database I have a "transaction" table. There will be thousands of records in that table - what I want the user to be able to do is search based on a particular parameter - which is fine as I can just use SQL to obtain that information. However, say for instance it returns 100 records - I don't want to display all that data to a user all at once. How would I go about creating a facility to navigate on a table? For instance so it displays ten records at a time? I am using WebMatrix to create this site. Thanks. Kevin
-
I have created a css sprite based navigation. The navigation looks fine if I order the navigation items in the same order as they are in the .gif file and the CSS definitions, but if I rearrange them, something strange is happening to the image, and I'm not sure what. Here are three examples: 1. All the LI items in the same order as the .gif and CSS definition. http://www.reneebull...navigation.html (Note the top link "One" is a different color becuase it is stled as "current") Everthing is fine here.2. LI items two and three are rearranged, notice how the image for two and three are distorted somehow. http://www.reneebull...avigation2.html3. LI item two is omitted, so now the images for three, four, five, and six are distorted: http://www.reneebull...avigation3.html Source Code Example 1: <!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=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <LI id=navTwo><A class="" href="#">Two</A></LI> <LI id=navThree><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html> Source Code Example 2 <!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=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <!-- LI id=navTwo and Three are switched --> <LI id=navThree><A class="" href="#">Two</A></LI> <LI id=navTwo><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html> Source Code Example 3 <!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=utf-8" /><title>Untitled Document</title><style type="text/css"> /* Needed to remove Tab/Indent from Unorderd Navigation List */li {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}/* Needed to remove Tab/Indent from Unorderd Navigation List */ #mainNav {float: left;width: 160px;background: url(navigation.gif) no-repeat scroll left top;} #mainNav li { list-style: none; }#mainNav li a { width: 160px; display: block; }#mainNav ul li#navOne a, #mainNav ul li#navTwo a, #mainNav ul li#navThree a, #mainNav ul li#navFour a,#mainNav ul li#navFive a, #mainNav ul li#navSix a {background-image: url(navigation.gif) ;background-repeat: no-repeat;padding: 0px;text-indent: -9000px;border-style: none;width: 160px;overflow: hidden;} #mainNav ul li#navOne { background-position: 0px 0px; }#mainNav ul li#navOne a { height: 34px; background-position: 0px 0px }#mainNav ul li#navOne a:hover, #mainNav ul li#navOne a.current { background-position: -160px 0px; }#mainNav ul li#navTwo { background-position: 0px -60px; }#mainNav ul li#navTwo a { height: 34px; background-position: 0px -34px; }#mainNav ul li#navTwo a:hover, #mainNav ul li#navTwo a.current { background-position: -160px -34px; }#mainNav ul li#navThree { background-position: 0px -68px; }#mainNav ul li#navThree a { height: 34px; background-position: 0px -68px; }#mainNav ul li#navThree a:hover, #mainNav ul li#navThree a.current { background-position: -160px -68px; }#mainNav ul li#navFour { background-position: 0px -102px; }#mainNav ul li#navFour a { height: 34px; background-position: 0px -102px; }#mainNav ul li#navFour a:hover, #mainNav ul li#navFour a.current { background-position: -160px -102px; }#mainNav ul li#navFive { background-position: 0px -136px; }#mainNav ul li#navFive a { height: 34px; background-position: 0px -136px; }#mainNav ul li#navFive a:hover, #mainNav ul li#navFive a.current { background-position: -160px -136px; }#mainNav ul li#navSix { background-position: 0px -170px; }#mainNav ul li#navSix a { height: 34px; background-position: 0px -170px; }#mainNav ul li#navSix a:hover, #mainNav ul li#navSix a.current { background-position: -160px -170px; } </style></head><body><DIV id="mainNav"><UL> <LI id=navOne><A class="current" href="#">One</A></LI> <!-- LI id=navTwo is removed --> <LI id=navThree><A class="" href="#">Three</A></LI> <LI id=navFour><A class="" href="#">Four</A></LI> <LI id=navFive><A class="" href="#">Five</A></LI> <LI id=navSix><A class="" href="#">Six</A></LI></UL></DIV></body></html>
