After using DNN for nearly a year I'm now looking to create my first skin from scratch.  I would like to do this completely in CSS, but just can't quite get it right... so I've also tried to do it using a table.

In my second attempt, using a table with CSS I can get this - http://pearl.accountantscircle.co.uk/tabid/722/Default.aspx.  The only problems here are - the border around the table (I just can't get rid of it), and there should be a black border line in the middle of the skin (between the left and right panels).

That's the closest I have managed so far, but I also have the pure CSS one I've been working on here - http://pearl.accountantscircle.co.uk/.   I have been reading from various sources on how to make this work... but when I try to apply it, I just can't get it much closer than this (I had something closer but without the shadow on the sides).

Any help/direction with either of these would be appreciated. I am expecting it is just a small learning curve with something I need to understand a little better.

Thanks

David

Thanks heaps for that.  I have had a look at some other skins, and also at one of the DNN Creative tutorials (free one but I do intend to join too).

I've sorted out the shade on the left and right now, all nicely on the screen.

Regardless of that I am still missing something with the CSS skin I am working on and the center boxes (I changed from fixed pixels to 46% and less but no luck).  Is there anything obviously wrong here?  I may run this now as a single container in it and just do it in the module.

Layout

<div id="ControlPanel" runat="server"></div>
<div id="topspace"></div>
<div id="Main">
    <div id="LtShade"></div>
    <div id="Content">
        <div id="leftpane" runat="server" visible="false"></div>
        <div id="contentpane" runat="server" visible="false"></div></div>
    <div id="RtShade"></div>
</div>
<div id="bottomspace"></div>

CSS

*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #ffffff;
    color: white;
    font-size: 11px;
    font-family: "trebuchet ms", helvetica, sans-serif;
}
#LtShade {
    background-image: url(images/LtShadow.jpg);
    background-repeat: repeat-y;
    width: 17px;
    height: 100%;
    float: left;
    margin: 0;
}
#RtShade {
    background-image: url(images/RtShadow.jpg);
    background-repeat: repeat-y;
    width: 14px;
    height: 100%;
    margin: 0;
    float: left;
}
#Main {
    text-align: center; width: 711px; height: 70%;
}
#Content {
    background-color: #333333;
    width: 680px;
    height: 100%;
    margin: 0;
    float: left;
}
#topspace, #bottomspace {
    background-color: white; width: 100%; height: 15%;
}
#leftpane {
    width: 46%;
    border-style: solid;
    border-width: 0 2px 0 0;
    border-color: #000000;
    float: left;
}
#contentpane {
    width: 46%;
    float: right;
}

I'm struggling a little with the horizontal centering, note this is just a  'splash screen' (no menu etc).  I have it working in IE, but not in FF or Safari.

Nearly there, just not entirely sure why the center containers aren't displaying at 320px or 46% etc. For now I'm leaving this completely, as a single pane is doing the job I need.

Thanks

David

One other note, and not to dishearten you, but for all the work you'll do getting it CSS Pure you should be careful of the modules you use because many I've encountered will blow a Pure CSS skin all out of whack.