Around the Web in Eighty Kilobytes

	Sign In Sign-Up

Old Issues

PreviousIssues : 16 - July 21

Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com

AROUND THE WEB IN EIGHTY KILOBYTES 1.31 - 1.32
   ATWI80KB 16

July 21, 2000

1) Positioning
2) Spacing
Example

1) POSITIONING
   Positioning isn't the sort of thing you'd want to use in a normal webpage - it's more useful for simple Javascript applications and webpages for specific browsers. There are two ways of positioning - absolute positioning and relative positioning.

   Absolute positioning means specifying how far something is from the top and/or left of the page. You choose absolute positioning with the 'position' property.
eg. p { position: absolute }

Two other properties are 'left' and 'top'. 'left' controls how far the object is from the left edge of the browser window. 'top' controls how far it is from the top of the window. eg. b { position: absolute; left: 100px; top: 100 px }
This means that the left edge of all bold stuff is 100 pixels from the left of the screen, and the top edge is 100 pixels from the top of the screen.

   Absolute positioning ignores where everything else in the page is. This can be used to make shadows. For this, you'll need another property, 'z-index'.
Something with higher 'z-index' appears above something with lower 'z-index'. 'z-index' can have any number for a value.

b.top { position: absolute; left: 100px; height: 50px; z-index: 2; color: #000000 } b.shadow { position: absolute; left: 102px; height:52px; z-index: 1; color: #CCCCCC }

This means that bold stuff in the class 'top' is 100 pixels from the left edge of the page and 50 pixels from the top edge and is black. Bold stuff in class 'shadow' is 102 pixels from the left, 52 pixels from the top, behind stuff in class 'top' and light gray. This is a shadow made without any images, which is good, since images take ages to load. It's still a better idea to use images for shadows because many browsers have problems with positioning and 'z-index'.

   Relative positioning is like margins. It has 'left' and 'top' properties, too. 'left' controls how much further right it is than it would normally be, and 'top' controls how much lower it is than it would normally be. It is chosen by giving 'position' a value of 'relative'.
eg. { position: relative; left: 10px; top: 15px }
This means make it 10 pixels further right and 15 pixels lower.

2) SPACING
   The gap between lines can be controlled with 'line-height'. It controls the gap between the top of lines. It is specified with the 'line-height' property. Here's how it works:
   DIV { line-height: 20pt }
Meaning the gap between the top of two lines is twenty points.

You can use these units:

px (Pixels)

pt (Points)

em (Uh.... Em things)

mm (Millimeters)

cm (Centimeters)

in (Inches)

%  (Percentages)
etc. etc.
There's another way to control line-height - just give a unitless number! It will multiply this by the text size and use that as line height.
eg. body { line-height: 1.5 }
If you have text 20 pixels high, it'll make line height 20 x 1.5 = 30 pixels.

That's it for CSS. Although you'll probably find it useful, many browsers don't support and those that do don't support everything. So there are a few rules of CSS:

Don't make your page unviewable without CSS.

Anything that can be done in HTML, do with HTML, not CSS.

Never make things that look good with CSS-supporting browsers and awful with everything else.

Use tables for layout, instead of margins, padding or positioning. This may not look as good, but is better supported.
(Yawn)

EXAMPLE
<html> <head> <title>The</title> </head> <style type="text/css">  </style> <body link="#FFFFFF" alink="#FFAAAA" vlink="#FFFFFF" bgcolor="#FFFFFF"> <font face="verdana, arial, helvetica"> <hr><br> <h1 class="top">Next</h1> <h1 class="bottom">Next</h1> <h2>Week:</h2> <DIV> We stop learning how to make pages look nice...<br> ...we start learning how to make pages look useful.<br> </DIV> </font> </body> </html>

See you in a week!
Aniruddh Nath

Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.