O'Reilly logo

DotNetNuke® Websites: Problem — Design — Solution by Tracy Wittenkeller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required