Monday, 3 November 2008

More CSS tips

As I said last time, while I've been designing Web sites recently - to W3C standards I might add - I have put together some CSS tips that I'd like to share with you over the next few weeks.

5 Dividing a Web page into sections

You can use CSS to divide a Web page into four parts - an area across the top, then underneath that an area on the left for buttons, an area in the middle for text, and an area on the right.

CSS

#top {
position: absolute;
background: #ffffff;
top:145px;
left:80px;
right:100px
}
#leftcontent {
position: absolute;
left:80px;
top:200px;
width:80px;
background: #f5f5dc;
}
#centercontent1 {
position: absolute;
top:200px;
left:200px;
width: 35%;
margin-left: 81px;
}
#rightcontent {
position: absolute;
right:0px;
top:500px;
width:30%;
background:#f5f5dc;
}

HTML

<div id="top">
</div>
<div id="leftcontent">
</div>
<div id="centercontent1">
</div>
<div id="rightcontent">
</div>

6 printing your page

You may want people to print a Web page as black text on a white background while at the same time having lots of fancy stuff on the page. You can achieve this by having a print stylesheet associated with the page.

HTML

<link rel="stylesheet" type="text/css" href="print.css" media="print">

or:

<style type="text/css" media="print"> @import url(print.css);
</style>

You need to put appropriate styles in the print.css stylesheet.

7 Use "title" and "alt" attributes for images

With these encoded, screen readers can correctly parse your page.

HTML

<img src="myimg.gif" alt="me" title="me" />

8 Invisible text

Invisible text can be useful for people who use screen readers. It can also be useful where images contain text because search engines can't "read" images.

CSS

position: absolute; left: -5000px

The text is positioned 5000px to the left of the left edge of the screen.

9 Drop cap

This adds a drop cap to the left of a block of text.

HTML

<span style="margin-right:6px; margin-top:5px; float:left; color:white; background:gold; border: 1px solid #000; font-size:80px; line-height:60px; padding-top:2px; padding-right:5px; font-family:arial;">H</span>ere is a drop cap with a gold background, white text, and a black border.
<div style="clear:both;"><br />
</div>

More hints and tips next time.

By the way: anyone looking for an experienced technical writer or Web designer, contact me at trevor@itech-ed.com.

If you need anything written, contact Trevor Eddolls at iTech-Ed.
Telephone number and street address are shown here.