Webmaster forum - CSS centred alignment

Author

CSS centred alignment

Mark Goodge

2007-05-25, 6:16 am

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

:Jerry:

2007-05-25, 6:16 am

"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?......

Geoff Berrow

2007-05-25, 6:16 am

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

Mark Goodge

2007-05-25, 6:16 am

:Jerry: wrote:
> "Mark Goodge" <usenet@listmail.good-stuff.co.uk> wrote in message
> news:46569b68$1@server1.good-stuff.co.uk...
> <snip>
>
> 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

paul watt

2007-05-25, 6:16 am

"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

Simon Brooke

2007-05-25, 6:16 am

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

> :Jerry: wrote:
>
> 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

Matt Probert

2007-05-25, 6:18 pm

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...IN_AT_POKER.HTM

John Hosking

2007-05-25, 6:18 pm

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.

--
John

Krustov

2007-05-25, 6:18 pm

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

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

GreyWyvern

2007-05-25, 6:18 pm

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

> Mark Goodge wrote:
he =
[color=darkred]
>
>
> 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 t=
he =

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 r=
ow =

and have it "rowspan" through all the rows, that would make a little mor=
e =

sense, but it would still not convert to a sensible textual representati=
on.

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

John Hosking

2007-05-25, 6:18 pm

Krustov wrote:
> <uk.net.web.authoring>
> <John Hosking>
> <Fri, 25 May 2007 17:37:25 +0200>
> <465702b7_2@news.bluewin.ch>
>
>
> 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

John Hosking

2007-05-25, 6:18 pm

GreyWyvern wrote:
> And lo, John Hosking didst speak in alt.www.webmaster,uk.net.web.authoring:
>
>
> 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"?

Yes, that's rather what I meant. It's *not* clean semantically, but I
don't think I agree that it "defeats the purpose of using the table in
the first place", since the matches are still in the same row. But feel
free to persuade me.

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

No, icky. Even ickier than my idea of a shortcut. And it wouldn't look
like what the OP was envisioning.

--
John

Jaya

2007-05-25, 6:18 pm

Hi Mark goodge...

you can use simple tables to get these results...

<tr>
<td align=right width=50>Arsenal</td>
<td align=center width=5>Vs</td>
<td align=left width=50>Chelsea</td>
</tr>
<tr>
<td align=right width=50>Liverpool </td>
<td align=center width=5>Vs</td>
<td align=left width=50>Manshester United</td>
</tr>
<tr>
<td align=right width=50>West Ham</td>
<td align=center width=5>Vs</td>
<td align=left width=50>Ajax</td>
</tr>

the result u would get like this
Arsenal Vs Chelsea
Liverpool Vs Manshester United
West Ham Vs Ajax

Have fun
Aishwariya
http://www.monstertemplate.co.in
http://www.cd.monstertemplate.co.in

Andy Jacobs

2007-05-25, 6:18 pm

On 25/5/07 9:19 am, in article 46569b68$1@server1.good-stuff.co.uk, "Mark
Goodge" <usenet@listmail.good-stuff.co.uk> wrote:

> Ajax v PSV Eindhoven

<flippant>
Ajax is completely wrong.
</flippant>

That dealt with, why would you want to work really hard to avoid something
that is totally appropriate for your content?

--
Andy Jacobs
http://www.redcatmedia.co.uk

Stevie D

2007-05-25, 6:18 pm

Jaya wrote:

> you can use simple tables to get these results...
>
> <tr>
> <td align=right width=50>Arsenal</td>
> <td align=center width=5>Vs</td>
> <td align=left width=50>Chelsea</td>
> </tr>
etc...

That is *not* a simple table!

Specifying the width of each cell is completely unnecessary, and
totally unhelpful. Just leave the browser to sort out the size it
needs, and it will fit the table nicely round whatever text is in
there.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\'/ '///////_____________________________________________

Doc O'Leary

2007-05-26, 10:16 pm

In article <46571553_1@news.bluewin.ch>,
John Hosking <John@DELETE.Hosking.name.INVALID> wrote:

> Yes, that's rather what I meant. It's *not* clean semantically, but I
> don't think I agree that it "defeats the purpose of using the table in
> the first place", since the matches are still in the same row. But feel
> free to persuade me.

It's not really that big of a deal for alignment, I suppose, but you
have to ask yourself about what might be done with the page dynamically
and/or how it might be most simply generated. Additionally, the use of
CSS to style the individual td elements would not be possible if you
cram the stuff together.

--
My personal UDP list: 127.0.0.1, 4ax.com, buzzardnews.com, googlegroups.com,
heapnode.com, localhost, x-privat.org

Simon Brooke

2007-05-26, 10:16 pm

in message <465702b7_2@news.bluewin.ch>, John Hosking
('John@DELETE.Hosking.name.INVALID') wrote:

> Mark Goodge wrote:
>
>
> Tables, as discussed. But you don't need three cells per row, only two.

The data seems to me to imply three cells per row, doesn't it? Is the 'v'
part of 'Arsenal' or of 'Chelsea'? I agree that presentationally it buys
you nothing, but is still seems to me the correct solution.

Oh - and class your columns, don't put presentational details into the
markup.

--
simon@jasmine.org.uk (Simon Brooke) http://www.jasmine.org.uk/~simon/

Do not sail on uphill water.
- Bill Lee

Toby A Inkster

2007-05-31, 10:32 pm

Simon Brooke wrote:

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

It's fairly easy if you use inline-block, but not all browsers support
inline-block.

<div class="match">
<span class="team first-team">Arsenal</span>
<span class="versus">v</span>
<span class="team second-team">Man Utd</span>
</div>

..team { display: inline-block; width: 45%; }
..first-team { text-align: right; }

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.12-12mdksmp, up 96 days, 20:19.]

Non-Intuitive Surnames
http://tobyinkster.co.uk/blog/2007/...itive-surnames/