Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Master CSS Layout and UI Design

Master CSS Layout and UI Design

CSS is now the primary language used to create page layouts on modern websites. There are almost limitless possibilities for creating page layouts and user interfaces with CSS, but below are some of the more interesting techniques.

The simplest way to horizontally and vertically center a DIV
This article covers centering a DIV, both vertically and horizontally, using CSS. While many code snippets out there show how to do this through the use of parent and child DIVs, this particular method uses a single DIV and is much simpler.

The simplest way to horizontally and vertically center a DIV

New CSS Sticky Footer – 2009
Here’s a sticky footer technique that’s completely cross-browser compatible. It even works in Google Chrome. And it doesn’t require an empty push DIV either.

Simple Page Peel Effect with jQuery & CSS
This tutorial combines jQuery and CSS to create a page peel effect. Most sites using this effect are Flash-driven, so this is a nice alternative if you’re not crazy about using Flash (or don’t know how).

Simple Page Peel Effect with jQuery & CSS

Equal height boxes with CSS
Here’s a basic example of creating equal-height boxes (faux columns) using CSS. It works similarly to cells in a table, but without the messy table bits.

Adaptable view – how do they do it?
Letting users manually change the way your site appears can greatly improve the site’s usability and the likelihood that users will have positive experience (and come back for more). This tutorial shows you how to implement adaptable viewing techniques for your site.

Adaptable view - how do they do it?

CSS: The All-Expandable Box
Here’s a tutorial for creating a CSS box that will expand in all directions to fit the content contained within it, instead of just vertically. It works especially well if users increase the font size but making the entire box larger, instead of just shifting the content around and making the box longer vertically.

Four Methods to Create Equal Height Columns
Here’s another tutorial for creating equal-height columns in CSS, this time covering four different techniques. The techniques covered work in all major browsers (even IE6).

Four Methods to Create Equal Height Columns

Vertical Centering With CSS
This post covers a variety of the best techniques for centering CSS elements vertically on a page. It also covers how to create a simple little vertically-centered website using the techniques.

 Vertical Centering With CSS

CSS vertical center using float and clear
Here’s another tutorial for creating a vertically-centered CSS box using float and clear. It even works in IE5 for the Mac, just in case.

Cross-Browser Inline-Block
This tutorial covers how to create an inline-block layout that works with varying levels of content without breaking the layout.

 Cross-Browser Inline-Block

The CSS “Ah-ha!” Moment
Here’s a post talking about the “Ah-Ha!” moment most designers have at some point in their careers, where some vital bit of design knowledge suddenly makes perfect sense. In this case, it’s the relationship of CSS boxes within a layout.

The CSS

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
This article gives a comprehensive overview of CSS layers, relative and absolute positioning, and Z-Index properties.

An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning

The CSS Overflow Property
Here’s a complete run-down of how the different settings for the CSS overflow property work. It includes visible (the default), hidden, scroll, and auto, with illustrated examples of each.

The CSS Overflow Property

Absolute, Relative, Fixed Positioning: How Do They Differ?
The differences between absolute, relative, and fixed positioning with CSS can be confusing at times. This article shows the difference between each one and when it’s appropriate to use one or another.

display: inline-block
Here’s a cross-browser (mostly) compatible method of creating inline blocks in a variety of styles. There are some differences, though, between the vertical alignment interpretation between browsers.

display: inline-block

 


Leave a comment