Changing cursor when over a class to be a pointer (e.g. indicate a link present)
Category: CSS
.CSS Basics(6)
.Debugging CSS(1)
.Examples(14)
Align(3)
Animation(1)
Background(4)
Border(2)
Browser(2)
Button(2)
Columns(1)
CSS Files(1)
Defines(1)
Display(2)
Files(3)
Float(2)
Forms(9)
Hidden(1)
Images(7)
Links(1)
Lists(2)
Margin(1)
Maths(1)
Override Styles(2)
Padding(1)
Positioning(2)
Responsive CSS(4)
Spacing(2)
Text(13)
Variables(1)
Visibility(1)
Zoom(1)
Calculations
Width
Calculate width based on total width Width only as wide as needed for the text Min width needed to fit the content Min possible (move things under each other to minimise) Min needed without making thinner than normal
z-index
You many need to position: relative; to get a z-index value to be used correctly. Things with a high z-index beign hidden behind other elements with a lower z-index If you get problems ensure that if divs etc your high z-index element is withing within have a z-index specified, it is higher than the z-index […]
Important
p { color: red !important; }
Comments
/* My Comment */
Tables
HTML <table id=”my_table”> CSS table#my_table { border-collapse:none; width:100% } table#my_table td { margin: 1px; color: #000; padding: 2px 1px; text-align: center; font-weight: bold; } table#my_table td a:hover { text-decoration:none; }
zindex
z-index sets the stack order of the element. It only works on positioned elements (position:absolute, position:relative, or position:fixed). It's natural to assume elements with higher z-index values are in front of elements with lower z-index values, and any element with a z-index is in front of any element without a z-index. This is how it […]
Rollover buttons
Based on this guide http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript Create your image double height with the roll over image in the bottom half In the <head> <style type=”text/css”> a.myrollover { display: block; width: 80px; height: 30px; background-image: url(‘button_combined.png’); } a.myrollover:hover { background-position: center bottom; } </style> Then for your link <a href=”#” class=”myrollover”></a>
Hover
You can use :Hover on anything – doesn't have to be a link E.g. .my_style_name:Hover { color: #000000; } Tool Tip Style Hover Text You can use the title attribute to add pop up text to most things: <span title="Text that will show on hover">Text on page</span> Using CSS instead when you want to […]