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 parts

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.