View Full Version : Magazine Layout for text with layers is CSS?

22 Nov 2007, 03:40 PM
I am trying to put text in an easy to read fasion & when I try to use a table with 2 colums, the left & right texts are not aligned. - I thought I could do it with layers, (what I think is used for text positioning in CSS? ) But I realize that it's difficult to have something under the layer? Or should I start off by applying one big layer??? What do people do to make rows of aligned text?? Thanks! - I mean, I want to have content under the text, like the nav, etc...

Hmmm... Perhaps a combination of tables & CSS? - My other problem is that I was under the impression that IE thought percent values were pixel values, & wouldn't give me what I desired, so I thought I should use CSS instead, & still have my site look good on all monitor sizes.

look at this page: (tables) : http://www.criticalunity.org/main.php
and this : (2 layers placed in new document in Dreamweaver, with text pasted in them to test, & the graphic at bottom had to be positioned with line spaces, which is bad.. (it's just a test) - http://www.criticalunity.org/test.php

22 Nov 2007, 04:17 PM
You need to specify a vertical alignment for the <TD> tag: <TD valign="top" ... > to have the text align to the top of the table cell.

Although it's a really easy fix and something equally easy to do with tables and with CSS, it's a really poor design choice to have the two columns. First, the usability of a web page like this is poor is people have to scroll to read a column. They have to scroll down to finish the first column and then scroll up to start the next column and then scroll down again to finish the second column. This means interrupting their train of thought multiple times to switch directions. It also will lower the number of people that even attempt to read your page.

People don't read web pages, they scan them looking for something of interest or a link to something of interest. Other than they see most text pages as more of a blur than anything else. If they are presented with a small section of text, they may look at it and start to read it. However if they come across massive amounts of text, they'll just skip it all. And that's what you're trying top do here; cover their browser window with a solid sea of text. It may work in print, but not on a screen.

You would do better by sticking to a single column of text and keeping enough white space on the sides to make it seem airy and open and more inviting to read. Also keeping a single column block of text between about 45 and 75 characters wide will keep the readability the highest (66 is usually considered about the ideal numbers of characters in a line). Two few letters in a line and reading becomes choppy; too many and people lose their place when shifting their eyes from the end of one line to the start of the next. Then rather than having a second column, put in a link to jump to the second section of the text. That way the page doesn't appear to be over whelming at the start, and the text is sectioned off into easily digestible chunks.