I have been trying for days and nights to use an great table-less design for my Dnn Portal. However, strange things always happens, negative margins messes things up, I change them, and guess what, just end up messing something else up.

In the Skinning WhitePaper there is explicitly stated:

Allowable content pane HTML tags include <TD>, <DIV>, <SPAN>, and <P>. At a bare minimum you must have at least one content pane and it must be appropriately named “ContentPane”. (SkinningWhitepaper page 10)


I have looked in the forum for some time now, and I have yet to find anyone that has been successfull with using table-less skin. -Should I be wrong, pls let me know.

I have a sitelayout which is Css 1, the whole thing is strict xhtml. I tried to use html 4.0 but the same.If I use the same pagelayout for static pages, it is all good. But when trying for the Dnn, bogus. I have included the xml file, I followed the steps in the skinning white paper, but nothing.

I have had the code and the css validated, both buy webbased validators, and fellow co-workers. And let me tell u', it's all good!

I have pulled out all the tweaks, workaround and boxhakcs just to get the basics to work, but it will NOT.

Is this something to do with the Core? Is there something in the core that causes <div's> to be useless! with Dnn? And if so, You are about to launch 3.0.......
would you pls consider looking at this. I really think we should have moved away from just table. Tables are fine for the "table-pros", but me I am table-con...

Let me know if there has been any sucess with using tablelless desing, or what other people have done with this.

clue(less)

http://asp.net/Forums/ShowPost.aspx?tabindex=1&PostID=715862
http://asp.net/Forums/ShowPost.aspx?tabindex=1&PostID=714408

mmm

well a good tableless design needs solid valid html and exact the html as we define however an injected module automatically has a 100% width table around it
( so that can break it )

another reason is the html is not valid, far from that a standard html page has lots of validation errors on them , I rewritten the default aspx so that it would generate xhtml transitional and managed to get just a small amount of validation errors.

This helps for some layouts but if you use layouts with bordered and negative margins you need 100% full valid html and this i not yet the case. for some other div layouts, less complicated and more with floated divs you can get better result

There is a tableless skin on snowcovered, look for xmlsmith and youw ill find it, I never tried it but the site showwn that was using it looked pretty much ok

=> MJ

I have checked out the link, but it turns out that it uses tables once you read all....
I am trying to find a way around the table, even just one table -do guess I read on.


=> nokiko

Do you have any tips n tricks for me if I would like to make Dnn generate pure xhtml?
Guess it now uses html 4.0, and I would just love to be able to use xhtml.
But being new to Dnn, I might be in deep water here.

So, if you or anyone else could help me getting my Dnn to generate pure xhtml, I am one step closer.

-I am sure there must be a way around this. Btw, I so your tableless design based on skidoo, nice!

My needs are pretty basic, just a three column with header and footer, but as you know, negative margins and so on make a good, crisp design.
I have made several of them, all working fine and validating, but when trying to put it to Dnn, it goes boom bange bang. I don't feel like starting with the tables, so pls help me.

So, if I am to use xhtm for default.aspx, things will work fine? Do you knwo if anyone made this happen?

Why is the dnn still craving for <Tables>? A bit behind whats going on?
Try to check out CssZenGarden
(be sure to view more then the first skin, or click here)
-All the different design is based on the same html code! Only the css and images are different.

Then tell me Dnn Don't need pure Css skin:-))

-With some guiding maybe I can get the default.aspx to put out xhtml, then we some fun here

-clus

You could theoretically make an all CSS skin. However, the core modules also make heavy use of tables to layout things. So there will still be <table> tags in your HTML unless you plan to convert all those as well. Third party modules...same thing.

One other thing to keep in mind. Pure CSS layouts work great if your know exactly what is going to be on the page. The problem is trying to design a skin layout that will handle ANYTHING that the author might put into them. Flexible CSS skins are a lot more difficult in a CMS than a static page. Not to say impossible, just more difficult.

You can find a few experiments I have done with CSS skins in my downloads area. These days I will upload another one... Impossible is nothing! :-)

Ok, thx MJ

Guess I have to go for this then:

I will create one outer table with border
Then left table, content table right table and header+footer....man this looks ugly allready. then I can use div to position the Tokens....not what I have planned.

But, hold on. If I make a slightly different Css tableless skin. I can have top+footer width to 100%, put left and right pane to say 200px, the content gets the rest of the width.

This wrapped in an outside Div, in which I can position? put it centered, or whatever.And this div I can put width to 100%, or 80% you see. This should work. I can not see any reason why not. And now I don't use negative margins or any tricky stuff.

The modules will still be in place. With the links module i.e it will have more then enough space in either one of the sides. Text/html module inserted into contentpane will use whatever width still left: screenwidth - 200x2px+border/margins for some browsers.
Can't really see the problem.

Ok, even so if some modules are heavily in tables, at least not the skin too.


And pls, will somebody run by me the deal with the skin.xml file. What do Ineed to make sure its all good? The whitepaper for skinning is somewhat unfinished, looks like a bit of hastywork....

Here is another example I 'm working on now: thinkofdesign.com/el

Great Work.

May I ask, Is this tableless?
And if so, sould you pls help me out?

What happens is that I get left and right pane over contentpane and not on both sides.
Can't figure out what I am doing wrong, and I am almost loosing my mind here.

I can put content in both left and right, but insted of being nicely on each side of content the apear on top. Like I have one single column.

It all looks great in static pages, but not in Dnn.

Pls hlp me

Yes, it's tableless... pure CSS :-)

It's all about floating... Be a little patient, I' ll give it for download...

mmm

yeah floating seems the way to go with dnn, the best result I had were withfloating but I have a collection of templates and addon templates based on negative margins and borders. But ill guess I have to stick with floating panels than ah well ;)

here is the skidoo skin as as a dnn skins but the line across the screen seems to be an issue with ie quirksmode yet it looks great in firefox ( the text is white but I hadnt gotten to that part yet

However when I change over to xhtml transitional this part seems to work but then solpart chokes in child portals :)

Altho I am trying to get rid of solpart complaetely, building a whole set of differnt menues some are allreadin in my css menu pack

And some im still trying out slide down based on unordered list

another one using youngpup sllideout script

another menu that can also be done with the menu pack 2 level menu

this is also nice free menu designs for any menu system that uses the same unordered list setup, Elusion free css menu designs

maybe its worth a try to follow veerle's css template creation walktrhough and use as dnn skin, se uses floats most of the time. its a 8 part tutorial going from image up to complete site with unordered list based menu system check it out. and if you have followed it all you will end up with this

Since negative margins dont seem to work very well maybe we should take a look at differnet means of creating dnn tableless based templates, or use the bare version of CSS Zen Garden and start applying all the css files there and make a nce collection of skins that do work in standard dnn.

Other sources of inspiration might be cssbeauty, css vault and my recent find style gala

this one I originally created asa new dnn site but its negative margins and the unordered lst icon menu sidemenu and onmouseover effect of the info box ( all css no javascripts harmed here :)) always seem to screw up also if working in invalid html setup

well back to work now ill be checking out yours when its one vasillis, but could be an idea to start making some investigation in which methods work and dont work in a dnn install, or make a nice batch of zen garden dnn based versions and see which one sticks. After all its just make a dnn tempalte of there base html version and them keep uploading with differnet stylesheets to see which one stays in shape.

have fun and enjoy the links

my xhtl based default.aspxstill validation errors but a lot less

<%@ Page CodeBehind="Default.aspx.vb" language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.CDefault" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


	<head id="head" runat="server">


		<title><%= Title %></title>


		<meta name="DESCRIPTION" content="<%= Description %>"/>


		<meta name="KEYWORDS" content="<%= KeyWords %>"/>


		<meta name="COPYRIGHT" content="<%= Copyright %>"/>


		<meta name="GENERATOR" content="<%= Generator %>"/>


		<meta name="RESOURCE-TYPE" content="DOCUMENT"/>


		<meta name="DISTRIBUTION" content="GLOBAL"/>


		<meta name="AUTHOR" content="DotNetNuke"/>


		<meta name="ROBOTS" content="INDEX, FOLLOW"/>


		<meta name="REVISIT-AFTER" content="1 DAYS"/>


		<meta name="RATING" content="GENERAL"/>


		<asp:placeholder id="CSS" runat="server"></asp:placeholder>


	</head>


	<body id="Body" runat="server" ONSCROLL="bodyscroll()">


		<script language="JavaScript"><!--


         function bodyscroll() {


           var F=document.forms[0];


           F.ScrollTop.value=Body.scrollTop;


         }


         //--></script>


		<noscript></noscript>


		<form id="Form" runat="server" ENCTYPE="multipart/form-data">


			<asp:Label ID="SkinError" Runat="server" CssClass="NormalRed" Visible="False"></asp:Label>


			<asp:placeholder id="SkinPlaceHolder" runat="server" />


			<input id="ScrollTop" runat="server" name="ScrollTop" TYPE="hidden">


		</form>


	</body>


</html>

body code was changed, you need this in any css to replace

BOTTOMMARGIN="0" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"


body
{
margin:0;
border:0;
padding:0;
}

Ok thx you all.

Great work nokiko!
Look forward to check out the skin Vasilis. Great Games you all hosted this august! You really showed all them newspapers and pre-games critics. Way to go.

Will start looking at the default.aspx also, maybe we can get this sorted out togheter.
If this renders nicely, guess there is just all the different modules to fix also:-)
Anyway, if we get this sorted out, we would then be able to get much faster loading pages, wnd we then have the Css putting things where it is supposed to.

Ok, this is may basic html.skin, with three columns. Pretty straight forward.
So when I put these Divs in between the body tags:

<div id="container">
<div id="top">
<div id="logo">[LOGO]</div><div id="userinfo">[USER][LOGIN]</div>
<div id="menu">[MENU]</div>
</div>
<div id="LeftPane" runat="server">
</div>
<div id="RightPane" runat="server" visible="false">
</div>
<div id="ContentPane" runat="server">
</div>
<div id="footer">
<div id="copyright">[TERMS]&nbsp;&nbsp;|&nbsp;&nbsp;[PRIVACY] </div>
</div>
</div>

Any thoughts on how I should stack the Divs? Some seems to think it is importent that "contentpane" shows up first, regarding search engines opt and so.
I guess I could switch the structure, setting the contentpane before the left pane, (cause I will be using a leftside+top friendly url navigation as well) then rightcontent.
But will the structure of the page actually have any saying for SE opt? Or is this mostly for people with slow conection, so they can see the content before menues and ads?

=> Vasilis: I Do not need to care about the xml? I can make html.skin without xml.skin with html like this?


Clue(not as "less" as before)

The location of ContentPane is not as important as making sure it exists. That becomes the default pane for content if a specified Pane location can not be found.

That being said, I would place it toward the top as it will give better Search Engine indexing as some only read so far down the HTML or give more weight to content toward the top of the page.

@clue

there is a lot of talk about source ordering of the css, bu I hardly ever use it only If I have like super purify clients that realy want it because it harder to style.

ostly its for people that have realu old / odd browsers or screenreaders so that they dont see the menus at first but the real content. But if you dont need acces to odd browsers screenreader ( for the visually impaired ) then I would say DONT ;)

leftpane ( no position styling )
contentpane ( display inline )
rightpane ( float right ) - note: if you want to use float you need to set it to a fixed with pc, em or %