making buttons with css
by Lori Eldridge <lorrie652(at)icehouse.net>
|
Date: |
Sat, 12 Apr 2003 09:35:57 -0700 |
To: |
hwg-basics(at)hwg.org |
|
todo: View
Thread,
Original
|
|
Hi All,
I researched several css sites and then wrote some code for menu links that form a colored box that changes the background color when the mouse moves over it and also another color after it's clicked (it progresses to ever lighter colors of green). This is a lot faster than using Javascript and less code bloat.
It works fine in IE 5 but of course only shows the links in Netscape 4.79 --I'm not so concerned about the later right now.
I checked the code in http://www.htmlhelp.com/tools/csscheck/ and it gave me the following warning:
>Warning: The height and Width property only applies to block-level and replaced elements, and elements with position value absolute.
I would like to know how to fix the following so it passes CSS check (I don't want to use position absolute).
.menu a:link { width: 120px; height: 20px; padding: 5px; background: #006600;
color: #ffffff;
font: bold 12px sans-serif;
text-decoration: none;}
.menu a:active { width: 120px; height: 20px; padding: 5px; background: #009900;
color: #ffffff;
font: bold 12px sans-serif;
text-decoration: none;}
.menu a:visited { width: 120px; height: 20px; padding: 5px; background: #99ff00;
color: #000000;
font: bold 12px sans-serif;
text-decoration: none;}
.menu a:hover { width: 120px; height: 20px; padding: 5px; background: #009900;
color: #ffffff;
font: bold 12px sans-serif;}
Here is what I used for the link in the menu text:
<div class="menu">
<a href="./">Home</a><br><br>
</div>
thanks,
Lori
HTML: hwg-basics mailing list archives,
maintained by Webmasters @ IWA