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 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.



No comments: