Jump to content

Links not acting correctly


SmokingMan
 Share

Recommended Posts

Okay, I know this is basic stuff, but I seem to be having a mad cow moment. I am trying to link to locations on the same page, and have the links change styles on hover. The return to top link changes style but does nothing when clicked, and the links at the top don't change on hover and also do nothing. I've looked at the code and CSS and just can't figure out what's wrong here. I know it's something simple and will probably smack myself in the head when it's pointed out to me. But can someone look at the code and tell me where I've went wrong?XHTML:

<div class= "menu-links" name="menu-links">			 <div class= "menulink-head">Link To Menu Category</div>			 	 			 <a class= "menupage-link" href= "#menu-cat1" title= "Hot Dogs & Chili Buns">Hot Dogs & Chili Buns </a>			 <a class= "menupage-link" href= "#menu-cat2" title= "Nachos, Salads, & Soups"> Nachos, Salads, & Soups </a>			 	 	 	 		   </div>	 		   <div class="menu-category"><span name="menu-cat1">Hot Dogs & Chili Buns</span>	 </div>		   <div class= "cat-description">			 <span>All hot dogs and chili buns come with mustard and onions.  Ketchup and 			   mayonnaise available upon request.</span></div>		   <div>			 	 			 <div class="menu-item"><span>Plain Hot Dog .....................................................................</span></div>			 <div class="item-price"><span>#1.50</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili Bun ...........................................................................</span></div>			 <div class="item-price"><span>$1.75</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili Dog ...........................................................................</span></div>			 <div class="item-price"><span>$2.00</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili, Cheese ......................................................................</span></div>			 <div class="item-price"><span>$2.25</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili, Cheese, & Peppers ........................................................</span></div>			 <div class="item-price"><span>$2.50</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili, Cheese, & Slaw ............................................................</span></div>			 <div class="item-price"><span>$2.50</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Chili, Cheese, Peppers, & Slaw ................................................</span></div>			 <div class="item-price"><span>$2.75</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Fiesta Dog .........................................................................</span></div>			 <div class="item-price"><span>$2.00</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Pizza Dog ..........................................................................</span></div>			 <div class="item-price"><span>$2.00</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Polish Dog ..........................................................................</span></div>			 <div class="item-price"><span>$2.35</span></div>		   </div>		   <div>			 	 			 <div class="menu-item"><span>Quarter Pound Beef Dog .........................................................</span></div>			 <div class="item-price"><span>$2.50</span></div>			 	 		   </div>		   		   <div class= "menu-return">			 	 	 			 <a class= "menu-return" href= "#menu-links" title= "Return to top">Return to top</a>			 	 		   </div>	 		   <div class="menu-category">	 	 <span name="menu-cat2">Nachos, Salads, & Soups</span></div>		   <div class="cat-description">			 <span>All Nachos include chili & cheese.  All Nacho salads include chili, cheese, 			   lettuce, tomato, onion, & salsa.  Sour cream & peppers are extra.</span></div>

CSS:

.menu-links{	   text-align: center;	 }	 	 .menulink-head{	   font-family: Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;	   font-style: italic;	   font-weight: bold;	   font-size: 16px;	   color: #000000;	   text-decoration: none;	 }	 	 .menupage-link{	   font-family: Georgia,'Bookman Old Style',Garamond,'Times New Roman',serif;	   font-style: normal;	   font-size: 12px;	   color: #660000;	   text-decoration: none;	 }	 	 .menupage-link a:hover{	   color: #ff3399;	   font-style: italic;	   text-decoration: underline;	 }	 	 .menu-return{	   font-family: serif;	   font-size: 11px;	   color: #ff0000;	   text-decoration: none;	   margin-left: 5px;	   clear: both;	 }	 	 .menu-return a:hover{	   font-weight: bold;	   text-decoration:underline;	 }

Here's a link to the page in question: http://site-test1.hotdog-hut.com/menu.php

Link to comment
Share on other sites

you need to link to an id= not a class=Like this:

<div id= "menu-links" name="menu-links">...<a class= "menu-return" href= "#menu-links" title= "Return to top">Return to top</a>

and the CSS should reflect the changes, too

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...