Tangled web



Wednesday, December 25, 2002

How to place elements on a web page
 
I got an email asking how to place elements on a webpage: Are there implicit columns corresponding to the line numbers one sees with many text and html editors? The short answer is no

Tables or CSS


You can position elements on a web page using tables (that's the way commonly in use until very recently) or using css (cascading style sheets). With the use of tables, you are in effect creating a grid for your page and setting images, paragraphs and so on within that grid.

With the use of css you can position elements on the page relatively or absolutely. See Web Reference, abs. pos. tutorial
The tricky part for each method is the fact that you are not working with a page of fixed size as you are in print. You have no idea what the monitor size, resolution, and window size your viewer will use. The second tricky part is that various browsers and browser versions interpret these things differently, and you don't know (usually) what browser your viewer is using.

For this reason, the way many designers managed a page until recently was to create a table, place a center column in it and locate left-aligned text in that. A list of links could run across the top or down the left-hand side. Why not the right? Because you dont know how far over that will be. You can specify a narrow width for a left column (say 150 pixels, or about 2-3 inches of screen space) and let the text fill the rest of the space, whatever it may be.

A simple explanation of a table:

All the table content is enclosed by two TABLE tags (<table> and </table>) The content must be designed row by row, not column by column. Within the TABLE tags you set the first table row with TR tags (<tr> and </tr>).
For each table row, you may enter as many data cells as you like, bearing in mind that the more you enter, the skinnier will be the content until it becomes unreadable.
Sometimes a page is made with several tables, They will stack up on top of each other, and the browser will render the first one, especially if it's small, right away, then each subseqent one. It's not a good idea to use one long table on a page with lots of content -- it take longer to load.
Table links: W3schools | HTML Goodies | Web Reference

CSS links

I'm still learning css myself and won't try here to teach anyone else. There are a number of good sources online. I hope this helps!
Brainjar | W3.org specs | Web Reference tutorial







Thursday, December 12, 2002

For the small website:
 
Free webspace available at Free Web Space and the Free Site without popup ads





 
One way to position text using css and tables (thanks to Tim Rivera and the HWG):

div.center {text-align: center} /* IE, NN4 */
table.center {margin: auto} /* Moz, Op, N6+ */

<div class="center">
<table class="center">
...
</table>
</div>




Sunday, December 01, 2002

More on CSS:



reading css specs
 
Trrying to read the W3c specs for cascading style sheets? flummoxed by the lingo? Check out the code (aka syntax) at 1.3.2 CSS property definitions. This will make the specs more intelligible.