centering things within a table

[laredotornado]

Hi,

I'm having trouble centering the vertical bars ("|") between the words
in the nav at the top of this page

http://dhlovelife.com/v2/cart/products_main.php

The HTML code is below

<table class="orderProc" width="100%" cellpadding="0" cellspacing="0"
border="0">
<tr>
<td align="center"><a href="#" class="categoriesNav">Goods Home</a></
td>
<td align="center" class="categoriesNav"> | </td>
<td align="center"><a class="categoriesNav" href="https://
dhlovelife.com/v2/cart/products.php?SubCategoriesID=2">Everyday
Essentials</a></td>
<td align="center" class="categoriesNav"> | </td>
<td align="center"><a class="categoriesNav" href="https://
dhlovelife.com/v2/cart/products.php?SubCategoriesID=3">Kids and Pets</
a></td>
<td align="center" class="categoriesNav"> | </td>
<td align="center"><a class="categoriesNav" href="https://
dhlovelife.com/v2/cart/products.php?SubCategoriesID=4">Holiday</a></
td>
<td align="center" class="categoriesNav"> | </td>
<td align="center"><a class="categoriesNav" href="https://
dhlovelife.com/v2/cart/products.php?SubCategoriesID=5">Fantasy Play
Things</a></td>
</tr>
</table>

Any help would be greatly appreciated. Thanks, - Dave

 

[dorayme]

<[email protected]
m>,

I'm having trouble centering the vertical bars ("|") between the words
in the nav at the top of this page

You could simply *not* put each link into a separate cell, (if
you are determined to use tables). Something like:

<td><link> | <link> | <link> | <link> | <link></td>

would be simpler, no? Style the thing then for color of
foreground and background.

As a stepping stone to not use tables at all for laying out such
things. There is a modern movement around these parts that frowns
on using tables for anything but tabular data.

Google up for horizontal css lists when you have time.

 

[laredotornado]

<[email protected]
m>,



You could simply *not* put each link into a separate cell, (if
you are determined to use tables). Something like:

<td><link> | <link> | <link> | <link> | <link></td>

would be simpler, no? Style the thing then for color of
foreground and background.

As a stepping stone to not use tables at all for laying out such
things. There is a modern movement around these parts that frowns
on using tables for anything but tabular data.

Google up for horizontal css lists when you have time.

I like your idea of eliminating the table cells and having everything
in just one row, but when I do this, the words and horizontal bar
don't space themselves out to take up the entire width of the row.
How can I get them to spread out?

Thanks, - Dave

 

[dorayme]

<[email protected]
m>,

I like your idea of eliminating the table cells and having everything
in just one row, but when I do this, the words and horizontal bar
don't space themselves out to take up the entire width of the row.
How can I get them to spread out?

Thanks, - Dave

Here is something I knocked up for you quickly. There is no big
need given your material to get the menu to spread out over a 24"
screen. In most good browsers, max width works and I suggest
1000px for your page as a rough figure. I have kept your table
for the 4 boxes but thrown out most of your code. You really must
not do this table within table and lots of span stuff, you will
just get lost.

If you really want, you can just have the horizontal menu as a
table cell (you can float things inside the cell to solve your
desire to spread things out but I have no time to go though this
at the moment). I have given you a taste for a horizontal list
for it. Compare the actual html you have, in complexity, with
this:

http://tinyurl.com/24ovl7

You will need to configue it more to suit yourself.

The best exercise next is to be rid of the table altogether for
the 4 boxes. Not so hard to do. But enough for now...

O and reminder, for this sort of thing it might be an idea to
prepare the "good" pics to be the same total size, if evenness is
what you are after.