I'm trying to convert a purely css based template to use with DNN. When the file is parsed and then in DNN it loses some of the positioning elements and repeats the line items on the custom right navigation. I'm not sure how to correct this, maybe doing everything in .aspx instead of .html, i dunno. Below is the source for how I'd like it to look, where each gray header can be a separate module, or at least the welcome feature be modules. Any ideas on what could be wrong?
----------- HTML ------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Systematized
Version : 1.0
Released : 20070326
Description: A two-column fixed-width template featuring a light, simple and clean design. Suitable for blogs and small business websites.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>..:: our company ::..</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="skin.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
<a href="#"></a>
</h1>
<h2>
<a href="http://www.ourcompany.com/products/">"Our goal goes here"</a></h2>
<hr />
</div>
<div id="Content">
<div id="blog">
<div id="post-1" class="post">
<h2 class="title">
<a href="#">Welcome to Our Company</a></h2>
<h3 class="date">
[CURRENTDATE]</h3>
<div class="entry">
<img src="images/img7.jpg" alt="" height="89" class="left" />
<p>
<strong>Congratulations and Welcome! </strong> MSN Real Estate (MSN) is an
Oregon-based real estate company that will offer benchmarked rental units for the
Eugene, Oregon community. MSN's units will balance safety, cutting edge features,
and a positive atmosphere for all tenants. These rentals will be provided with unmatched
levels of customer service and attention. Sales are projected to be $430,000 in
year one growing to $600,000 in year three.</p>
</div>
<p class="postedby">
Posted by <a href="mailto:employee" title="employee">Employee</a> | <a
href="#">888.444.3333</a></p>
<div class="hr">
<hr />
</div>
</div>
<!-- end #post-1 -->
<div id="post-2" class="post">
<h2 class="title">
<a href="#">Featured Homes</a></h2>
<h3 class="date">
<a href="#">View All Products</a></h3>
<div class="entry">
<span class="meta">From our preferred buildings</span> <h3>
The Plans</h3>
<img src="images/img12.jpg" alt="American Flag" />
<img src="images/img13.jpg" alt="Eagle" />
<img src="images/img10.jpg" alt="American Family" />
<img src="images/img11.jpg" alt="Perfect Smile" />
<p>
subtitle of plans.</p>
<blockquote>
<p>
"quote from a main benefit from plan"</p>
</blockquote>
<ul>
<li>many models to choose from </li><li>friendly community </li><li>etc </li></ul>
<hr />
<h3>
More From This builder</h3>
<ol>
<li>The Plans </li>
<li>Town Homes </li><li>Apartments </li>
</ol>
</div>
<div class="hr">
<hr />
</div>
</div>
<!-- end #post-2 -->
</div>
<!-- end #blog -->
<div id="sidebar">
<ul>
<li id="search">
<h2>
Search</h2>
<form id="form1" method="get" action="#">
<div>
[SEARCH]
</div>
</form>
<!-- end #search -->
</li>
<li id="archives">
<h2>
NEWS</h2>
<ul>
<li><a href="#">January 2008</a> <small>(current issue)</small></li>
<li><a href="#">December 2007</a> <small>(2)</small></li>
<li><a href="#">November 2007</a> <small>(2)</small></li>
<li><a href="#">October 2007</a> <small>(4)</small></li>
<li><a href="#">September 2007</a> <small>(4)</small></li>
</ul>
<!-- end #archives -->
</li>
<li id="categories">
<h2>
Clients</h2>
<ul>
<li><a href="#">Choosing Your Home</a> </li>
<li><a href="#">Get Financed</a> </li>
<li><a href="#">Request Brochure</a> </li>
<li><a href="#">Forms</a> </li>
</ul>
<!-- end #categories -->
</li>
<li id="blogroll">
<h2>
builders</h2>
<ul>
<li><a href="#">Forms</a> </li>
<li><a href="#">Builder Forms</a> </li>
</ul>
<!-- end #blogroll -->
</li>
<li id="meta">
<h2>
Agents</h2>
<ul>
<li><a href="#">New Agents </a></li>
<li><a href="#">Proposals </a></li>
<li><a href="#">Sales Offices </a></li>
<li><a href="#">Marketing Material </a></li>
</ul>
<!-- end #meta -->
</li>
<li id="Resources">
<h2>
Resources</h2>
<ul>
<li><a href="#" title="1.888.886.7973">Customer Service </a></li>
<li><a href="#">Forms </a></li>
<li><a href="#">Quotes </a></li>
<li><a href="#">FAQ'S </a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Contact Us </a></li>
</ul>
<!-- end #meta -->
</li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 1px;">
</div>
</div>
<!-- end #content -->
<div id="footer">
<p>
</p>
</div>
<div id="benelectfooter">
<span class="copyright"><a href="http://www.constantcontact.com/safesubscribe.jsp"
target="_blank"></a>Customer Service 1 (888) 333-4455 | [COPYRIGHT] | [PRIVACY]
| [TERMS]<br />
<img src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif"
width="168" height="14" alt="Safe Subscribe" /></span></div>
[</div>
<!-- end #wrapper -->
</body>
</html>
--------------- CSS -------------
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
background: #005a9c url(images/body.gif);
}
body, input,textarea, select {
font: normal small Arial, Helvetica, sans-serif;
color: #666666;
}
h1, h2, h3 {
margin-bottom: 1em;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #333333;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.3em;
}
p, blockquote, ul, ol, form {
margin-bottom: 1.5em;
}
blockquote, ul, ol {
margin-left: 3em;
}
blockquote {
margin-right: 3em;
font-style: italic;
}
ul {
list-style-type: square;
}
a {
color: #005a9c;
}
a:hover {
text-decoration: none;
color: #000000;
}
hr {display: none;
}
.hr {
}
img.left {
float: left;
margin: 0 15px 15px 0;
}
img.right {
float: right;
margin: 0 0 15px 15px;
}
/* Wrapper */
#wrapper {
width: 760px;
margin: 0 auto;
background: #2286EB;
border: 1px solid #DCDCDC;
}
/* Header */
#header {
padding: 10px 10px 12px 10px;
background: url(images/img1.gif) no-repeat left bottom;
}
#header h1, #header h2 {
display: inline;
margin: 0;
font-size: 1em;
font-weight: bold;
}
#header h1 {
}
#header h2 {
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Content */
#Content {
background: #FFFFFF url(images/img2.gif) repeat-y;
}
/* Content */
#footercontent {
background: #FFFFFF url(images/img2.gif) repeat-y;
}
/* Blog */
#blog {
float: left;
width: 520px;
margin-top: -6px;
padding-left: 10px;
}
/* Post */
.post {
}
.post .title {
height: 45px;
margin: 0;
padding: 5px 0 0 15px;
background: Gray url(images/img4.gif) repeat-x;
}
.post .title a {
text-decoration: none;
color: #333333;
}
.post .title a:hover {
color: #005a9c;
}
.post .date {
margin-top: -34px;
padding-right: 15px;
text-align: right;
font: bold x-small Arial, Helvetica, sans-serif;
}
.post .entry {
padding: 20px 15px 10px 15px;
line-height: 1.8em;
}
.post .meta {
margin-bottom: 2em;
font-size: x-small;
}
.post .postedby {
margin-bottom: 2em;
padding: 0 15px;
text-align: right;
font-size: x-small;
}
/* Sidebar */
#sidebar {
float: right;
width: 210px;
margin-top: -6px;
padding-right: 10px;
}
#sidebar ul {
margin: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {
margin-left: 1em;
padding: 0 15px 15px 15px;
list-style-type: square;
}
#sidebar li li {
}
#sidebar h2 {
height: 45px;
margin: 0;
padding: 12px 0 0 15px;
background: Gray url(images/img4.gif) repeat-x;
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
}
#sidebar a {
text-decoration: none;
}
/* Search */
#search {
}
#search form {
padding: 0 15px;
}
#search #inputtext1 {
width: 110px;
padding: 1px 2px;
background: Gray url(images/img5.gif) repeat-x;
border: 1px solid #C4C3C4;
}
#search #inputsubmit1 {
background: url(images/img6.gif) repeat-x left bottom;
border: 1px solid #C4C3C4;
}
/* Archives */
#archives input {
}
#archives form {
padding: 0 15px;
}
#archives #inputtextsubscribe {
width: 110px;
padding: 1px 2px;
background: gray url(images/img5.gif) repeat-x;
border: 1px solid #C4C3C4;
font: x-small;
}
#archives #inputsubmitsubscribe {
background: url(images/img6.gif) repeat-x left bottom;
border: 1px solid #C4C3C4;
}
/* Categories */
#categories {
}
/* Blogroll */
#blogroll {
}
/* Meta */
#meta {
}
/* Benelect Footer */
#benelectfooter{
width: 100%;
margin: 0 auto;
background: #FFFFFF;
text-align: center;
}
/* Footer */
.footer
{
border: 1px solid #808080;
background-color: #005A9C;
color: #EEEEEE;
text-align: center;
font-weight: bold;
}
#footer {
background: url(images/img3.gif) no-repeat;
}
#footer p {
margin: 0;
padding: 5px 10px;
font-size: x-small;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
.copyright
{
text-align: center;
font-size: 10px;
font-weight: bold;
height: 15px;
}
a.copyright, a.copyright:link, a.copyright:visited, a.copyright:hover, a.copyright:active
{
text-decoration: none;
color: #000000;
}