SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member 662C [Robert]'s Avatar
    Join Date
    Dec 2003
    Location
    Glasgow, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table with 4 background images

    hi folks,

    is it possible to give 1 table 4 background images instead of having 1 in the table itself, another in the cell and repeating the same in a nested table? basically i'm putting curved corners on my tables and would rather not have all that code slowing down the page

    any ideas?


    regards,
    Robert

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS and classes to declare background images for each cell like this:

    TD.TopLeft {
    background-image: url('/images/bkgd-TL.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    }
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Each element can only have one backround image, but theres nothing to stop you using a number of elements and placing them exactly where you want e.g. in the corners of your table. ( BTW I hope the tables for tabular data )

    See dougs easy corners example:

    http://www.redmelon.net/tstme/4corners/

    The image whether its in the background or the foreground still needs to be loaded so I don't think there's any speed benefit as they will take about the same time to load. (I'm not sure whether the caching on subsequent pages is different but I think once the image is loaded either way it should be cached.)

    Hope that helps.

    Paul

  4. #4
    SitePoint Member 662C [Robert]'s Avatar
    Join Date
    Dec 2003
    Location
    Glasgow, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi guys,

    i'm basically looking to avoid something like this
    Code:
    <table class="corner1">
    <tr>
    -----<td class="corner2">
    -----<table class="corner3">
    -----<tr>
    ----------<td class="corner4"></td>
    -----</tr>
    -----</table></td>
    </tr>
    </table>
    please ignore the dashes they were just put there for formatting, it'll be just 1 table with either navigation or a much larger table containing page content


    regards,
    Robert

  5. #5
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Defining a seperate class for each corner TD is going to be your easiest and most reliable method. As was stated you can only define one background image per each tag.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  6. #6
    SitePoint Member 662C [Robert]'s Avatar
    Join Date
    Dec 2003
    Location
    Glasgow, UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks for your help


Bookmarks

Posting Permissions

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