CSS tips for webpage layouts

Written on September 19, 2007 – 12:40 am | by InternetStarter |

CSS is clear-cut and simple for users to learn. There are colors, fonts, and columns, that are simple to use for people, but some will just run into many problems. In order for CSS to be clean on your layout there are a few key points that you need to make a strong CSS layout that is reliable on any browser. Below are six key points that should help your problems with CSS.

Image Substitute

Dull content elements aren’t very vivid to the users. You want to have a Web 2.0 sleek style of images with gloss and gradients. Also instead of using web based fonts that come with Photoshop we need custom fonts that stand out. With image replacement we can use tasteful images or Flash images instead of text.

Revised Image Substitution
Sums up most, if not all, of the image replacement techniques currently in use.
Documentation

Floated Menu

Floating columns are similar to floating menus or floating navigations but navigation is trickier although more frequently used as well. Webmasters enjoy nice clean navigation menus in order to find their way through websites.

Listamatic
Sliding Doors

Box Model

Box Model’s are the center of CSS. You are probably familiar with margins and padding but when the essentials begin to flow in the programming you don’t know what happens. If you are aware of the browsers of the internet including Firefox, Internet Explorer, Opera, and more you know about cross-browsing. A CSS layout may look best in one browser but turn out as s**t in another browser. If you learn the box model then you can be perceptive on the unique peculiarity of different browsers. Box Model’s are also good to know for those old fashioned browsers.

W3C CSS2.1 Spec
The Box Model
Box model hack
Doctype

Floated Columns

Complete placement was a key concept when users move towards substituting table-based layouts, then came floating columns that created the genius of CSS. If you learn how to float you can be familiar with many different techniques such as placing images or more over the use of Advertisements such as banners, adsense, and more. Whilst learning the float method you also have to understand how to clear floats so backgrounds of layouts show accurately.

Floatorial
Clearing floats
Faux Columns
Creating Liquid Faux Columns

Sizing Using Ems

Text for the screen is sized with CSS in terms of pixels, ems or keywords. Pixels is easy, keywords are well documented. That leaves ems. Although there are two recurring problems that appear when sizing ems; those are layouts and fonts.

Using fonts with Internet Explorer 6 and lower (which is why I don’t use Internet Explorer but Firefox) doesn’t let you resize text with your specified pixels. Some people have a tough time seeing the text clearer so users may want to increase the font size to a larger format for reading. Instead of using pixels using size ems can ultimately compare as a more standard and common loom to this dilemma. As the evolvement of higher level browsers such as Firefox occurs the movement to more advanced programming methods which is CSS.

When sizing layouts using ems you can use a higher level of understanding then using pixels, texts, or keywords. If you muddle with HTML on text and font sizes you can come out throwing the layout out of balance. Using ems you can preserve the quality of the layout.

How to size text using ems
Elastic Design
Fixed or fluid width?

Sprites

Formally and more commonly used in video games, compiling more than one image into just a single image is an accepted method to figure out more than one problem. More recently, it’s been proven to be advantageous to combine multiple images (in particular background images used in image replacement techniques) into a single file. This method can simplify the response number your server has to apprehend, improving the time required to download all files on the webpage decreasing page load time.

Fast Rollovers without Preload
CSS Sprites
Reducing HTTP Requests

CSS has a vast variety of features that cannot be summed up easily, look around the Dev Network or ask in the CSS forums for help on your CSS real time problems.

Related Posts

Put your related posts code here

Post a Comment

About Me

I hope to share my knowledge and experiences related to my online money making projrcts. Most articles on this site are related to wordpress, short reviews, tips and making money online. More

Want to subscribe?

 Subscribe in a reader Or, subscribe via email:
Enter your email address:  

Go Daddy $1.99 Domains 125x125 SpeedPPC - PPC Marketing at Warp Speed Gravity Forms Plugin for WordPress
Affiliate Squeeze Page Graphics
Find entries :