Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS Help...CSS Help...
Previous
 
Next
New Post
3/28/2009 10:21 PM
 

I'm having a serious issue getting my skin to work using css for the layout.  I'm only using two panes (ContentPane and RightPane) that will be displayed side by side. The ContentPane will be about 66% of my #contentWrapper, and the RightPane the remaining 34%.  Right now I have the width for both panes set to static sizes using px.  The total width of the contentWrapper area is 800px and right now between the ContentPane and the RightPane i'm only using 794px of that area (because of the problems I've been having).

Unfortunately, for some reason I can't get the RightPane to line up next to the ContentPane.  Currently the ContentPane is at right: 0 and top: 0 of the contentWrapper and the RightPane's top left corner is touching the ContentPane's bottom right corner.  I've redone my coding multiple times and keep getting stuck in the same spot that i'm in right now.  I was using tables for my layout but would prefer to use css for the layout.  My code works if rendered outside of DNN so I know it isn't in the code but in something that DNN is (or isn't) doing.  I don't have the page live online anywhere for you to see, but i'm posting my HTML and CSS code for the skin.  Please help!!!

HTML

 <div id="wrapper">
      <div id="headWrapper">
            <div id="header">
                  [Logo]
            </div><!--header-->
            <div id=navContainer>
                  [Nav]
            </div><!--navContainer-->
            <div id=userContainer>
            [User]&nbsp;|&nbsp;[Login]
            </div><!--userContainer-->
      </div><!--headWrapper-->
      <div id="contentWrapper">
            <div id="ContentPane" runat="server">
            </div><!--ContentPane-->
            <div id="RightPane" runat="server">
            </div><!--RightPane-->
      </div><!--contentWrapper-->
      <div id="footer">
            <div id="links">
                  <p>[Links]</p>
            </div><!--links-->
            <div id="copyright">
                  <p>[Copyright]</p>
             </div><!--copyright-->
            <div id="terms">
                  <p>[Terms]&nbsp;|&nbsp;[Privacy]</p>
            </div><!--terms-->
      </div><!--footer-->
</div><!--wrapper--

CSS

/* body styles
--------------------------*/
body
{
      padding: 0;

      border: 0;
      margin: 0;
      background-image: url();
}

/* Wrapper Styles
--------------------------*/

#wrapper
{
      width: 800px;
      margin: 0 auto;
      border: 0;
      padding: 0;
      background-color: #ffffff;
}

#wrapper p
{
      padding: 0;
      border: 0;
      margin: 0;
}
/* Header Styles
---------------------------*/

#headWrapper
{
      height: 185px;
      width: 100%;
      padding: 0 0 0 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

#header
{
      height: 150px;
      width: 100%;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

#nav
{
      clear: both;
      height: 35px;
      width: 100%;
      padding: 0 0 0 0;
      margin: 0 0 0 0;
      border: 0;
      background-color: #6699cc;
      vertical-align: middle;
}

#navContainer
{
      width: 575px;
      height: 22px;
      float:left;
      clear:both;
      margin: 0;
      padding: 0;
      border: 0;
      background-color: #6699cc;
}

#userContainer
{
      height: 22px;
      width: 220px;
      float: right;
      margin: 0;
      padding: 0 5px 0 0;
      border: 0;
      background-color: #6699cc;
      text-align: right;

}

/* Content Area Styles
----------------------------*/

#contentWrapper
{
      clear: both;
       padding: 0;
       margin: 0;
       width: 100%;
       background-color: #ffffff;
       height: 100%;
}

#ContentPane
{
      float: left;
      clear: both;
      height: auto;
      width: 570px;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

#dnn_ContentPane
{
      float: left;
      clear: both;
      height: auto;
      width: 570px;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

#RightPane
{
      float: right;
      clear: both;
      height: auto;
      width: 224px;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

#dnn_RightPane
{
      float: right;
      clear: both;
      height: auto;
      width: 224px;
      padding: 0;
      margin: 0;
      border: 0;
      background-color: Transparent;
}

/* Footer Style
------------------------*/

#footer
{
       position: absolute;
      clear: both;
      height: 33px;
      width: 800px;
      padding: 0;
     margin: 0;
      border: 0;
      background-color: #6699cc;
}

#links
{
margin: auto;
padding: 0;
width: 100%;
height: 11px;
clear: both;
background-color: Transparent;
text-align: center;
}

#copyright
{
clear: both;
margin: 0 auto;
padding: 0;
width: 100%;
height: 11px;
background-color: Transparent;
text-align: center;
}

#terms
{
clear: both;
margin: 0 auto;
padding: 0;
width: 100%;
height: 11px;
background-color: Transparent;
text-align: center;
}

#footer p
{
color: #ffff33;
font-size: 9px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration: none;
padding: 0;
border: 0;
margin: 0;
}

#footer a:link, #footer a:visited
{
color: #003399;
text-decoration: none;
padding: 0;
margin: 0;
border: 0;
}

#footer a:hover
{
color: #003399;
text-decoration: underline;
padding: 0;
margin: 0;
border: 0;
}

/* Menu classes
-------------------------*/

.Main_DNNMenu_ContainerSub
{
background-color: #6699cc;
cursor: pointer;
cursor: hand;
padding: 1px 1px 1px 1px;
vertical-align: middle;
}

.Main_DNNMenu_NodeRoot
{
cursor: pointer;
cursor: hand;
color: #ffff33;
font-size: 17px;
font-weight: bold;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
margin: 0;
padding: 0px 5px 0px 5px;
}

.Main_DNNMenu_Node td
{
cursor: pointer;
cursor: hand;
color: #ffff33;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-family: Tahoma, Arial, Helvetica;
background-color: Transparent;
white-space: nowrap;
padding: 1px 3px 3px 1px;
}

.Main_DNNMenu_NodeHover
{
background-color: #ff9900;
}

.Main_DNNMenu_NodeHover td
{
background-color: #ff9900;
}

 

 

 

 
New Post
3/29/2009 7:10 AM
 

You should remove the clear:both for the CP and the RP, not sure why it works as HTML but IMO it shouldn't, might be the doctype of the html document?

(transitional vs XHTML?)

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...CSS Help...CSS Help...


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out