Archive for the ‘CSS Page Layouts’ Category

Centering Text with CSS

Tuesday, June 29th, 2010

Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.

read more

Using the CSS z-index

Saturday, June 19th, 2010

By default, the elements of a website line themselves up next to or under each other automatically. However, at times, the design requires them to overlap. When that happens, the stacking order becomes important, and the natural stacking order will need to be manipulated.

read more

Multiple Background Images with CSS

Saturday, May 8th, 2010

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

read more

Styling Lists with CSS

Tuesday, April 27th, 2010

We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.

read more

3-Column, Fixed Width Layout with CSS

Monday, April 12th, 2010

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.

read more

How to Position Text around an Image with CSS

Saturday, March 27th, 2010

It’s always nice to have some pictures to go along with your text. However, if you just use the html to insert a photo into your text flow, you’ll find that it breaks up the flow of your text and just plops itself ungracefully right in the middle of your paragraph without rhyme or reason.

read more

How to Add a Background Image with CSS

Thursday, March 4th, 2010

Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag.

read more

How to Delete Browser Default Settings in CSS

Tuesday, March 2nd, 2010

Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems.

read more

Styling a Horizontal Navigation Menu with CSS

Sunday, February 28th, 2010

It’s true: Your navigation items are really a LIST. Bread, Milk, Sugar, Coffee, Home, Contact Us, About, Cheese, Tomatoes, Sitemap. See, it’s a LIST!! And it should be coded and styled like a list.

read more

2-Column, Center-aligned Fixed Width Layout with CSS

Saturday, February 27th, 2010

How to build a simple center-aligned fixed width two-column layout.

read more