Well ive been doing xmhtml/css skins from the beginning when DNN was crap in that area and stillmanaged to mke i work, its a metter of consantly learning, Fortunately the dnn4 installs were getting along better and better. But still there are issues that havent been solved from the early onesup to the newer ones. Based on the dnn 4.x install youa re using there has been a lot of invalid replacing and inserting of contentpanes.
Here is how I work
Converting the design
After I get the design i need to convert i am going to draw all the blocks that need to be positioned and how they shoudl flow and react.
Based on the history of dnn and ivalid html crap my method of choice was either floating a div left or right for the positioning. Absolute positioning was a hell in earlier dnn versions so i gave up on that since I can style anythign now with floated divs.
set up your framework by making one main div as the wrapper and in there float the ones you need either left or right and if you need to float others inside anothe floated one use a div as wrapper too. Altho for real html site with fullhtml freedom this is a bit overkill it ishelpfull for making the design more fogiving for extremely crappy programmed custom modules
if you need to set the flow back to normal use <div style="clear:both"
Work practices
use indenting in your code to understand which panel goes where, especially with more complex designs with a lot of panes and nested panes
use proper naming conventions. I always start an id with capital and class in owercase to make my css file easy to read as well. NEVER try to style a contentpane directly. In your first html setup maek sure your site work perfectly wih css and html before converting over to dnn. The panels that hald my contetpanes are usually called "id=ContentPanel" an in there have your conenpanel ( most dnns injected the contentpanes wrong and invalid, andthis made sure that the styling was indeed assigened to the correct element
<div id="ContentPanel"><div id=ContentPane" runat="server"></div></div>
Navigation
Get a good menu system that is based on an unordered ist structure. This way you have ultimate design freedom and most online sampes are based on this so it makes you easy to implement these in your own portals. You can go fr the menus from telerik or my skinoject of choice the cssme
Scripting
Use an unobtrosive scripting library ( you an still make html but the javascript will rewrite this on pageload into something more facny. see http://www.itbuzz.nl accordian panel and sliding news items. If you do a viewsource you dont see javascript for this thats all handeled by the jquery library. Another great library better to be used for webapp interfaces is the extjs one.
An extra helper
Helpers are always handy. I have one skinobject that i inject on all page and that has conditional comments that load differnet extra css files to target ie5 ie6 or ie 7 ( since this is usually where disigns screw up )
css tricks
Get to know your css tricks in order to target speciafic browsers lots of books annd online info on thsi subject. a ral handy one is the _ tric. If you start a css paramerter with _ it will only be recognized by i6 _width:100px;
containers
stay away from too many containers but use one that you style differntly based on the panle they are in
#Rightpanel div.container {background-color:lime;} #ContentPanel div.container {background-color:pink;}
Thats it nothing to it :)