Patrick Sharp's Sandbox
Email ::
::
This page contains my test and proof of concept .css stuff. Maybe you will find something here you can use!
| Code | Result |
|---|---|
.css code
#butt_menu a.button,
#butt_menu a.button:visited {
background: url("_button1_.gif") 0 0 no-repeat;
display:block;
width:75px;
padding:5px 0 0 25px;
color:white;
}
#butt_menu a.button:hover {
background-position: -100px 0;
text-decoration:none;
}
#butt_menu a.button:active,
#butt_menu a.button:focus {
background-position: -200px 0;
outline: none;
}
.html code
<div id="butt_menu">
<a href="#" class="button">Test 1</a>
<a href="#" class="button">Test 2</a>
<a href="#" class="button">Test 3</a>
</div><!-- butt_menu -->
And the image 
|
I can't seem to figure out why Google Chrome and Safari refuse to recognize :active or :focus anchor states |
.css code
a.tooltip span {
display:none;
padding:2px;
margin:4px;
width:auto;
font-weight: normal;
text-decoration:underline;
color:#000;
}
a.tooltip:hover span {
display:inline;
position:absolute;
background:#ffffff;
border:1px dashed;
text-decoration:none;
}
.html code
...like <a class="tooltip" href="#">
CGI<span>Common Gateway Interface
</span></a>...
|
This sometimes breaks in IE .. argh One way to add functionality to a website is to use tooltips to define some of the terms that you use in the body text. Things like CGICommon Gateway Interface, PHPPersonal Home Page |
