CSS centred alignment

I'm trying to create a list that's centred on a single character in the
middle of the line - something like a fixture list, like this:

Arsenal v Chelsea
Liverpool v Manchester Utd
West Ham v Reading
Stoke City v Internazionale
AFC Wimbledon v Hull
Ajax v PSV Eindhoven

(You'll need a monospaced font to see that correctly in this posting,
but if you don't have that luxury then imagine it's aligned so that all
the "v"s are in a single vertical line).

This effect is easy to achieve with tables, like this...

<tr>
<td align=right>team 1</td>
<td align=center>v</td>
<td align=left>team 2</td>
</tr>

But it's a lot harder with pure CSS, unless I use fixed-width divs for
each cell - but I want to avoid that as I want the overall width to be
flexible and balanced. Any suggestions? Or is this one of the situations
where using a table is simply the best option?

Mark
--
http://mark.goodge.co.uk

"Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
news:46569b68$1@server1.good-stuff.co.uk...
<snip>
>
> But it's a lot harder with pure CSS, unless I use fixed-width divs
> for each cell - but I want to avoid that as I want the overall width
> to be flexible and balanced. Any suggestions? Or is this one of the
> situations where using a table is simply the best option?
>

But isn't the example you give tabular data?......

Message-ID: <46569b68$1@server1.good-stuff.co.uk> from Mark Goodge
contained the following:

>This effect is easy to achieve with tables, like this...
>
><tr>
> <td align=right>team 1</td>
> <td align=center>v</td>
> <td align=left>team 2</td>
></tr>
>
>But it's a lot harder with pure CSS, unless I use fixed-width divs for
>each cell - but I want to avoid that as I want the overall width to be
>flexible and balanced. Any suggestions? Or is this one of the situations
>where using a table is simply the best option?

We shouldn't forget that tables are not inherently BAD. This table will
linearise just fine.

Furthermore, these rows MUST be kept together to be sensible, hence it
is (IMO) tabular data.



--
Geoff Berrow 0110001001101100010000000110
001101101011011001000110111101100111001011
100110001101101111001011100111010101101011

:Jerry: wrote:
> "Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
> news:46569b68$1@server1.good-stuff.co.uk...
> <snip>
>> But it's a lot harder with pure CSS, unless I use fixed-width divs
>> for each cell - but I want to avoid that as I want the overall width
>> to be flexible and balanced. Any suggestions? Or is this one of the
>> situations where using a table is simply the best option?
>>
>
> But isn't the example you give tabular data?......

Probably. I don't have a pathological aversion to tables, I was just
wondering if I'd missed any obvious way of achieving the same effect in CSS.

Mark
--
http://mark.goodge.co.uk

"Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
news:46569b68$1@server1.good-stuff.co.uk...
> I'm trying to create a list that's centred on a single character in the
> middle of the line - something like a fixture list, like this:
>
> Arsenal v Chelsea
> Liverpool v Manchester Utd
> West Ham v Reading
> Stoke City v Internazionale
> AFC Wimbledon v Hull
> Ajax v PSV Eindhoven
>
> (You'll need a monospaced font to see that correctly in this posting, but
> if you don't have that luxury then imagine it's aligned so that all the
> "v"s are in a single vertical line).
>
> This effect is easy to achieve with tables, like this...
>
> <tr>
> <td align=right>team 1</td>
> <td align=center>v</td>
> <td align=left>team 2</td>
> </tr>
>
> But it's a lot harder with pure CSS, unless I use fixed-width divs for
> each cell - but I want to avoid that as I want the overall width to be
> flexible and balanced. Any suggestions? Or is this one of the situations
> where using a table is simply the best option?
>
> Mark

Yep, Just use a table. Its tabular data afterall.
P.S. Its good to see that the mighty Reading fc have made it to this
newsgroup. Come on you Royals!

--
Paul Watt

http://www.paulwattdesigns.com

in message <4656a621$1@server1.good-stuff.co.uk>, Mark Goodge
('usenet@listmail.good-stuff.co.uk') wrote:

> :Jerry: wrote:
>> "Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
>> news:46569b68$1@server1.good-stuff.co.uk...
>> <snip>
>>> But it's a lot harder with pure CSS, unless I use fixed-width divs
>>> for each cell - but I want to avoid that as I want the overall width
>>> to be flexible and balanced. Any suggestions? Or is this one of the
>>> situations where using a table is simply the best option?
>>>
>>
>> But isn't the example you give tabular data?......
>
> Probably. I don't have a pathological aversion to tables, I was just
> wondering if I'd missed any obvious way of achieving the same effect in
> CSS.

Personally, I think that one would be very tricky with CSS; not impossible
but not at all easy. Like others, I'd use a table.

--
simon@jasmine.org.uk (Simon Brooke) http://www.jasmine.org.uk/~simon/
Windows 95:
You, you, you! You make a grown man cry...
M. Jagger/K. Richards

On Fri, 25 May 2007 09:19:38 +0100, Mark Goodge
<usenet@listmail.good-stuff.co.uk> wrote:

>I'm trying to create a list that's centred on a single character in the
>middle of the line - something like a fixture list, like this:
>
> Arsenal v Chelsea
> Liverpool v Manchester Utd
> West Ham v Reading
> Stoke City v Internazionale
> AFC Wimbledon v Hull
> Ajax v PSV Eindhoven
>
>(You'll need a monospaced font to see that correctly in this posting,
>but if you don't have that luxury then imagine it's aligned so that all
>the "v"s are in a single vertical line).
>
>This effect is easy to achieve with tables, like this...
>
><tr>
> <td align=right>team 1</td>
> <td align=center>v</td>
> <td align=left>team 2</td>
></tr>

So use tables!

It doesn't require a complex mass of nested tables, and will still be
usable in character cell broswers and screen readers.

Matt


--
Want to consistently win at poker? Learn how here!

http://www.probertencyclopaedia.com/...N_AT_POKER.HTM

<uk.net.web.authoring>
<John Hosking>
<Fri, 25 May 2007 17:37:25 +0200>
<465702b7_2@news.bluewin.ch>

> > This effect is easy to achieve with tables, like this...
> >
> > <tr>
> > <td align=right>team 1</td>
> > <td align=center>v</td>
> > <td align=left>team 2</td>
> > </tr>
>
> Tables, as discussed. But you don't need three cells per row, only two.
>

Wrong - fartfox needs things put in the <td> if its to work correctly .

And lo, John Hosking didst speak in alt.www.webmaster,uk.net.web.authoring:

> Mark Goodge wrote:
>> I'm trying to create a list that's centred on a single character in the
>> middle of the line - something like a fixture list, like this:
>> Arsenal v Chelsea
>> Liverpool v Manchester Utd
>
>> This effect is easy to achieve with tables, like this...
>> <tr>
>> <td align=right>team 1</td>
>> <td align=center>v</td>
>> <td align=left>team 2</td>
>> </tr>
>
> Tables, as discussed. But you don't need three cells per row, only two..

How so? By placing the "v" with one of the two team names? That would
distort the tabular data, and defeat the purpose of using the table in the
first place. "Arsenal v" and "Chelsea"? "Liverpool" and "v Manchester
Utd"?

If, rather, you mean to have the middle <td> element only in the first row
and have it "rowspan" through all the rows, that would make a little more
sense, but it would still not convert to a sensible textual representation.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com/orca#search - Orca Search: Full-featured
spider and site-search engine

Krustov wrote:
> <uk.net.web.authoring>
> <John Hosking>
> <Fri, 25 May 2007 17:37:25 +0200>
> <465702b7_2@news.bluewin.ch>
>
>>> This effect is easy to achieve with tables, like this...
>>>
>>> <tr>
>>> <td align=right>team 1</td>
>>> <td align=center>v</td>
>>> <td align=left>team 2</td>
>>> </tr>
>> Tables, as discussed. But you don't need three cells per row, only two.
>>
>
> Wrong - fartfox needs things put in the <td> if its to work correctly .

What?

<tr>
<td align=right>team 1 v</td>
<td align=left>team 2</td>
</tr>

--
John