www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Dec 2002
    Posts
    39

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

    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?

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    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).
    // Stefan Huszics

  3. #3
    Join Date
    Dec 2002
    Location
    Perth, Western Australia
    Posts
    55
    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.
    Not all browsers are good. Some of them go bad.
    Not long ago, one of them went as bad as you can go. His hame was I.. I... Well, people usually say that he is a browser That Must Not Be Named.
    That browser killed many of our best coding conventions. It twists features. It knows how to counter-bug any of our designs. It is in possesion of a group of supporters so large that no other browser may stand up to it and live.
    But now there is a hope.

    Site: http://nik-sergeev.com (wood sculpture).

  4. #4
    Join Date
    Dec 2002
    Posts
    39
    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...

  5. #5
    Join Date
    Nov 2002
    Posts
    984
    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 |
    Last edited by Stefan; 12-14-2002 at 11:40 PM.
    // Stefan Huszics

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles