How to create rollovers in CSS without JavaScript?

If you're new here, you may want to subscribe to my RSS feed.

CSS coding allows developers to write web friendly code for their clients. Its best to stray away from the old methods of HTML with rollover images using JavaScript as that never produces clean optimized code. The old style OnMouseOut and OnMouseOver functions in JavaScript should be discarded in favor of a clean CSS look and feel.

Read the rest of this entry »

Expanding Tree Menu

There are some sites have a tree structure menu. If you have used Windows at any time you may be familiar to this system. It use to be the default menu at the left when browsing files, and is the system that is used in the Registry Editor. We are going to use JavaScript and some CSS to create a similar effect. Read the rest of this entry »

Custom Buttons

The default buttons in today’s browser are plain. Mostly just a shade of gray, and do not fit with the color scheme of most sites. With the use of the HTML button tag and some CSS, you customize your buttons for your site. Read the rest of this entry »

First Letter

One of the most over looked attributes in CSS is the :first-letter attribute. With this attribute you can add a lot of style to your site, with very little code. If you wanted to make your pages have theme similar to books in the Dark Ages, this attribute is perfect for that. Read the rest of this entry »

CSS Rollovers

Javascript is a great scripting language used for creating websites. One of the more popular uses of JavaScript is the use of rollovers. There is a draw back with JavaScript rollovers, you have to use images to create the effect. Read the rest of this entry »

Custom Text Area Backgrounds

Browsing the web, you may have noticed that there are sites where text areas have different color backgrounds. This allows the create of the site to add more of a custom look to the site. Read the rest of this entry »

Client-proof Columns

A common problem I face regarding CMS template implementation is that the HTML/CSS is restricted to only valid code. This commonly used WYSIWYG editor boasts XHTML 1.0 output but sometimes that may not be enough for a good looking document in most browsers. When working with pixel-perfect designs, this quickly becomes a major issue. Naturally, we can all argue as to why everyone should be writing valid code; the bottom line is we’ve got to please the client whether they know how to write standards-compliant code or not. This document will go over some of the common client-related quirks we’ve uncovered and outline possible fixes using CSS and HTML.

Problems:

1. No P tag for paragraphs
2. Long word breaks column in IE
3. List nested in P tag + IMG tag inside the P

Read the rest of this entry »

CSS Fluid layout tutorial

Knowing how to make a fluid layout using CSS is something that every web developer should learn, and it is very easy to do with these easy steps. In this tutorial we will create a 100% fluid layout, which means that everything on the site can resize to fit 100% of the browser window from 800×600 resolution to 1920×1080 the site is 100% of the browser window, no space will be wasted! Okay lets get started…

Read the rest of this entry »

Working with print stylesheets

Print style sheets are a key part to your site if it is providing information that one might one to print out. I have encountered many websites with no print style sheets, this can make it frustrating to print out articles and certain webpages. In this tutorial I show you how to make a proper print style sheet, and how to implement it into your website.

Read the rest of this entry »