Tables are still needed ?

Discussion in 'HTML' started by Chris Leonard, Sep 18, 2003.

  1. I'm looking at redesigning my site without using tables and just using DIVs
    with CSS.

    Question: I have at the moment a menu bar running from top to bottom on the
    lefthand side of the page. The whole bar is made of one table with each item
    sitting in it's own cell. when ever you move the mouse over the cell the
    background changes colour - it's not as tacky as it sounds!

    So, how would I still do this without using tables ? lots of small boxes ?

    Any ideas of help would be appreciated please, thanks

    Chris
     
    Chris Leonard, Sep 18, 2003
    #1
    1. Advertising

  2. Chris Leonard

    rf Guest

    "Chris Leonard" <> wrote in message
    news:bkda7r$nh1$...
    > I'm looking at redesigning my site without using tables and just using

    DIVs
    > with CSS.
    >
    > Question: I have at the moment a menu bar running from top to bottom on

    the
    > lefthand side of the page. The whole bar is made of one table with each

    item
    > sitting in it's own cell. when ever you move the mouse over the cell the
    > background changes colour - it's not as tacky as it sounds!
    >
    > So, how would I still do this without using tables ? lots of small boxes ?


    Yep, lots of small boxes. Don't throw <div>s at it though. Make the boxes
    out of the links themselves:

    ..nav {width: 6em; position: absolute;}
    /* don't use float: left for this, this makes IE only change the colour if
    the cursor is over the actual text of the link, not within the entire box */
    ..nav a
    {
    margin: .5em;
    border: solid 1px black;
    background-color: #f8f0c0;
    padding: .5em;
    display: block;
    }
    ..nav a:hover {background-color: #cfc;}

    <div class="nav">
    <a href="#">link 1</a>
    <a href="#">link 2</a>
    <a href="#">link 3</a>
    <a href="#">a very long link that uses up more than one line</a>
    </div>

    With the above it's a simple matter to, say, decide to have the navigation
    bar horizontal and at the top of the page. Just change the CSS and every
    page on the site changes.

    Cheers
    Richard.
     
    rf, Sep 18, 2003
    #2
    1. Advertising

  3. Chris Leonard

    Nico Schuyt Guest

    Chris Leonard wrote:
    > Question: I have at the moment a menu bar running from top to bottom
    > on the lefthand side of the page. The whole bar is made of one table
    > with each item sitting in it's own cell. when ever you move the mouse
    > over the cell the background changes colour - it's not as tacky as it
    > sounds!
    > So, how would I still do this without using tables ? lots of small
    > boxes ?


    http://www.alistapart.com/stories/taminglists/
    Look at "In the Real World", almost at the end of the page.
    Good luck!
    Nico
     
    Nico Schuyt, Sep 19, 2003
    #3
  4. "rf" <> wrote in message news:<iIqab.110816$>...
    > Don't throw <div>s at it though. Make the boxes
    > out of the links themselves:


    What about browsers that don't support CSS (or have it disabled)?
     
    Leif K-Brooks, Sep 19, 2003
    #4
  5. Chris Leonard wrote:

    > Question: I have at the moment a menu bar running from top to bottom on
    > the lefthand side of the page. The whole bar is made of one table with
    > each item sitting in it's own cell. when ever you move the mouse over the
    > cell the background changes colour - it's not as tacky as it sounds!
    >
    > So, how would I still do this without using tables ? lots of small boxes ?


    Same as always - start by describing the semantics of the data.

    What is a menu? Its a _list_ of choices.

    So you'd have:

    <ul>
    <li><a href="#a">A</a></li>
    <li><a href="#b">A</a></li>
    <li><a href="#c">A</a></li>
    </ul>

    Then you can style it to look nice:
    http://www.maxdesign.com.au/presentation/listamatic/vertical08.htm


    --
    David Dorward http://dorward.me.uk/
     
    David Dorward, Sep 19, 2003
    #5
  6. Chris Leonard

    rf Guest

    "David Dorward" <> wrote in message
    news:bke3vl$b2p$1$...
    > Leif K-Brooks wrote:
    >
    > > "rf" <> wrote:

    >
    > >> Don't throw <div>s at it though. Make the boxes
    > >> out of the links themselves:

    >
    > > What about browsers that don't support CSS (or have it disabled)?

    >
    > They would see:


    > link 1link 2link 3


    Nope.

    Link 1 link 2 link 3

    There is whitespace between the links.

    Cheers
    Richar.
     
    rf, Sep 19, 2003
    #6
  7. Chris Leonard

    Dylan Parry Guest

    rf wrote:

    > Link 1 link 2 link 3
    >
    > There is whitespace between the links.


    Still not ideal though. IIRC both the WCAG 1.0 and Section 508
    accessibility guidelines state that links should be separated by more than
    just whitespace.

    --
    Dylan Parry
    http://www.webpageworkshop.co.uk - FREE Web tutorials and references
     
    Dylan Parry, Sep 19, 2003
    #7
  8. Thanks for your thoughts everyone.

    One question I have however, which browsers now-a-days don't support CSS and
    why bother with those who use them ? Don't mean to sound "off" just
    wondering if it's like writing code to compensate for about 1% of your
    viewers.

    Chris
     
    Chris Leonard, Sep 19, 2003
    #8
  9. Chris Leonard wrote:

    > One question I have however, which browsers now-a-days don't support CSS
    > and why bother with those who use them?


    Googlebot, my palmtop browser, my cellphone browser...

    > Don't mean to sound "off" just wondering if it's like writing code to
    > compensate for about 1% of your viewers.


    If you start with good HTML then they are compensated for automatically.

    --
    David Dorward http://dorward.me.uk/
     
    David Dorward, Sep 19, 2003
    #9
  10. Chris Leonard

    Isofarro Guest

    Dylan Parry wrote:

    > rf wrote:
    >
    >> Link 1 link 2 link 3
    >>
    >> There is whitespace between the links.

    >
    > Still not ideal though. IIRC both the WCAG 1.0 and Section 508
    > accessibility guidelines state that links should be separated by more than
    > just whitespace.


    Since there are a list of links (also known as a menu), using a list
    structure sounds about right. That solves the accessibility problem.


    --
    Iso.
    FAQs: http://html-faq.com http://alt-html.org http://allmyfaqs.com/
    Recommended Hosting: http://www.affordablehost.com/
    Web Design Tutorial: http://www.sitepoint.com/article/1010
     
    Isofarro, Sep 19, 2003
    #10
  11. Chris Leonard

    Kris Guest

    In article <bkf7t8$jp6$>,
    "Chris Leonard" <> wrote:

    > One question I have however, which browsers now-a-days don't support CSS and
    > why bother with those who use them ? Don't mean to sound "off" just
    > wondering if it's like writing code to compensate for about 1% of your
    > viewers.


    Not necessarily 1%. But it is shrinking. Usage of UA's that have CSS
    support is growing. But don't loose track of alternative devices either.
    Mobile connectivity is on the move and due to the nature of these
    gadgets (mobile phones, PDA, etc.), full-fledging desktop browsers is a
    bit too much for them yet. Expect that these devices will not have
    widespread support for CSS soon.

    --
    Kris
    erlands (nl)
    "We called him Tortoise because he taught us" said the Mock Turtle.
     
    Kris, Sep 19, 2003
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DazedAndConfused

    Is xspisapi.dll still needed in 2003

    DazedAndConfused, Sep 10, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    638
    Juan T. Llibre
    Sep 10, 2005
  2. Peter Bassett
    Replies:
    3
    Views:
    970
    Augustus
    Aug 15, 2003
  3. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    522
  4. Chris Brat
    Replies:
    5
    Views:
    725
    =?iso-8859-1?q?Luis_M._Gonz=E1lez?=
    Aug 22, 2006
  5. Mike
    Replies:
    7
    Views:
    447
    Juan T. Llibre
    Jan 19, 2007
Loading...

Share This Page