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, ...trying to do straight css, but divs wontrying to do straight css, but divs won't "float", columns stack
Previous
 
Next
New Post
1/23/2008 6:28 PM
 

It seems any fluid css design I grab ( I like the Dynamic Drive CSS Liquid Layout #2.2- (Fluid-Fixed) ) looks great as HTML, but when I literally take two minutes to add one or two skinning objects (even just LOGO and COPYRIGHT), change it over to an .ASCX and upload it, the columns stack instead of appear left-to-right.

I've seen the debates in this forum over CSS vs tables, but man, I'm going nuts here.  Here's the complete skin and CSS:

<%

@ Control Language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>

<

div id="maincontainer">

 

<div id="topsection">

 

<div class="innertube">

 

<dnn:LOGO runat="server" id="dnnLOGO" />

 

</div>

 

</div>

 

<div id="ContentPane">

 

<div id="contentcolumn" runat="server">

 

<div class="innertube">

 

<b>Content Column: <em>Fluid</em></b>

 

</div>

 

</div>

 

 

</div>

 

<div id="rightcolumn" runat="server">

 

<div class="innertube">

 

<b>Right Column: <em>200px</em></b>

 

<dnn:USER runat="server" id="dnnUSER" /><br />

 

<dnn:LOGIN runat="server" id="dnnLOGIN" />

 

</div>

 

</div>

 

<div id="footer">

 

<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" cssclass="udicopyright" />

 

&nbsp;&nbsp;

 

<dnn:TERMS runat="server" id="dnnTERMS" cssclass="udilinkfooter" />

 

&nbsp;&nbsp;

 

<dnn:PRIVACY runat="server" id="dnnPRIVACY" cssclass="udilinkfooter" />

 

</

</div>div>

 

... and the CSS:

 

body

{

margin

:0;

padding

:0;

line-height

}

: 1.5em;

b

{font-size: 110%;}

em

 

{color: red;}

#topsection

{

background

: #EAEAEA;

height

: 90px; /*Height of top section*/

}

#topsection

h1{

margin

: 0;

padding-top

}

: 15px;

#ContentPane

{

float

: left;

width

}

: 100%;

#contentcolumn

{

margin-right

: 200px; /*Set right margin to RightColumnWidth*/

}

#rightcolumn

{

float

: left;

width

: 200px; /*Width of right column in pixels*/

margin-left

: -200px; /*Set left margin to -(RightColumnWidth) */

background

}

: #FDE95E;

#footer

{

clear

: left;

width

: 100%;

background

: black;

color

: #FFF;

text-align

: center;

padding

}

: 4px 0;

#footer

a{

color

}

: #FFFF80;

.innertube

{

margin

: 10px; /*Margins for inner DIV inside each column (to provide padding)*/

margin-top

}

 

: 0;

<%

<%

<%

<%

<%

<%

<%

<%

<%

<%

<%

 
New Post
1/23/2008 8:25 PM
 

 

Adding runat="server" to your <div id="ContentPane"> tag may help.  As I understand it, each skin needs a ContentPane tag, and each pane needs runat="server" to be visible as a pane to be able to drop a module into.  It almost looks like you're using <div id="contentcolumn" runat="server"> in replace of the necessary DNN-specific <div id="ContentPane" runat="server"> .

I hope this helps.

 


Cameron McCarter

 
New Post
1/23/2008 8:26 PM
 

Divs will work great for anything...very flexible.  Your problem isn't the nature of a div, it's the nature of your code.

 

Your code is full of typos/bugs

you are closing elements in the middle of the coding of the element

it should be

#ELEMENTNAME   /* comments enclosed in the  symbols that turn them green */

{  /* Open bracket to hold the properties you are going to apply to the element name directly above it */

float:left    /* property is float value is left always seperated with a : */

} /* this is the end of the properties for the element we just defined. */

classes begin with a period but same thing.

I'm seeing all over in your CSS this:

#elementname

{

color:red;

width:

}

100%

Which says what about the 100%?  nothign..it's just hanging out there..who knows what other unclosed element property is going to pick it up.

Think of it this way

Blue text should ALWAYS be to the right of a : and the : should be to the right of red text(the property..property:value).

"{" and ":" should always be black...you have lots of red "}"

fix the code and repost if you're still having trouble.

Was the <% at the end of your stylesheet something in your stylesheet or an accident when you posted?  if so..what do those do?

 

I've been struggling alot with learning CSS, but I can see that it will pay off huge in the end.

Let me know if that helps at all.

Josh

 

 

 

  


Josh Martin

 
New Post
1/23/2008 8:35 PM
 

 

 

>

One other point I forgot to make that often screws up XHTML is...You need to specify a doc type.

 

I"m not sure if declairing it in your .ASPX file directly works, but I do know including a file in your package named:

skinname.doctype.xml will work....

And the contents of the doctype file should be:

 

<XML>
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">]]>
</XML>

This will cause your code to be displayed the more reliably in more browsers.

you can try and include the <!DOCTYPE  blahblahblahblah> right in your ASCX file but I"m not sure if thats valid or not...I'm still a noob.

 

 


Josh Martin

 
New Post
1/24/2008 2:09 AM
 

I see a few errors

first you need to have one contentpane for dnn to work, here is how I usually style it.

Keep contentpane ids for dnn alone ( they will be rewritten to something like  id="dnn_contentpane" so your css cannot find them anymore

If I style a skin I usualy use div id="contentpanel" for my css styling and if all that is working ok and looks good in browsers I add the dnn contentpanes

not that because of wrongfull html injection NEVER try and stylle the contentpane div using a class as the main styleing element especially with positioning floating etc. This gets injected wrong in the html page screwing up your layout

like this  < div id="contentpane" >< div id="ContentPane" runat="server" > < / div >< / div >

This was you can style the panels you like and later inject the dnn content

here is a very complex dnn css layout http://www.itbuzz.nl

 

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...trying to do straight css, but divs wontrying to do straight css, but divs won't "float", columns stack


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