#1
  1. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Posts
    27
    Rep Power
    0

    css multiple table and backgrounds


    Hello, i need some help getting my head around css. I want to use css to enhance my sites text and tables.

    I have got a book, read some web tutorials and now have site style 2.1

    Below is the css i am using, it is based on the basic one that come with site style 2.1

    I have set table and td background to be white and page background to be blue.

    Want i want to do now is change some individual table backgrounds to new colour.

    table header
    table nav - change background colour
    table main
    table footer - change backgound colour

    i have tried these classes

    table.nav
    {
    background-color: #******;
    }

    and

    .tablenav
    {
    background-color: #******;
    }



    Anyhelp appriciated, just need to reach the eurika point when it all falls into place


    ---------start css--------------

    {
    background-color: #0080ff;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 9pt;
    }

    /* Because Netscape Navigator 4 does not allow inheritance into tables, and breaks inheritance after tables, rather than simply setting properties on the body and relying on inheritance, we explicitly set the properties using a selector group. */

    /* This basic style sheet provides selectors for the most commonly used elements. Use it as the basis for your style sheets. */

    table, td, p, li {
    background-color: #ffffff;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #000000;
    }

    .navtable {
    background-color: #808080;
    font-family: inherit;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    }

    h1 {}

    h2 {}

    h3 {}

    h4 {}

    h5 {}

    h6 {}

    p {
    font-family: inherit;
    }

    a:link {
    color: #0000ff;
    font-family: inherit;
    }

    a:visited {
    color: #0000ff;
    font-family: inherit;
    }

    a:hover {
    color: #8080ff;
    font-family: inherit;
    text-decoration: none;
    }

    a:active {
    color: #ff0000;
    font-family: inherit;
    }

    img {}
  2. #2
  3. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    here is a sample of table cells with different colour backgrounds, whilst having a default white background for cells

    Code:
    <html>
    <head>
    
    <style>
    body { background-color: #9999cc }
    td { background-color: #ffffff }
    .cellNav { background-color: #cccccc }
    .cellMain { background-color: #cccc99 }
    </style>
    
    </head>
    
    <body>
    <table width=50% border=0 cellspacing=1 cellpadding=5>
     <tr>
      <td colspan=2 align=center>
       maybe a header
      </td>
     </tr>
     <tr>
      <td class=cellNav>
       nav item 1<br>
       nav item 2<br>
       nav item 3<br>
      </td>
      <td class=cellMain>
       Some major content going on here<br>
       Oh yeh<br>
      </td>
     </tr>
    </table>
    
    
    </body>
    </html>
    Last edited by blancbleu; February 19th, 2002 at 10:19 AM.
  4. #3
  5. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Posts
    27
    Rep Power
    0
    will this work in netscape 4.** and with nested tables?
  6. #4
  7. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    i only have IE 5.5 and Netscape 4.7 on my machine. It works on both these.

    Have you tried the code???
  8. #5
  9. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Posts
    27
    Rep Power
    0
    no bt i will be doing so today, just i don't have netscape 4.** just netscape 6 and ie 5.5

    going build linux box which has netscape plus other browsers i can test on

    i really asked question because site style and amany other say to be compatable with other browsers you need to put stuff in blocks

    body, table. p etc

    but with this i found i could not change table background from default.


    cheers for help
  10. #6
  11. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    ok. not sure exactly what is meant by 'having to put stuff in blocks'. Have never seen site style or any other style software to be honest.

    In the example I gave the <td> is the block and you can then apply a style to that block <td class=cellNav> so it is in a block really I guess.

    Netscape 6 is used by less than 1% of surfers presently and looks like picking up slowly so I don't do stuff with Netscape 6 in mind (yet).
    IE 6 on the other hand is already used by 25% of surfers so is worth testing for. (I'm naughty and haven't even seen IE 6 yet!!)

    I can't vouch for the code in either of the version 6 browsers. Can only say it works on my two (IE 5.5 and Netscape 4.7) nested tables shouldn't make a difference as far as I can see but I'm no expert.

    cheers

    Following is a regularly updated page on browser usage stats. interesting:

    http://www.upsdell.com/BrowserNews/stat_trends.htm#B3
    Last edited by blancbleu; February 20th, 2002 at 10:22 AM.
  12. #7
  13. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2001
    Posts
    27
    Rep Power
    0
    If you look at my earlier post and the css file included you will see waht i mean, the note included in the css file was put there by site style.


    example of block is this

    table, td, p, li {
    background-color: #ffffff;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 9pt;
    color: #000000;
    }
  14. #8
  15. No Profile Picture
    wibble
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Location
    UK
    Posts
    161
    Rep Power
    14
    never seen or used the 'inherit' value myself like your stylesheet seems to all over the shop!

    I'll have to leave that question to someone else.

    sorry!

IMN logo majestic logo threadwatch logo seochat tools logo