Ok.. Going tableless. Next question.. :)

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Ok.. Going tableless. Next question.. :)

cdxrevvved

Ok.. Next question in the tableless css environment

How would I create a box, inside of one of my columns set up similiar to below?

HEADER LINE WITH BACKGROUND

BLANK WHITE LINE
blank tan line with text
BLANK WHITE LINE WITH TEXT
blank tan line with text
BLANK WHITE LINE WITH TEXT
blank tan line with text
BLANK WHITE LINE WITH TEXT

BOTTOM OF BOX

This is easily done with tables, but how with css?

Stefan

What is it for?
Ie what is the content you want to place on rows like this?

Only by knowing what it is can you suggest the apropriate markup and the CSS to go with it (and it's entirely possible that a <table> might be the right thing to use).

King_Pellinore

Tables are bad, when they are used for graphical layout -- like positioning an image on a page. But tables are good, when they actually list data. I suppose a menu is a kind of thing that a table is appropriate to use for (ie. table of contents).

If you don't want to use tables, you can use <SPAN> or <DIV> (they can be as many and as small as you want on a page) or <A>, if they are links. Set in CSS the width and the height and the bgcolor.

cdxrevvved

Basically to align the content in the left & right clumns on the following page:

Click here for sample

Was just trying to avoid tables.. But they may be the best solution for this, so...

Stefan

Originally posted by cdxrevvved
Basically to align the content in the left & right clumns on the following page:

You mean like the links "Most popular items" on the right side?
One link on one color and the next on a nother background color?

I'd probably use a list for that.

Eg start with something like

<dl id="right_column">
<dt>Most Popular Items</dt>
<dd></dd>
<dt>Item Spotlight</dt>
<dd></dd>
<dt>Our Newest Items<dt>
<dd></dd>
<dt>SPECIALS!</dt>
<dd></dd>
</dl>

In the <dd></dd> section you can then add your links eg like this
a)
<a class="even"></a>
<span> | </span>
<a class="odd"></a>
<span> | </span>
<a class="even"></a>
<span> | </span> etc...
or
b)
<ul>
<li class="even">Link</li>
<li class="odd">Link</li>
<li class="even">Link</li>
</ul>

Option B I assume is selfexplanatory, but A could use some CSS to go with it

dd span {display:none;}
dd a {display:block}
dd a.odd {}
dd a.even {}

The difference of A and B is how they display in a webbrowser that does NOT understand (visual) CSS.
A creates a horizontal list while B creates a vertical.

For option A a good idea is probably also to provide the following rule in an aural stylesheet
dd span {display:inline;}
This will make it easier for eg a blind person to differentiate between 2 links next to each other since they are separated with a |