Jump to content

major issues with link/list styles

novicenate

By novicenate
in CSS

 Share

Recommended Posts

novicenate Newbie

novicenate

Posted
Posted

I NEED HELP WITH THIS. I HAVE THE FOLLOWING IN MY HTML:<div class="submenu" style="position:absolute; left:100px; top:125px; height: 1px;"> <ul> <li><a href="#">Mission Statement</a></li> <li><a href="#">Directions</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">History</a></li> </ul></div>AND IN MY STYLE SHEET, I HAVE THIS....submenuon{position:absolute; display:block; padding:5px; font-size:11pt}div.submenuon ul{width:500px}div.submenuon li{padding:5px;list-style-type:none; width:450px}div.submenuon a:link{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:visited{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:hover{text-decoration:underline; background-color:orange; width:450px; padding:5px}div.submenuon a:active{text-decoration:none; background-color:blue; width:450px; padding:5px}MY QUESTION IS, WHY WILL THE LINKS WITHIN THE LIST ITEMS NOT GO OUT TO THE SET WIDTH??? THE CODE IS PROBABLY A LITTLE SCREWED UP BECAUSE I HAVE TRIED SO MANY THINGS. HERE IS WHAT I'M TRYING TO GET TO...I HAVE A NORMAL LIST (<ul><li><a>link</a></li></ul>) AND I WANT SO WHEN THE LINK IS MOUSEOVERED, IT CHANGES STYLES SO THAT A SPECIFIC WIDTH CHANGES COLORS. I KNOW THIS IS CONFUSING, BUT AFTER SPENDING TIME ON THIS, I REALLY LOST THE ABILITY TO CARE ABOUT MAKING SENSE. IT JUST DOESN'T MAKE SENSE TO ME. I WOULD REALLY APPRECIATE HELP.(ALL CAPS DONE TO DIFFERINTIATE CODE WITH TALK)

Link to comment
Share on other sites
Little Goat Invested Member

Little Goat

Posted
Posted (edited)

well to differentiate code, do this: 



 by clicking the code button when replying or just type it in around your code. next, if you put styles in the a:link properties, you don't need to put them in the other a properties also.and why do you have the div's width set to 1px?LG



			
				


	Edited  by Little Goat
	
	

			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		novicenate
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


novicenate
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
I don't know why the height is set at 1px - probably just an oversight.  sorryThe reason I am differing the a's within the div from normal a's is because they are part of a menu system that I want to look differently than the links contained withint the page content.  So again, can you help me figure out why it's not working right?? thanks


			
		


		

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		Little Goat
	

				
				
					
						
Invested Member
					
				
			

		

		

			

				


Little Goat
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			

I'll tell you why:in css you have .submenuon:


AND IN MY STYLE SHEET, I HAVE THIS....submenuon{position:absolute; display:block; padding:5px; font-size:11pt}div.submenuon ul{width:500px}div.submenuon li{padding:5px;list-style-type:none; width:450px}div.submenuon a:link{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:visited{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:hover{text-decoration:underline; background-color:orange; width:450px; padding:5px}div.submenuon a:active{text-decoration:none; background-color:blue; width:450px; padding:5px}
while the div's class is submenu without the ON:
<div class="submenu" style="position:absolute; left:100px; top:125px; height: 1px;"><ul><li><a href="#">Mission Statement</a></li><li><a href="#">Directions</a></li><li><a href="#">Contact Us</a></li><li><a href="#">History</a></li></ul></div>
here is the code I came up with that works fine:
<html><head><style type="text/css">body{background-color:#000000;}.submenuon{position:absolute; display:block; padding:5px; font-size:11pt}div.submenuon ul{width:500px}div.submenuon li{padding:5px;list-style-type:none; width:450px}div.submenuon a:link{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:visited{text-decoration:none; background-color:white; width:450px; padding:5px}div.submenuon a:hover{text-decoration:underline; background-color:orange; width:450px; padding:5px}div.submenuon a:active{text-decoration:none; background-color:blue; width:450px; padding:5px}</style><body><div class="submenuon" style="position:absolute; left:100px; top:125px; height: 1px;"><ul><li><a href="#">Mission Statement</a></li><li><a href="#">Directions</a></li><li><a href="#">Contact Us</a></li><li><a href="#">History</a></li></ul></div></body></html>




notice the div class has submenuon.LG



			
		


		

		
			

		
	


	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	



					
					
					
				

					

					
					






	

	

	

		

			

				


	
		novicenate
	

				
				
					
						
Newbie
					
				
			

		

		

			

				


novicenate
			

			

				Posted 
				
			

		

	

	
	

		




	

		

			

				
    
					
						
  • Author
    • 
					
					
					
					
					
				

			

			
		


		

			Posted 
			
			
				
				
			
		

	


	

    

	

		
		

			
OK, I guess let's start over.  I'll just tell you what I want to accomplish.  I need a CSS menu that has submenus.  I've tried the one from A List Apart's website, and can't get it to work.  I'm sorry to be so difficult.  I am learning.thanks


			
		


		

		
	


	

	





	
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
    

    

        
        
            

            
        
    


				
				
					

				
                

                




				
			

		

	







	

		
			
				Go to topic listing
			
		
	

	




						


					

					


					

				

			

			
		

		
		


	

		×
		

			
				

					
				

			

			

			

			
		

	






	

		×
		

			
    
				
  • Create New...
    •