Hello,
This is my first post and I have just started to use DNN to develop an ecommerce system.
I have paid a DNN skinning company to skin a css, xhtml template for me that I obtained on oswd, and what I got back was a load of tables, and not very true to the template!
Anyway to cut a long story short I have examined their template written in tables, the xml files, and the css. I have now started to convert the template my self and was ultimatley succesful! Except centering the main page div on the page.
I have read quite a few different methods but none seems to work with my site. I am testing this in IE 7.
this is the css that makes up the page container, :
/* NON-HEADER */
body {margin:0px auto; font-size:62.5%; background-color:rgb(255,255,255); font-family:verdana,arial,sans-serif;} /*Font-size: 1.0em = 10px when browser default size is 16px*/
.page-container { width:900px; margin-top:10px; margin-bottom:10px; border:solid 1px rgb(150,150,150); font-size:1.0em;}
.main {clear:both; width:900px; padding-bottom:30px; background:transparent url(./images/bg_main_withnav.jpg) top left repeat-y;}
.main-navigation {display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-content {display:inline; /*Fix IE floating margin bug*/ float:left; width:440px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.main-subcontent {display:inline /*Fix IE floating margin bug*/; float:right; width:185px; margin:0 15px 0 0; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.footercont {clear:both; width:900px; padding:1.0em 0 1.0em 0; background:rgb(225,225,225) url(./images/bg_foot.jpg) no-repeat; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
/* HEADER */
.header {width:900px; font-family:"trebuchet ms",arial,sans-serif;}
.header-middle {width:900px; height:150px; background:rgb(230,230,230) url(./images/Farmers.gif); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;}
.header-bottom {width:900px; height:40px; background:rgb(255,255,255) url(./images/bg_head_breadcrumbs.jpg) repeat-y;}
.header-breadcrumbs {clear:both; width:900px; padding:1.0em 0 1.5em 0; background:rgb(255,255,255) url(./images/bg_head_breadcrumbs.jpg) repeat-y;}
Here is my markup
<link rel="stylesheet" type="text/css" href="layout4.css" />
<div class="page-container" >
<div class="header">
<div class="header-middle">
</div>
<div class="header-bottom">
<div class="nav2">
[SOLPARTMENU]
</div>
</div>
<div class="header-breadcrumbs">
[BREADCRUMB]
<div class="searchform">
[SEARCH]
</div>
</div>
</div>
<div class="main">
<div class="main-navigation">
<div class="round-border-topright"></div>
<div class="first"><div id="toppane" runat="server"></div></div>
<div id="leftpane" runat="server"></div>
</div>
<div class="main-content" id="ContentPane" runat="server">
</div>
<div class="main-subcontent" id="RightPane" runat="server">
</div>
</div>
<div class="footercont">
<p>[COPYRIGHT] | All Rights Reserved</p>
<p class="credits">[PRIVACY] | [TERMS] | [USER] | [LOGIN]</p>
</div>
</div>
Sorry if i am missing anything but as soon as i removed the stabdard html markup it all hun to the left, i have tried position:absolout, and setting the body width but neither seemed to make a difference.