This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > April 2006 > CSS - Formatting text





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author CSS - Formatting text
david.hunter@gmail.com

2006-04-10, 7:12 pm

Hi All - I have a list of words that I would like to place into three
'columns', left justfied so that the word in each column 'lines up'. In
tables I would simply use mutiple rows, three columns.

How can I do this using CSS ?" I don't know how to congtrol the spacing
between each word.

I am refering to the left hand column in this page under Songs :
http://unchained.ca/songs/index.php?menu=songs

I wuold like to be able to fomrat the look of thes text so it is not
so unorganized :
Listen - Lyrics - song name
Listen - Lyrics - song name
Listen - Lyrics - song name
Listen - Lyrics - song name
Listen - Lyrics - song name

Thanks!

JDS

2006-04-10, 7:12 pm

On Mon, 10 Apr 2006 07:45:21 -0700, david.hunter wrote:

> Hi All - I have a list of words that I would like to place into three
> 'columns', left justfied so that the word in each column 'lines up'. In
> tables I would simply use mutiple rows, three columns.
>
> How can I do this using CSS ?" I don't know how to congtrol the spacing
> between each word.
>
> I am refering to the left hand column in this page under Songs :
> http://unchained.ca/songs/index.php?menu=songs
>
> I wuold like to be able to fomrat the look of thes text so it is not
> so unorganized :
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name
>
> Thanks!


Use tables just for this list. IMO, this is a valid "use tables"
situation.

--
JDS | jeffrey@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

david.hunter@gmail.com

2006-04-10, 7:12 pm

LOL. Ok - thanks for the input.

I was trying to increase my knowledge of css in this area - but if this
is the 'industry norm' in this case then that's fine by me. :-)

Daniel Déchelotte

2006-04-10, 7:12 pm

david.hunter@XXXXXXXXXX a écrit :

> Hi All - I have a list of words that I would like to place into three
> 'columns', left justfied so that the word in each column 'lines up'.
> In tables I would simply use mutiple rows, three columns.


A TABLE would be okay actually, but there are better alternatives (see
below).

> http://unchained.ca/songs/index.php?menu=songs
>
> I wuold like to be able to fomrat the look of thes text so it is not
> so unorganized :
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name
> Listen - Lyrics - song name


If you are to use a ragged left (right flushed) style, you'd better
put the fixed length text on the right, and leave the variable song
name on the left:

song name: track, lyrics
long song name: track, lyrics
shortest song name: track, lyrics

and so on. For this you don't even need a table.

Note that the current transitional XHTML DIV soup does not validate.
Among other suggestions: use a list (UL or OL) to markup the tracklist
(in fact much better than a TABLE, IMHO), do not reuse the same id
several times, set a background color, ...

--
Daniel Déchelotte
http://yo.dan.free.fr/
JDS

2006-04-10, 7:12 pm

On Mon, 10 Apr 2006 07:56:36 -0700, david.hunter wrote:

> is the 'industry norm' in this case then that's fine by me. :-)


Hmm... "industry norm" seems to me like a weird way to describe this
situation.

A "table" is for tabular data.

One could, perhaps, argue, that yes, in fact, your track list *is* tabular
data. (One could also argue against that point, I think).

Thus the suggestion, "use a table."


However, I like D Déchelotte's suggestion of using a right-justified
list better.


Overall, the point is this:

When using CSS, remember that the HTML is for "MARKUP" and the CSS is for
"LAYOUT". Use the most closely correct HTML markup for each item on a
page. If a thing is a "list" then use <UL> or <OL> with <LI> for the list
items. If a thing is a pargraph, then mark it as such (<p> ). And so on.
So if a thing is a table of information that only makes sense when laid
out in rows and columns that relate back to the row and column headings,
then use a <TABLE>. Otherwise, it is probably just a list.

This is called "semantically correct markup".

In actuality, as I look back at your page, (and I see now that you have
tweaked the layout since you posted), the list of tracks is really just a
list and <UL> (or maybe <OL> ) is probably more semantically correct. So I
retract my earlier "use a table" suggestion as it is semantically
incorrect.


The best[1] way for you to do this is really to use a list, and then use
CSS tabular layout to lay out the columns. But CSS tables do not work
*at* *all* in a particular browser whose name I withhold (<Cough cough
MSIE cough> ) and thus your layout will not work for most of your viewing
audience.

later..




[1] In all things computer related, there is always another "best" way to
do something. So take the word "best" with a grain of salt here.

--
JDS | jeffrey@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

Alan J. Flavell

2006-04-10, 7:12 pm

On Mon, 10 Apr 2006, JDS wrote:

> When using CSS, remember that the HTML is for "MARKUP" and the CSS
> is for "LAYOUT".


Well, for "presentation". "Layout" is only a part of presentation.

Indeed, for some kinds of presentation (e.g speaking browser) the
concept of "layout" is somewhat tenuous.
JDS

2006-04-10, 7:12 pm

On Mon, 10 Apr 2006 17:10:09 +0100, Alan J. Flavell wrote:

> Well, for "presentation". "Layout" is only a part of presentation.
>
> Indeed, for some kinds of presentation (e.g speaking browser) the
> concept of "layout" is somewhat tenuous.


Point noted.

--
JDS | jeffrey@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews