affiliate make money online    
cascading style sheets indentHome
cascading style sheets indent
cascading style sheets indentSoftwarecascading style sheets indent
cascading style sheets indent
cascading style sheets indentWebsites
cascading style sheets indent
cascading style sheets indentContact Us
cascading style sheets indent
cascading style sheets indentLicense
cascading style sheets indent
cascading style sheets indentSearch
cascading style sheets indent
cascading style sheets indentBargains
cascading style sheets indent
cascading style sheets indentJoin Get unlimted downloads for 1 year-150+ products--Only $39.95

cascading style sheets indent

 Affordable Website Templates

Tip#4

INDEX OF WEBMASTER TIPS

Cascading Style Sheets, CSS Tricks: Indenting

As designers, we are loath to give up control over spacing and layout in our Web pages. This desire for a certain look-and-feel often leads us to omit proper structural markup where it is needed, or to use HTML improperly to achieve a certain visual effect at the expense of accessibility.

Commonly misused HTML elements include:

  • BLOCKQUOTE and DL. Intended to designate quotations and definition lists, these elements are often misused to force indentation.

  • TABLE. Tables may be used for layout purposes , but they should be kept as simple as possible, and used only when there's no other solution.

  • B and I. Meaningless in a non-graphical browser. Emphasis should be indicated by STRONG or EM instead of B or I.

Commonly omitted HTML elements include:

  • H1, H2, H3, etc. Headings and subheadings in Web documents should be marked up with the appropriate H tags. Many designers omit these and substitute something like<FONT SIZE="+1"><B>Section 1</B></FONT>. Not only is this messy and a waste of bandwidth; it is also completely meaningless to non-graphical browsers and screen readers.

  • OL and UL. Numbered and bulleted lists should be designated with OL (ordered list) and UL (unordered list).

  • TH. Column and row headers in data tables must be marked up with TH or the table will make no sense to blind users .

Improper or inadequate use of structural markup can confound assistive technologies used by disabled people. It also makes your pages non-portable, bloated, and difficult to maintain.

"But, but, but..."

Hang on, I know you don't want to sacrifice design for accessibility. And you don't have to. Fortunately, the same precise presentational effects can nearly always be achieved without misusing HTML tags or making the page hard for disabled visitors to use. The solution is Cascading Style Sheets, CSS.

Indenting

Question: I want certain images and blocks of text on my page to be indented. How do I do this without using tables, BLOCKQUOTE, or DL?

With Cascading Style Sheets, CSS you can achieve this effect cleanly, and you will have more precise control over the amount of indentation. Create a class in your Cascading Style Sheets "stylesheet" like this:

.indent {margin-left: 2.5em}

You can use different measurements according to your needs. Play around with different values until you get the effect you want, and don't forget to test on multiple platforms and browsers.

You can define your styles either in a single, separate style sheets (recommended), or between the HEAD tags of individual pages, like so:

<head>
<title>The Human Colon: A User's Guide < /title>;
<STYLE TYPE="text/css">
.indent {margin-left: 25px}
.indent2 {margin-left: 10px}
</STYLE>
</head>

Then simply apply the style to the part of the page you want indented:

<p>Our address is:</p>
<div class="indent">Peachtree Tower<br>
100 Peachtree Place<br>
Atlanta, GA 30327</div>

If you had specified a left margin of 2.5em in your style sheet, this HTML would produce the following output:

Our address is:

Peachtree Tower
100 Peachtree Place
Atlanta, GA 30327

Let's say you want your paragraph indented on the right as well, and you want it to appear in a smaller font size than the surrounding text. No problem:

.indent {margin-left: 2.5em; margin-right: 2.5em; font-size: .88em}

CSS provides you with practically endless options for presentation.

Copyright ©2005 webmastersprofitpak.net. All rights reserved.