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?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).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.Basically to align the content in the left & right clumns on the following page:
Click here for sample (<!-- m --><a class="postlink" href="http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test5.php">http://cdxrevvved.mine.nu/web/ecommerce ... /test5.php</a><!-- m -->)
Was just trying to avoid tables.. But they may be the best solution for this, so...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 |
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?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).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.Basically to align the content in the left & right clumns on the following page:
Click here for sample (<!-- m --><a class="postlink" href="http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test5.php">http://cdxrevvved.mine.nu/web/ecommerce ... /test5.php</a><!-- m -->)
Was just trying to avoid tables.. But they may be the best solution for this, so...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 |