PDA

View Full Version : How to make an expandable box using tables


twilightballoons
04-07-2008, 09:49 PM
I wanted to make an online shop so I installed oscommerce on my website and things look ok with it.

However, to make things look better I installed a program called simple template system which lets you change the way your site appears and create templates. I installed it and made a template using css and things look and work great.

But, there is a way to change the way that the boxes look that contain the information and products etc. I have become stuck as to how I go about this and would like to know if anyone on here can tell me?

Each box comes with two templates that can be changed to alter the look of each box using tables. Now as to how I can make a cool looking expandable box using tables I dont know! I have searched but cannot find the answer.

The top code is:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111" bgcolor="#00FF00">
<tr>
<td width="11">
*</td>
<td background="../changed/images/infobox_03.gif" class="infoBoxHeading" width="1428">
$headertext</td>
<td width="103" style="background-repeat: norepeat">
*</td>
</tr>
</table>

And bottom code is:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00FF00" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td>&nbsp;</td>
<td bgcolor="#DBF1FF">$content</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="30">&nbsp;</td>
<td width="100%">&nbsp;</td>
<td width="31">&nbsp;</td>
</tr>

Can anyone point me in the right direction at all?
</table>

twilightballoons
04-08-2008, 05:12 PM
After looking for an answer to the above question I have nearly found the answer.

I made a new html table with three rows. I then made a box in photoshop and sliced it into three pieces, top, middle and bottom.

I then made a three row and one column table and put the top image into the top, the bottom image into the bottom and set the middle image as the background in the middle row. When I view this on my computer it works great, but when I upload it to my site and view it there the middle is missing. Can anyone tell me where I am going wrong?

Here is the code for the box:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td scope="col"><img src="images/boxtop1.jpg" width="150" height="32" /></td>
</tr>
<tr>
<td background="images/boxmiddle1.jpg"><table width="100%" border="0">
<tr>
<th width="7%" scope="col">&nbsp;</th>
<th width="85%" scope="col">&nbsp;</th>
<th width="8%" scope="col">&nbsp;</th>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/boxbottom1.jpg" width="150" height="29" /></td>
</tr>
</table>
</body>
</html>

mangofreak
04-08-2008, 05:19 PM
USe the same template as in your application:

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#111111" bgcolor="#00FF00">
<tr>
<td width="11">
*</td>
<td background="../changed/images/infobox_03.gif" class="infoBoxHeading" width="1428">
$headertext</td>
<td width="103" style="background-repeat: norepeat">
*</td>
</tr>
</table>



Replace the image infobox_03.gif with something you like and change the color values bordercolor="#111111" bgcolor="#00FF00" to your liking

save images in the same folder as your template.

hope it helps.