Category Archives: CSS

CSS Image Maps: A Beginner’s Guide

http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Custom style sheet and templates for NextGen Gallery (with special instructions for child themes)

NextGen Gallery is a great plugin for your WordPress site’s galleries. But often you would like to customize its look to suit your needs. Here’s how: Create custom template files for NextGen Gallery: Custom templates are PHP files that can be stored in the folder /nggallery/, which you can create inside your theme directory. NextGEN […]

a:hover background doesn’t work in Safari (but works fine in IE and Firefox)

I didn’t know what the problem was. I had exactly the same CSS for the navigation menu of another site of mine, and it worked perfectly fine in all browsers. Somehow, it didn’t for the site http://hollanderyorkgallery.com/ I searched and searched all over the Internet looking for an answer, a solution. Some said it was […]

Make Footer Stick to the Page Bottom

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ http://blog.rajatpandit.com/2008/06/19/making-footer-stick-to-the-bottom-of-the-page/ ============================== The HTML code: <div id=”container”> <div id=”content”> <p>Main content.</p> </div> </div> <div id=”footer”> <p>Footer content.</p> </div> The CSS: html, body { height:100% } #container { position:relative; height: 100%; min-height:100%; height: auto !important;  /* for IE6 as it doesnt understand min-height */ margin-bottom: -100px; /* assuming your footer height is 100px */ } […]

CSS: style tables

http://www.w3schools.com/Css/css_table.asp http://www.snook.ca/archives/html_and_css/designing_data_1

CSS: style Forms and Search fields

http://www.addicottweb.com/2009/03/style-form-input-fields-with-icons-to-improve-usability/

CSS: Cross-browser Rounded corner HTML elements using CSS3

http://code.google.com/p/curved-corner/ border-radius-demo.zip border-radius.htc This is a behavior htc file for Internet explorer to make CSS property ” border-radius ” work on all browsers. At present, all major browsers other than IE shows curved corner by adding the first 4 lines of css: .curved { -moz-border-radius:10px; /* Firefox */ -webkit-border-radius:10px; /* Safari and chrome */ -khtml-border-radius:10px; […]

CSS: text shadow

IE: { filter: Shadow(Color=#000000, Direction=135, Strength=2); } Safari and Firefox: { text-shadow: 2px 2px 2px #000000; } ============================== Creating Cross Browser Compatible CSS Text Shadows Create a Letterpress effect with CSS test shadow

CSS: font-weight values

http://www.zvon.org/xxl/css1Reference/Output/property_font-weight.html The following two examples illustrate the process. Assume four weights in the “Example1” family, from lightest to darkest: Regular, Medium, Bold, Heavy. And assume six weights in the “Example2” family: Book, Medium, Bold, Heavy, Black, ExtraBlack. Note how in the second example it has been decided not to assign “Example2 ExtraBlack” to anything. Available faces | Assignments […]

Tutorials: Premium WordPress theme design

Part I: http://designreviver.com/tutorials/premium-wordpress-theme-design-part-1-the-photoshop-mock-up/ Part II: http://designreviver.com/tutorials/premium-wordpress-theme-design-part-2-html-css-wordpress-theme-files/