CSS - Formatting text

D

david.hunter

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!
 
J

JDS

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

david.hunter

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. :)
 
D

Daniel =?ISO-8859-15?Q?D=E9chelotte?=

(e-mail address removed) 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, ...
 
J

JDS

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

Alan J. Flavell

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

JDS

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top