Your Ad Here Your Ad Here
Results 1 to 7 of 7

Thread: Css And Tables

  1. #1
    Ok I have a table, it uses an image to give the table it's color.

    Code:
     * * * * * * *<tr> 
     * * * * * * * *<td background="toptableheader.jpg" height="18"> 
     * * * * * * * * *<div align="center">
     * *	<font face="Verdana, Arial, Helvetica, sans-serif" size="1">
     * *	7th Grade Homework</font>
    Now I want the website to be skin enabled. Here is the skin code.

    Code:
    <select onChange="changeskin(this.options[this.selectedIndex].value); window.location.reload();" name="D1">
    <option>Change Skin
    <option>
    <option value="lblue"> Light Blue
    <option value="black"> Black
    <option value="pink"> Pink
    <option value="plain"> Plain
    <option value="christmas"> Christmas
    <option value="girl"> Girly
    <option value="new"> New Years
    <option value="america"> American Patriotism
    <option value="cs"> Counter-Strike
    <option value="diablo"> Diablo II
    <option value="sc"> Starcraft
    <option value="wc"> Warcraft III
    <option value="wy"> Whitney Young
    </select>
    Code:
    <script language="JavaScript">
    <!--
    
    /*
    Copyright SSdesign
    */
    
    var scheme = getCookie('template1');
    if (scheme == 'lblue') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin.2css">');
    } else if (scheme == 'black') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin3.css">');
    } else if (scheme == 'pink') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin4.css">');
    } else if (scheme == 'plain') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin5.css">');
    } else if (scheme == 'christmas') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin6.css">');
    } else if (scheme == 'girl') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin7.css">');
    } else if (scheme == 'new') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin8.css">');
    } else if (scheme == 'america') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin9.css">');
    } else if (scheme == 'cs') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin10.css">');
    } else if (scheme == 'diablo') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin11.css">');
    } else if (scheme == 'sc') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin12.css">');
    } else if (scheme == 'wc') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin13.css">');
    } else if (scheme == 'wy') {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin14.css">');
    } else {
    document.write('<LINK REL="stylesheet" TYPE="text/css" HREF="http://us.ssxh.net/skin/skin1.css">');
    }
    
    
    function changeskin(change) {
    var scheme = change;
    var name = 'template1';
    var pathname = location.pathname;
    var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
    var ExpDate = new Date ();
    ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
    setCookie(name,scheme,ExpDate,myDomain);
    }
    function getCookie(name){
    var cname = name + "="; 
    var dc = document.cookie; 
    if (dc.length > 0) { 
    begin = dc.indexOf(cname); 
    if (begin != -1) { 
    begin += cname.length; 
    end = dc.indexOf(";", begin);
    if (end == -1) end = dc.length;
    return unescape(dc.substring(begin, end));
    }
    }
    return null;
    }
    
    function setCookie(name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) + 
    ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure");
    }
    -->
    </script>
    How can I have CSS change the image?

  2. Internet, Programming and Graphics   -   #2
    sparsely's Avatar
    Join Date
    Dec 2002
    Location
    static hum
    Posts
    3,538
    ummmm...
    off the top of me head....

    sparsely thinks:
    give the TD a class/ID and set it's background-image:url(blahblahblah) properties in each stylesheet.

    this post is guaranteed 100% parrot-free

  3. Internet, Programming and Graphics   -   #3
    Ynhockey's Avatar Poster
    Join Date
    Jan 2003
    Location
    Israel
    Posts
    443
    Sparsley is right.

    An example is:

    background-image: url("http://www.ynhockey.net/stylesheets/styles.css");

    However, something you should know is that a serverside skin changer > JS skin changer. Totally.

    I don't know why ppl still use JS for thins like this...

  4. Internet, Programming and Graphics   -   #4
    I tried that. Give me more in-depth information.

  5. Internet, Programming and Graphics   -   #5
    How to class a table. Teach me.

  6. Internet, Programming and Graphics   -   #6
    Ynhockey's Avatar Poster
    Join Date
    Jan 2003
    Location
    Israel
    Posts
    443
    Code:
    <style>
       .bg { background-image:url("http://www.website.com/file.jpg"); }
    </style>
    
    <table>
       <tr>
          <td class="bg">
             CONTENT HERE
          </td>
       </tr>
    </table>
    ____________________________________

    I think you hung out with the CSS freaks at www.tutorialforums.com too much... they think that you can't possibly use CSS with tables.

  7. Internet, Programming and Graphics   -   #7
    sparsely's Avatar
    Join Date
    Dec 2002
    Location
    static hum
    Posts
    3,538
    okay.
    in teh .css file for each theme, add a line like this

    Code:
    .tdimg
    {
    background-image:url(/images/tdimg.gif);
    }
    the leading dot (.tdimg) makes it a class. you can name it whatever you want.

    for each theme's css, change the url in the background-image line to the image you want to use as a table background.

    then, where you have this:
    <tr>
    * * * * * * ** <td background="toptableheader.jpg" height="18">
    * * * * * * * ** <div align="center">
    * * <font face="Verdana, Arial, Helvetica, sans-serif" size="1">
    * * 7th Grade Homework</font>
    take out the background="toptableheader.jpg" and replace it with class="tdimg" (or whatever you named it in the step above.

    easy

    this post is guaranteed 100% parrot-free

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
  •