Приглашаем посетить
Пушкин (pushkin-lit.ru)

Chapter 4. Positioning Elements

Previous Page
Table of Contents
Next Page

Chapter 4. Positioning Elements

Chapter 4. Positioning Elements

Chapter 4. Positioning Elements

Since the earliest days of the Web, designers have used tables to create an underlying layout grid for Web pages. This meant adding nasty presentational hackssuch as spacer GIFs, line breaks, and non-breaking spacesinto the markup to achieve the desired layout. With CSS, you can position XHTML elements with great accuracy without adding presentational elements into your markup that pollute the content and make the code difficult to decipher.

With the application of CSS properties, such as margins, padding, and borders, and CSS techniques, such as floating and clearing, you can achieve the sameor even betterresults than in the past. You can do this while keeping your markup lean and clean, and while sharing the styles you write between like elements of your layout, to achieve lightweight and easy-to-read code.

How well you succeed with these techniques depends on how well you understand the box model, the position property, and the display property. The box model describes the positioning controls that exist for every element in your markup. The position property defines the positional relationship between these elements on the page. The display property determines whether elements stack or sit side-by-side, or even display on the page at all. Let's look at each in turn.

    Previous Page
    Table of Contents
    Next Page