I'm pretty new @ css as well. I'm used to building sites the old way with html and table based designs. But below is the page that I am trying to include.
into this page: http://www.yourmyspacestuff.com/gens/contact-editor/contact-table-editor.php
Hope this helps. Let me know if you need any other info.
Thanks again!
<html><head>
<link rel="stylesheet" href="color_picker/js_color_picker_v2.css" media="screen">
<script type="text/javascript" src="color_picker/color_functions.js"></script>
<script type="text/javascript" src="color_picker/js_color_picker_v2.js"></script>
<script type="text/javascript">
function setPreviewColor(elemId, colorTxt) {
document.getElementById(elemId).style.backgroundColor=colorTxt;
}
function setPreview() {
setPreviewColor('font_preview', document.getElementById('font_color').value);
setPreviewColor('bg_preview', document.getElementById('bg_color').value);
str1 = escape(document.contacttable.str1.value);
str2 = escape(document.contacttable.str2.value);
str3 = escape(document.contacttable.str3.value);
str4 = escape(document.contacttable.str4.value);
str5 = escape(document.contacttable.str5.value);
str6 = escape(document.contacttable.str6.value);
str7 = escape(document.contacttable.str7.value);
str8 = escape(document.contacttable.str8.value);
color = escape(document.contacttable.font_color.value);
bg = escape(document.contacttable.bg_color.value);
font = escape(document.contacttable.font.value);
font_size = document.contacttable.fontsize.value;
background = escape(document.contacttable.background.value);
if (document.contacttable.expand.checked)
{
expand = 1;
} else {
expand = 0;
}
document.preview.src="preview.php?fontsize="+font_size+"&expand="+expand+"&str1="+str1+"&str2="+str2+"&str3="+str3+"&str4="+str4+"&str5="+str5+"&str6="+str6+"&str7="+str7+"&str8="+str8+"&font_color="+color+"&bg_color="+bg+"&font="+font+"&background="+background;
return true;
}
</script>
</head>
<body onLoad="setPreview();">
<form name="contacttable" method="post" action="preview.php">
<table>
<tr>
<td>Font</td>
<td colspan=3>
<select name="font" onChange="setPreview()">
<option value='Babylon Industrial 2'>Babylon Industrial 2
<option value='Beamie'>Beamie
<option value='Dalia Normal'>Dalia Normal
<option value='Gas Huffer Phat'>Gas Huffer Phat
<option value='Heartless Valiumwhore'>Heartless Valiumwhore
<option value='King Arthur'>King Arthur
<option value='Mama'>Mama
<option value='Mickey'>Mickey
<option value='SF Espresso Shack'>SF Espresso Shack
<option value='verdana'>verdana
</select>
</td>
</tr>
<tr>
<td>Font Size</td>
<td colspan=3><select name="fontsize" onchange="setPreview()">
<option value=6>6
<option value=8>8
<option value=10 selected>10
<option value=12>12
<option value=14>14
<option value=16>16
<option value=18>18
</select>
</td>
<tr>
<td>Text Color</td>
<td style="width: 50px;" id="font_preview"> </td>
<td><input type="text" size="10" maxlength="7" id="font_color" name="font_color" onchange="setPreview()" onblur="setPreview()" value="#000000"></td>
<td><input type="button" value="Color picker" onclick="showColorPicker(this,document.forms[0].font_color,setPreview)"></td>
</tr>
<tr>
<td>Background Color</td>
<td style="width: 50px;" id="bg_preview"> </td>
<td><input type="text" size="10" maxlength="7" id="bg_color" name="bg_color" onchange="setPreview()" onblur="setPreview()" value="#FFFFFF"></td>
<td><input type="button" value="Color picker" onclick="showColorPicker(this,document.forms[0].bg_color,setPreview)"></td>
</tr>
<tr>
<td>Background Image</td>
<td colspan=3><input type="text" size="25" name="background" onchange="setPreview()" onblur="setPreview()"> <input type="checkbox" name="expand" value="1" onchange="setPreview()"> Expand to fill</td>
</tr>
</table>
<table>
<tr><td align=right>Send Message <input type=text name="str1" value="Message" onkeyup="setPreview()"></td>
<td><input type=text name="str5" value="Forward" onkeyup="setPreview()"> Forward to Friend</td></tr>
<tr><td align=right>Add to Friends <input type=text name="str2" value="Friends" onkeyup="setPreview()"></td>
<td><input type=text name="str6" value="Favorite" onkeyup="setPreview()"> Add to Favorites</td></tr>
<tr><td align=right>Instant Message <input type=text name="str3" value="IM" onkeyup="setPreview()"></td>
<td><input type=text name="str7" value="Block" onkeyup="setPreview()"> Block User</td></tr>
<tr><td align=right>Add to Group <input type=text name="str4" value="Group" onkeyup="setPreview()"></td>
<td><input type=text name="str8" value="Rank" onkeyup="setPreview()"> Rank User</td></tr>
</table>
<input type="checkbox" name="save"> Save and generate code<br/>
<input type="submit" name="submit" value="Save">
</form>
<img name="preview" src="preview.php?font=verdana">
</body>
</html>
