Advanced Search

Return to Snippet

Revision: 16295
at September 16, 2010 03:01 by toddaeverett
Updated Code 
#topnav {width:960px;height:50px;margin-top:0;background:url(images/topnavBG.jpg);}
#topnav ul{width:759px;height:40px;background:url(images/TNSprites.jpg);margin:0;padding:0;position:relative;}
#topnav ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;background:none;}
#topnav ul li, #topnav ul li a {height:40px;display:block;}
#topnav ul li a {text-indent:-9000px;text-decoration:none;}
#topnav ul li a:focus {-moz-outline-style:none;outline:none;}

#TNhome {left:0; width:71px;}
#TNcourses {left:72px; width:154px;}
#TNgeneralinfo {left:226px; width:157px;}
#TNstudentlife {left:383px; width:107px;}
#TNenroll {left:490px; width:118px;}
#TNfaq {left:608px; width:151px;}

#TNhome a:hover {background: transparent url(images/TNSprites.jpg) 0px -40px no-repeat;}
#TNcourses a:hover {background: transparent url(images/TNSprites.jpg) -72px -40px no-repeat;}
#TNgeneralinfo a:hover {background: transparent url(images/TNSprites.jpg) -226px -40px no-repeat;}
#TNstudentlife a:hover {background: transparent url(images/TNSprites.jpg) -383px -40px no-repeat;}
#TNenroll a:hover {background: transparent url(images/TNSprites.jpg) -490px -40px no-repeat;}
#TNfaq a:hover {background: transparent url(images/TNSprites.jpg) -608px -40px no-repeat;}

#TNhome a.active {background: transparent url(images/TNSprites.jpg) 0px -80px no-repeat;}
#TNcourses a.active {background: transparent url(images/TNSprites.jpg) -72px -80px no-repeat;}
#TNgeneralinfo a.active {background: transparent url(images/TNSprites.jpg) -226px -80px no-repeat;}
#TNstudentlife a.active {background: transparent url(images/TNSprites.jpg) -383px -80px no-repeat;}
#TNenroll a.active {background: transparent url(images/TNSprites.jpg) -490px -80px no-repeat;}
#TNfaq a.active {background: transparent url(images/TNSprites.jpg) -608px -80px no-repeat;}

Revision: 16294
at July 30, 2009 12:39 by toddaeverett
Initial Code 
#topnav {width:960px;height:50px;margin-top:0;background:url(images/topnavBG.jpg);}
#topnav ul{width:759px;height:40px;background:url(images/TNSprites.jpg);margin:0;padding:0;position:relative;}
#topnav ul li {margin:0;padding:0;list-style:none;position:absolute;top:0;background:none;}
#topnav ul li, #topnav ul li a {height:40px;display:block;}
#topnav ul li a {text-indent:-9000px;text-decoration:none;}

#TNhome {left:0; width:71px;}
#TNcourses {left:72px; width:154px;}
#TNgeneralinfo {left:226px; width:157px;}
#TNstudentlife {left:383px; width:107px;}
#TNenroll {left:490px; width:118px;}
#TNfaq {left:608px; width:151px;}

#TNhome a:hover {background: transparent url(images/TNSprites.jpg) 0px -40px no-repeat;}
#TNcourses a:hover {background: transparent url(images/TNSprites.jpg) -72px -40px no-repeat;}
#TNgeneralinfo a:hover {background: transparent url(images/TNSprites.jpg) -226px -40px no-repeat;}
#TNstudentlife a:hover {background: transparent url(images/TNSprites.jpg) -383px -40px no-repeat;}
#TNenroll a:hover {background: transparent url(images/TNSprites.jpg) -490px -40px no-repeat;}
#TNfaq a:hover {background: transparent url(images/TNSprites.jpg) -608px -40px no-repeat;}

#TNhome a.active {background: transparent url(images/TNSprites.jpg) 0px -80px no-repeat;}
#TNcourses a.active {background: transparent url(images/TNSprites.jpg) -72px -80px no-repeat;}
#TNgeneralinfo a.active {background: transparent url(images/TNSprites.jpg) -226px -80px no-repeat;}
#TNstudentlife a.active {background: transparent url(images/TNSprites.jpg) -383px -80px no-repeat;}
#TNenroll a.active {background: transparent url(images/TNSprites.jpg) -490px -80px no-repeat;}
#TNfaq a.active {background: transparent url(images/TNSprites.jpg) -608px -80px no-repeat;}
Initial URL 
http://extension.ucsd.edu/department/elp/index.cfm
Initial Description 
Makes inline navigation list utilizing image sprites for background.\r\nSprites image: http://extension.ucsd.edu/department/elp/images/TNSprites.jpg\r\n\r\nReference / original idea: Dave Shea at http://www.alistapart.com/articles/sprites/
Initial Title 
Top Navigation using sprites
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS