Jump to content

major issues with link/list styles


novicenate
 Share

Recommended Posts

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

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

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

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

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

×
×
  • Create New...