I've been learning all of this as I go over the past week and a half, and I finally have a nice skin and container that I developed with lots of customizability and as little code as possible. I am having a problem with my container though. I am trying to create a line underneath the title and headers and above the bottom icons to separate my content from those areas. I am trying to do it with an centered image and a set height. I would like the height and centering coded into the CSS file, but I want the image customizable in the html code, so that I can create a number of different containers without needing to do a new container package. However, everytime I try to do a background-image style in the html code, it disappears altogether. The same code works perfectly fine in css. I'll show you:
HTML code as I would like it (I don't care if its in the tr code or the td code, but neither works):
<tr class="contborder" style="background-image: url(rwbwrborder.png)">
<td colspan="2"></td>
</tr>
CSS code as I would like it:
.contborder {
background-position: center;
height: 5px;
}
In order to get the image to display, I need to put the background-image code into the CSS, but then it is not easily customizable. I have tried putting one in there and putting a different one into the html, but it just disappears when I upload it. It all seems to work fine in frontpage, however. Any help would be greatly appreciated. So you have it all to mess with, here is the whole html and css code:
<HTML>
<HEAD>
<LINK ID="container" REL="stylesheet" TYPE="text/css" HREF="container.css" />
</HEAD>
<BODY>
<table class="gencontainer" cellspacing="0" width="100%" style="border-color:#999">
<tr>
<td colspan="2" class="contheader" style="background-color:#999; height: 15px;"></td>
</tr>
<tr>
<td colspan="2" class="topbuttons" height="30">[ACTIONS] [VISIBILITY] [TITLE] [ACTIONBUTTON:5]</td>
</tr>
<tr class="contborder" style="background-position: center; background-image: url(rwbwrborder.png)">
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" id="ContentPane" runat="server"></td>
</tr>
<tr class="contborder" style="background-position: center; background-image: url(rwbwrborder.png)">
<td colspan="2"></td>
</tr>
<tr>
<td class="botleftbuttons">[ACTIONBUTTON:1]</td>
<td class="botrightbuttons">[ACTIONBUTTON:2] [ACTIONBUTTON:3] [ACTIONBUTTON:4]</td>
</tr>
</table>
</body>
</html>
.gencontainer {
width: 100%;
border-width: 2px;
border-style: solid;
background-color: transparent;
}
.contheader {
}
.contborder {
background-position: center;
height: 5px;
}
.topbuttons {
text-align: left;
padding: 4px;
}
.botleftbuttons, .botrightbuttons {
padding: 5px;
}
.botleftbuttons {
text-align: left;
}
.botrightbuttons {
text-align: right;
}
Thank you for your help.
Owen