473,386 Members | 1,798 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

CSS - Formatting text

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!

Apr 10 '06 #1
6 1512
JDS
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 | je*****@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

Apr 10 '06 #2
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. :-)

Apr 10 '06 #3
da**********@gmail.com 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/
Apr 10 '06 #4
JDS
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 | je*****@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

Apr 10 '06 #5
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.
Apr 10 '06 #6
JDS
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 | je*****@example.invalid
| http://www.newtnotes.com
DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/

Apr 10 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Rob Meade | last post by:
Hi all, Ok - this leads on from speaking to a couple here and in the SQL server group... I've an application which allows the user to type in their text into a form, they add 'happy' tags...
3
by: Jouke Langhout | last post by:
Hello all! For quite some time now, I've got the following problem: Access won't close properly when a user closes the application. An ACCESS process stays active and that process can only be...
2
by: Colleyville Alan | last post by:
I am using Access and have embedded the ActiveX control Formula One that came with Office 2000. (ver 3.04). I have created and formatted a spreadsheet and now I want to copy the info with...
4
by: Bradley | last post by:
I have an A2000 database in which I have a continuous form with a tick box. There is also a text box with a conditional format that is based on the expression , if it's true then change the...
7
by: BBFrost | last post by:
I'm receiving decimal values from database queries and placing them on a report page. The users want to see the following .... Db Value Display Value 123.3400 123.34...
8
by: Typehigh | last post by:
I have many text fields with conditional formatting applied, specifically when the condition is "Field Has Focus". Without any events associated with the fields the conditional formatting works...
14
by: Scott M. | last post by:
Ok, this is driving me nuts... I am using VS.NET 2003 and trying to take an item out of a row in a loosely-typed dataset and place it in a label as a currency. As it is now, I am getting my...
3
by: michael sorens | last post by:
The documentation for the RichTextBox is sketchy at best. I want to do a very simple task but I cannot find information on this. I am using a RichTextBox as an output window. Some text I want to...
1
by: aman909 | last post by:
Hello, Im trying to use conditional formatting in a text box on a form. What im trying to do is that conditional formatting changes the colour of the text in the text box. I need the...
3
by: =?Utf-8?B?b24tbGluZSBqb3VybmFsIGVkaXRvcg==?= | last post by:
I can't seem to cut-and-paste text, with either .doc or .html formatting, into my .asp web-pages --all the formatting is lost. Is there some code that needs to be added to the page that will...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.