/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Dec 15.2002

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?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanDec 15.2002 — 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).
Copy linkTweet thisAlerts:
@King_PellinoreDec 15.2002 — Tables are [b]bad[/b], when they are used for graphical layout -- like positioning an image on a page. But tables are [b]good[/b], when they actually list data. I suppose a menu is a kind of thing that a table is appropriate to use for (ie. [i]table[/i] 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.
Copy linkTweet thisAlerts:
@cdxrevvvedauthorDec 15.2002 — Basically to align the content in the left & right clumns on the following page:

[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test5.php]Click here for sample[/URL]

Was just trying to avoid tables.. But they may be the best solution for this, so...
Copy linkTweet thisAlerts:
@StefanDec 15.2002 — [i]Originally posted by cdxrevvved [/i]

Basically to align the content in the left & right clumns on the following page:
[/QUOTE]

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

Success!

Help @cdxrevvved spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...