PDA

View Full Version : Css And Tables



TheKiler
01-15-2004, 05:27 AM
Ok I have a table, it uses an image to give the table it's color.


<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.


<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>


<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?

sparsely
01-15-2004, 08:50 AM
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.

Ynhockey
01-15-2004, 01:52 PM
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...

TheKiler
01-15-2004, 02:28 PM
I tried that. Give me more in-depth information.

TheKiler
01-15-2004, 02:48 PM
How to class a table. Teach me.

Ynhockey
01-15-2004, 03:22 PM
<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.

sparsely
01-15-2004, 09:30 PM
okay.
in teh .css file for each theme, add a line like this



.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;)