Tag: CSS layout

Embedding image slideshow in your WordPress site

[ 2 Comments ] Posted on December 23, 2009 under WordPress plugins

Image slide show is a good eye candy for your website to highlight some things about your company. If your website is powered by WordPress, you can put a simple slide show using the WP-Cycle plugin.

Margin and padding of block elements

[ No Comments ] Posted on December 27, 2008 under Cascading Stylesheet (CSS), Hypertext Mark-up Language (HTML)

Margin and padding are two important attributes that are useful in providing appropriate spacing between HTML elements. In particular, they are useful in rendering proper spacing among block elements in a pure CSS layout. The difference between margin and padding and how they render to block elements will be discussed in this article.

Fixed-width two-column CSS layout

[ No Comments ] Posted on December 6, 2008 under Cascading Stylesheet (CSS)

Design a simple website with two columns (content and side menu), a header and a footer. The width is fixed but it can expand downward to accommodate more content.

Centering a fixed-width webpage using absolute position

[ No Comments ] Posted on December 1, 2008 under Cascading Stylesheet (CSS)

A method of centering a fixed-width webpage that uses absolute position attribute to determine the exact coordinates of the outermost block element. You can center a webpage horizontally, vertically or both.

Centering a fixed-width webpage using auto margin

[ No Comments ] Posted on November 7, 2008 under Cascading Stylesheet (CSS)

One way of centering all the elements of a webpage in a fix-width layout is by setting the margin of the outermost block element to some value and auto. Without this configuration, the default setting for most browsers is to flush all elements to the left. Note that there is no such thing as float:center; and the text-align:center; does not work in divisions.

Designing a simple website layout using CSS

[ No Comments ] Posted on October 18, 2008 under Cascading Stylesheet (CSS)

This article explains how to design a simple website with two columns (content and side menu), header and footer. The dimensions are fixed. Even though it is unlikely that anyone will develop a website with such a rigid layout, this article serves as a prerequisite to all website layout tutorials.

Why use CSS in layouting a website instead of tables

[ No Comments ] Posted on October 10, 2008 under Cascading Stylesheet (CSS), Search Engine Optimization (SEO)

CSS layout is superior to table layout for two reasons: first, webpages with CSS layout have greater chance of reaching the top of search engine results than table layout and second, CSS layout enables the webpages across the same website to have consistent appearance and format without the need to edit the pages one by one.