jeana Posted February 25, 2003 Share Posted February 25, 2003 I think this is css but am not very familiar on how to manipulate the css file. Can anyone help? I really like the rollover effect on the menu bar to the left at this site: http://shop.kaimart.com/ I especially like the darker color background and dotted outline effect. I'm pretty sure its a simple thing to do, I just need to be pointed in the right direction. Thanks Jeana Link to comment Share on other sites More sharing options...
seCret steVe Posted February 25, 2003 Share Posted February 25, 2003 Dont get me wrong but im not stealing code....im just showing you what they use body {font:Verdana, Arial, Helvetica, sans-serif} body { scrollbar-face-color: #eeeeee; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #cccccc; scrollbar-arrow-color: #000000} p {font: 10pt Verdana, Arial, Helvetica, sans-serif} td {font: 10pt Verdana, Arial, Helvetica, sans-serif} div {font: 10pt Verdana, Arial, Helvetica, sans-serif} a:link {font-family: "Verdana", "Arial", "sans-serif"; color: #3366FF; text-decoration: none} a:visited {font-family: "Verdana", "Arial", "sans-serif"; color: #3366FF; text-decoration: none} a:hover {font-family: "Verdana", "Arial", "sans-serif"; color: #000000; text-decoration: none} a:link.footer {font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none} a:visited.footer {font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none} a:hover.footer {border-bottom:2px solid #FF9900; font-family: "Verdana", "Arial", "sans-serif"; color: #262644; text-decoration: none} .CategoryA {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #E8EAF4} .CategoryA a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryA a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryA a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #3333CC; text-decoration: none; background-color:#CED5EA} .CategoryC {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EDF3E9} .CategoryC a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryC a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryC a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #669900; text-decoration: none; background-color:#E3EBE0} .CategoryB {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #FDE8E9} .CategoryB a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryB a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryB a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #FF0000; text-decoration: none; background-color:#F9B9BB} .CategoryD {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #FEF7E7} .CategoryD a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryD a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryD a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #FF9900; text-decoration: none; background-color:#FBEBCE} .CategoryF {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #F7F1FE} .CategoryF a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryF a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryF a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #9900FF; text-decoration: none; background-color:#EBDFFD} .CategoryE {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EFF9FE} .CategoryE a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryE a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryE a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #00BFFF; text-decoration: none; background-color:#D5FFFE} .CategoryG {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #EEEEEE} .CategoryG a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryG a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryG a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #000000; text-decoration: none; background-color:#CCCCCC} the link to this is: http://shop.kaimart.com/common.css it is all done by a css file here i will break it down for you: .CategoryA {font-family: "Verdana", "Arial"; color: #999999; font-size: 10px; background-color: #E8EAF4} .CategoryA a {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryA a:visited {font-family: "Verdana", "Arial"; color: #666666; border:1px dotted #EEEEEE; text-decoration: none; position:relative; display:block; text-decoration: none; padding-top: 3px; padding-bottom: 3px; padding-left: 2px} .CategoryA a:hover {font-family: "Verdana", "Arial"; color: #000000; border:1px dotted #3333CC; text-decoration: none; background-color:#CED5EA} We will use the above as there example and here goes: .CatagoryA a is the link...and what it does.... .CatagoryA a:visted is the what is showes after the person has visited that portion of the site. .CatagoryA a:hover is what makes that fance effect when you do the role overs... Hope that answers your questions....if you have any other questions just pm me or something Link to comment Share on other sites More sharing options...
Guest Posted February 25, 2003 Share Posted February 25, 2003 A great CSS tutorial: http://www.w3schools.com/css/default.asp Link to comment Share on other sites More sharing options...
jeana Posted February 25, 2003 Author Share Posted February 25, 2003 Wow I couldn't have asked for a better response. Thanks very much for taking the time to go into further detail for me - you're such a pup!!! Link to comment Share on other sites More sharing options...
Acronym B.O.Y. Posted February 25, 2003 Share Posted February 25, 2003 What's a pup? :) Link to comment Share on other sites More sharing options...
toolcrazy Posted February 25, 2003 Share Posted February 25, 2003 Maybe a "Cool Dude" in the UK Steve ------------------------- Link to comment Share on other sites More sharing options...
jeana Posted February 25, 2003 Author Share Posted February 25, 2003 Pup = puppy = sweet thing that just makes you go "awwww".... :D Link to comment Share on other sites More sharing options...
seCret steVe Posted February 25, 2003 Share Posted February 25, 2003 thanks.....ill take that as a compliment....as you are welcome for the fast response Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Archived
This topic is now archived and is closed to further replies.