hi, I'm developping a dynamic css-based and xhtml-compliant skin and I solved almost all tasks. But one I cannot see the error I'm doing. My LeftPane and ContentPane should be on the same row but they're always shown among each other. Within the header I've the same scenario and it's working fine. The size of some elements and the background-image are dynamic and some are set with javascript.

Here you can see the example: http://www.starchag.ch/neu/tabid/69/language/de-CH/Default.aspx

Thank you,
Daniel

An extract from the css:

Body {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
 margin:0;
 padding:1.2em;
 background-color: #E6E6E6;
 color:#00000;
 font-size: 20px;
}
#wrap {
 position: relative;
 margin: 0;
 padding: 0;
 height: 100%;
 z-index: 2;
}
#topwrap {
 position: relative;
 border-bottom: 1px solid #808080; 
 z-index: 2;
}
#topmiddle {
 position: relative;
 margin: 0em 1.4em 0em 1.4em;
 border-left: 1px solid #808080; 
 border-right: 1px solid #808080; 
 z-index: 2;
 font-size: 1.2em;
}
#middlewrap {
 position: relative;
 margin: 0em 1.7em 0em 1.7em;
 border-left: 1px solid #808080; 
 border-right: 1px solid #808080; 
 z-index: 2;
}
#background {
 position: absolute;
 clear: both;
 margin: 1.45em 25% 1.45em 25%;
 z-index: 1;
 width: 50%;
}
#background img {
 height: 100%;
 width: 100%;
}
#headerwrap {
 position: relative;
 padding: 0;
 height: 6em;
 z-index: 2;
}
#headertitle {
 position: relative;
 clear: left;
 float: left;
 font-size: 0.6em;
 z-index: 2;
}
#headernav {
 position: relative;
 z-index: 2;
 text-align: center;
 margin: auto;
}
#contentwrap {
 position: relative;
 padding: 20px; 
 z-index: 2;
 height: auto;
 }
#LeftPane {
 position: relative;
 clear: left;
 float: left;
 z-index: 2; 
}
#ContentPane {
 position: relative;
 padding: 0;
 z-index: 2;
 margin: auto;
}
#bottomwrap {
 position: relative;
 padding: 0;
 border-top: 1px solid #808080;
 z-index: 2;
}
#bottommiddle {
 position: relative;
 margin: 0em 1.7em 0em 1.7em;
 border-left: 1px solid #808080; 
 border-right: 1px solid #808080; 
 text-align: center;
 z-index: 2;
}
 

and an extract from the html:

<div id="background"><img src="<%= SkinPath %>starchag_bg_430x510.jpg" border="0" height="100%" width="100%" /></div>
<div id="wrap">
 <div id="topwrap">
     <div id="topmiddle">st.arch AG</div>
 </div>
 <div id="middlewrap">
  <div id="headerwrap">
      <div id="headertitle">Architektur und CAD<br />Postfach 6089<br />2500 Biel 6<br />Tel 032 342 53 50<br /> Mob 079 716 21 01<br />info@starchag.ch</div>
      <div id="headernav"><dnn:MENU runat="server" id="dnnMENU" menualignment="Center" /></div>
  </div>
  <div id="contentwrap">
   <div id="LeftPane" runat="server"></div>
   <div id="ContentPane" runat="server"></div>
  </div>
 </div>
 <div id="bottomwrap">
     <div id="bottommiddle">
   <dnn:USER runat="server" id="dnnUSER" />&nbsp;&nbsp;
   <dnn:LOGIN runat="server" id="dnnLOGIN" />&nbsp;&nbsp;
   <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" />
     </div>
 </div>
</div>

Daniel,

CSS/XHTML is kinda goofie at first, but it will start to make more sense as time goes on.  I tried to stick with your theme best I could, but ended up jsut clearing and writting it how I would.

Sometimes that helps though to see how someone else addresses a problem and solution in thier own words.

First of all, I'm assumign your writting in an ASCX control and not HTML, because you are using <dnn:user> and stuff, I"m slightly confused cause you don't have any register directives at the top, but again, I'm assumign you cut those out. 

so here is what I would have done, using ASCX, if you're indeed using HTML, then get rid of those <DNN> tags, and put tokens in instead, and an XML file.  IE [NAV]

My version of your skin:

ASCX File: (sorry my lovely indentation is dropped)

<%@ Control Language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register Src="~/admin/Skins/menu.ascx" TagName="menu" TagPrefix="uc1" %>
<%@ Register src="~/admin/Skins/login.ascx" tagname="login" tagprefix="uc2" %>
<%@ Register src="~/admin/Skins/user.ascx" tagname="user" tagprefix="uc3" %>
<%@ Register src="~/admin/Skins/copyright.ascx" tagname="copyright" tagprefix="uc4" %>

<!-- a better naming convention will make things easier.
<!-- You can use whatever you want, the way I'm naming stuff below
<!-- makes more sense to me than yours did -->
<!-- for instance, once i'm in the header, I stop using teh word header. it just makes it harder to read.
<!-- I'm already in the header, why do I need to remind myself of that? -->
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div id="wrapPage">
<div id="wrapHeader">
<div id="wrapName">
st.arch AG</div>
<div id="wrapAddressInfo">
Architektur und CAD<br />
Postfach 6089<br />
2500 Biel 6<br />
Tel 032 342 53 50<br />
Mob 079 716 21 01<br />
info@starchag.ch
</div>
</div>
<!-- end #wrapHeader -->
<!-- I don't think you ment to put your NAV in your header. -->
<!-- You may have done that because "logically" it's header to you -->
<!-- but really, I don't think it's header info. I think it's nav info. -->
<div id="wrapNav">
<uc1:menu ID="menu1" runat="server" />
</div>
<div id="wrapBody">
<!-- Calling this contentwrap is too confusing, lets call it body -->
<div id="wrapLeftPane">
<!-- we can't access the left pain wiht the ID tab, we could set a class if we -->
<!-- wanted, but we still don't know what all DNN is goign to do to it. So lets wrap it instead. -->
<div id="LeftPane" runat="server">
</div>
</div>
<div id="wrapContentPane">
<div id="ContentPane" runat="server">
</div>
</div>
<div id="wrapFooterBody">

<uc2:login ID="login1" runat="server" /> <br />
<uc3:user ID="user1" runat="server" /> <br />
<uc4:copyright ID="copyright1" runat="server" />
</div>
</div>
<!-- end #wrapBody -->
</div>
<!-- end #wrapPage -->

and the CSS to make it float and flow correctly:

Body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #E6E6E6;
color:#000;
font-size: 1em; /* 20px is a HUGE font. I'm making it 1em */
background-image:url(starchag_bg_430x510.jpg);
background-repeat:no-repeat;
}

#wrapPage /* just wrapping to show the feature of margin:0 auto; */
{
width:90%;
height:auto;
margin:0 auto;
}
#wrapHeader
{
width:100%;
height:auto;
border-bottom: 1px solid #808080;
z-index: 2;
}
#wrapwrapName
{
margin: 0em 1.4em 0em 1.4em;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
z-index: 2;
font-size: 1.2em;
float:left;
height:auto;
}
#wrapAddressInfo
{
margin: 0em 1.7em 0em 1.7em;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
z-index: 2;
float:left;
height:auto;
}
#wrapNav
{
clear:both;
height:auto;

}

#wrapBody
{
width:100%;
height:auto;
margin-top:10px;

}
#wrapLeftPane
{
float:left;
width:49%;
height:auto;


}
#wrapContentPane
{
float:right;
width:49%;
height:auto;
}

#wrapFooterBody
{
clear:both; /* Clear the divs you mean to clear */
border-top: 1px solid #808080;
z-index: 2;
text-align:center;
width:100%;
height:auto;
}

Just some ideas....Look it over, and play with it.  If something I"m doing doesn't make sense let me know and I'll explain my thinking.  I"m still a newbie, but I think this is correct.

Another cool tip, since you don't completly understand CSS yet, you need to know that margins colaps, and do wierd things to your width/height if your not paying attention.(borders and padding also).

If you need a gap between two elements I used a <div class="spacer"></div>.  the thing about borders and margins, well..In firefox, they ADD to your total dimentions, in IE they do not...kinda....they are a bit confusing, but you'll get it.

Josh

Josh Martin

Thank you Josh,

as I'm running in the next problem that FF does not the same with height as IE, I will study your example and redevelop the skin. I'm sure to be on the right way with this style of skinning, but as every time I've to take it step-by-step ;-)

Best regards, Daniel