Width

Calculate width based on total width Width only as wide as needed for the text

Read More

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 […]

Read More

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; }

Read More

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 […]

Read More

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>

Read More

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 […]

Read More