DotNetNuke® Websites: Problem — Design — Solution

10.1. Skinning

This first tip is one I touched upon in Chapter 4, but it's worth noting again. When creating skins, make it a standard practice to ensure they expand seamlessly, if necessary, for wider content. It doesn't even have to be obvious to the client/website administrators.

Take it from experience, there's nothing worse than a skin "breaking" when you start applying content or when logged in as Admin or Host (adding additional menu items). If you take the extra time coding your HTML properly, you mitigate the possibility of your clients freaking out when the skin you have designed for them "blows up."

There's a simple way to do this if you are using tables-based code, although it requires a bit of nesting. The first step is to create an underlying table and apply the minimum width of your skin to it via a single CSS style. (I typically name this CSS style something like MainTable.) Here's a simple HTML code example:

<table border="0" cellpadding="0" cellspacing="0" class="MainTable">
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
</table>

Then you nest tables that have a width of 100 percent, applied via another CSS style, inside the appropriate cells of the MainTable like this:

<table border="0" cellpadding="0" cellspacing="0" class="MainTable"> <tr> <td><table border="0" cellpadding="0" cellspacing="0" class="InnerTable" id="NestedTable1"> <tr> <td>NestedTable1 Cell</td> </tr> </table></td> </tr> <tr> <td><table border="0" cellpadding="0" cellspacing="0" ...