Home/ASP.NET Forums/Retired Forums/DotNetNuke (RETIRED)/Tableless Skin Design: is it possible?

Tableless Skin Design: is it possible? RSS

70 replies

Last post Jan 07, 2006 05:35 PM by Kabelsalat

Armand Datema
  • DougV

    DougV

    Member

    10 Points

    604 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 09:47 AM|DougV|LINK

    nokiko

    ok cant resist here goes :)

    Okay I can't resist either.  Here is proof why css is better - view it for yourself - follow these instructions:

    1. Find yourself a computer with a slow modem.  If you don't have this you will probably still notice a slight difference even if using DSL.
    2. Browse to my site Powerhouse Data.  Notice the speed of the time elapsing during your very first visit.
    3. Browse to another site I did about a year ago.  I can critize this site because I am the one who constructed it (pro-bono work).  Again, notice the speed of the time elapsing during your very first visit.
    4. Wait a couple hours, come back and visit both sites again.  On your second visit be sure to browse from page to page within each Web site.

    Over a slow modem, the speed of Powerhouse is about as fast  as DSL.  Powerhouse is also hosted by WebHost4Life.  If this doesn't convince the readers of this thread that css is better - I guess I really can't say anything else.

    -doug,
  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:10 AM|Ed_DeGagne|LINK

    Well, with all the debate going on over this, I decided to take an old skin I had and convert it over to a Css div skin.

    Originally, it was based on the DNN Blue default skin, which I modified for my Demon site. So I took that last night and ran with it for about 4 hours (stopped at about 2am).  [:D]

    I agree, the page size reduced in size by about 50% and it sure did clean up the code quite a bit as well. I mean, it is pretty lean, I was suprised.

    I did this development while testing it in FireFox. Everything looked good, not a single table in the skin.

    ....then I viewed it in IE...

    I must have done something wrong somewhere. :)

    NOTE: Actually, I started getting tired, so there is only one small table still there for the breadcrumb row, but other than that, no tables. I'll remove that one today.
    Take a gander and tell me what you think I did wrong here.

    Demon Chronicles

    I will get off the negative bandwagon, because I a warming up to the idea of this type of design after spending some quality time with it last night. I am just concerned about it being the same display across all browsers.

  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:23 AM|mathisjay|LINK

    Doug-

    I am glad you jumped in here.  Your CSS tutorial is absolutey fantastic and I encourage everyone who is interested in the subject to read it and follow along.  Very nice resource.

     

    Ed-

    Welcome to the dark side.  Make no mistake about it, there will plenty of times you are gong to get frustrated (mostly with IE) and will want to throw it all away and go back <tables>.   I have done it many many times in the past already.  But once you learn the little nuances, I am sure you will be able to build semantic HTML skins faster than <table> skins. 

    I didn't get a chance to look at your skin yet, but I'll try to take a look and see if I notice anything.

     

  • nokiko

    nokiko

    Member

    10 Points

    2134 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:23 AM|nokiko|LINK

    well problem is that ie renders too much in quirks mode ( so you just have to guess what is does or desnt do if the html is not standard. If you look at css.schwingnuke.com  I have bare css ksins there for any kind of design starter as well as a modified default.aspx that will render css designsmuch better even in IE.

    Problem is that IE is too forgiving as where the good standards browsers are not. Firefox shows it to you as it should be shown while internet explorer, because its too forgiving on the use of non valid html redners it his own way

     

    Armand Datema
  • DougV

    DougV

    Member

    10 Points

    604 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:23 AM|DougV|LINK

    Ed_DeGagne

    Well, with all the debate going on over this, I decided to take an old skin I had and convert it over to a Css div skin.

    Originally, it was based on the DNN Blue default skin, which I modified for my Demon site. So I took that last night and ran with it for about 4 hours (stopped at about 2am).  [:D]

    I agree, the page size reduced in size by about 50% and it sure did clean up the code quite a bit as well. I mean, it is pretty lean, I was suprised.

    I did this development while testing it in FireFox. Everything looked good, not a single table in the skin.

    ....then I viewed it in IE...

    I must have done something wrong somewhere. :)

    NOTE: Actually, I started getting tired, so there is only one small table still there for the breadcrumb row, but other than that, no tables. I'll remove that one today.
    Take a gander and tell me what you think I did wrong here.

    Demon Chronicles

    I will get off the negative bandwagon, because I a warming up to the idea of this type of design after spending some quality time with it last night. I am just concerned about it being the same display across all browsers.



    Interesting that you should mention DNN Blue.

    Here is a page I've written about that.
    -doug,
  • grasshopper

    grasshopper

    None

    0 Points

    120 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:25 AM|grasshopper|LINK

    I had make a comment too...

    I neither for nor against skins having a table, just not nested tables.  And DNN should at least start removing extra spaces and tables that many modules put out.  If one wants to use a "table" then one could create a page or container skin for it.

    Stuff like SolPart's "forcefullmenu" option should not use spaces to indent page structure, there should be a CSS defining how much padding or margin or font-size or whatever.  I know that sometimes tables may be necessary for some users or web sites.  But it should be up to the web designer to add tables, not DotNetNuke. 

    I think an important goal for 3.2.2 and 4.0.2 would be go through the existing modules and default skins to eliminate any un-necessary format coding (extra tables, td's, divs, etc.) and add a unique CSS class to the appropriate items.  That would help reduce the sizeof the site as well as add additional control over items within the site using CSS.

    Thanks, Rick
    (Always have a backup backup plan.)
  • nokiko

    nokiko

    Member

    10 Points

    2134 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 10:28 AM|nokiko|LINK

    regarding valid html

    asp.net 1.1 doenst render completely valid html so you have to get it to make it as little validation errors as possible.

    there are ways of doing this with http modules and such , and i read in teleriks blog that the code they use to render there valid xhtml website will be released soon as weel So cant wait to see that and possibly implement in dnn 1.1. No 2.0 yet in my business projects that has to wait a while :)

     

    Armand Datema
  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 11:12 AM|mathisjay|LINK

    Out of curiosity.  Has anyone done anything with DOCTYPE switching?  As we all know, IE by default runs in quirks mode which lets it very lax in applying W3C standards.  However, it is possible (I think) to force IE6 to follow standards by specifying standards mode using the DOCTYPE directive.

    If true, this would also go along way to helping to solve the IE vs FireFox problems.

  • DougV

    DougV

    Member

    10 Points

    604 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 12:18 PM|DougV|LINK

    "Out of curiosity.  Has anyone done anything with DOCTYPE switching?"

    If I remember correctly there were some problems someone posted that SolPartMenu would stop functioning correctly if you did so.
    -doug,
  • nokiko

    nokiko

    Member

    10 Points

    2134 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 12:23 PM|nokiko|LINK

    yeah solpart breaks up

    I have a deiffernt doctype in my modiefied default.aspx ( xhmtl transitional) but solpart doesnt like that. BUt if you use css skins you shouldnt use solpart anyway but a good semantic css menu

     

    Armand Datema
  • portvista

    portvista

    None

    0 Points

    241 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 12:36 PM|portvista|LINK

    DougV, I am impressed with your very lean DNN site. It loads very quickly. But you are comparing it to a site that uses a LOT of images, and extra table cells just to place those images. The lean site doesn't have any of these graphics. Sorry, still not buying the DIV being significantly more effecient argument.

    -PortVista-

    www.PortVista.com
  • dstgroup

    dstgroup

    None

    0 Points

    78 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 12:55 PM|dstgroup|LINK

    I've gotta get my two cents in too! :)

    I'm all for css layout, BUT as others have stated the realties of limitations in css and current browsers doesn't always make this possible. Now before you flame me, let me say that if I had it my way, I would prefer to use tableless layout.

    First there are some layouts that are not possible with css and current browsers. Sure you can use hacks, but doing so makes the page non-compliant anyway. (yes, this is debatable). In that case, I think a table is a better "hack". It certainly won't break when a new browser version is out.

    Second, the w3c is NOT in touch with reality. Everyone doing tableless designs knows about hacks. Hacks are usually done to target css at a particular browser. If almost everyone is doing hacks, why hasn't the w3c created a standard to target css at a particular browser and version? I'll admit I haven't really done much reading of newer specs themselves, so if it's in css 3 or something I wouldn't know. At any rate, they should have thought of this in css 1 as it is so bloody obvious.

    Third, the browsers all have their quirks. Both IE AND Mozilla have their bugs and quirks. So “standards compliant” does not necessarily look the same in all browsers. This is a huge hurtle as I spend most of my time fixing this kind of stuff, and not on the design itself. MS needs a hard slap to the head for not fixing rendering bugs in IE for so long, but there are a few in Mozilla that have been there for ages as well.

    Forth, thank the lord that FireFox made MS wet their pants and decide to update IE. Once most end users have browsers that support more standards available to them, most of the prior points will hopefully disappear. As it stands though, this forces designers to use tables in some cases.

    Fifth, it could be argued tables sometimes are in fact being used for exactly what they "were intended for." - structured data. If a table is used to put the header of the page at the top, and the navigation bar on the side for example, is the table laying out the page, or is it just putting the relevant data in it's proper place? Data doesn't have to be in a text format, and sometimes it's not even possible. Just because a table has graphics in it, does not necessarily mean it isn't structured data.

    I think all of us could go on debating the pros and cons of each side, and both have valid arguments. Reality however, forces me to use the best tool for the job. If I find myself having to use hacks to get a site to render properly in 90% of the browsers out there, I'm going to use tables. If not, I'll use css.

    Geoff Van Brunt
    DST Consulting Engineers
  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 01:24 PM|Ed_DeGagne|LINK

    Well, after spending 4 hours with it last night, I AM buying into it that it's a heck of a lot more efficient.

    The problem I have with it is the way different browsers, mainly IE, display rendered content through Css div driven layout design.

    It just seems that it's not quite there yet, and with 90% of my visitors using IE, I have to design what currently works for that browser.

    I went over to Css.Schwing and tried out one of Nokiko's tableless layout skins, even there's don't render correctly in IE.

    The left and right columns work ok, but the content column gets pushed below them, plus it renders the min/max module functionality broken.

    [:(]

  • portvista

    portvista

    None

    0 Points

    241 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 01:38 PM|portvista|LINK

    Ed, don't give up. Browsers do renders some of the elements differently, which is a no go for me. But, many designers are ok with this and will alter their layout to account for these issues, or even begin their design in Dreamweaver, as apposed to graphically planing your layout in Photoshop. You can always throw in a few tables -- usually a few tables to frame your layout, then your DIV's could be used inside the cells. DIV's have a problem with full 100% width and height layouts -- for one I don't think it's possible entirely with DIV's, and you'll also find content shifting.
    -PortVista-

    www.PortVista.com
  • grasshopper

    grasshopper

    None

    0 Points

    120 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 02:56 PM|grasshopper|LINK

    Well I made a new DNN 4.0 test site and modified the DOCTYPE to:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    It seamed to work!  Since I'm the one who had my solpart menu go weird on me, I must have something wrong with my skin, or css, or both.

    Thanks, Rick
    (Always have a backup backup plan.)
  • DougV

    DougV

    Member

    10 Points

    604 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 03:09 PM|DougV|LINK

    portvista

    DougV, I am impressed with your very lean DNN site. It loads very quickly. But you are comparing it to a site that uses a LOT of images, and extra table cells just to place those images. The lean site doesn't have any of these graphics. Sorry, still not buying the DIV being significantly more effecient argument.

    If I did the slower site over again using css & background images it would run as fast as the Powerhouse site on subsequent browsing from page to page.  You are correct the slow site uses a LOT of images, BUT the Powerhouse site also uses images - just not as extensive.

    Ed

    The problem I have with it is the way different browsers, mainly IE, display rendered content through Css div driven layout design.

    That is key to making things work.  Find code that works for a <div> in both IE & Firefox.  For example, this piece from a skin I have works for both using ruler01.gif.

    div#ruler01
    {position:relative;
     font-size: 4px;
     margin: 4px auto 0px 16px;
     width: 672px;
     font-family: Monospace;
     height: 8px;
     /* background-color: #ff6699;  */
     background-image: url(ruler01.gif);
     background-repeat: repeat-x;
    }

    All I need to do is remember how it works and duplicate it throughout other work I continue to do.

    portvista

    DIV's have a problem with full 100% width and height layouts -- for one I don't think it's possible entirely with DIV's, and you'll also find content shifting.

    Anything that can be done with tables can be done with DIV's.

    -doug,
  • portvista

    portvista

    None

    0 Points

    241 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 05:04 PM|portvista|LINK

    > Anything that can be done with tables can be done with DIV's.

    DougV, that's simply NOT true. For example, 100% to window height cannot be done with any reliability using DIV. Do a search and you'll find a lot of people just saying "don't even bother trying it." I do like your design and methodology though, breaking away from a lot of the standard DNN sites out there that just seem to be a variation of the core skins.

    Reference
    http://www.quirksmode.org/css/100percheight.html
    -PortVista-

    www.PortVista.com
  • robaxx

    robaxx

    None

    0 Points

    283 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 05:58 PM|robaxx|LINK

    I'm still reading this thread and the outcome only becomes clearer as it develops

    • Points made in favour of CSS right now are technical
    • Points made against using CSS right now are practical

    That means: CSS layout is a worthwhile, albeit at this point in time unnecessary, layout method.

    On a side note.. I do seriously wonder what sort of content people have on their pages when they save 50% bandwidth simply by switching layout tags.... air?

    Rob

  • nokiko

    nokiko

    Member

    10 Points

    2134 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 16, 2005 06:16 PM|nokiko|LINK

    mm I use the quirksmode method a lot, and as for the mac internet explorer rendering buggy I can live with that ( just drop in som unobtrusve javascript to set the height only on max ie simple as that ) since i hardly ever see this popping up on the sites I make.

    Well regarding table/div. tables are one of the most render intensive tags around. Nest a few ones and the browser takes a lot more time to render exponentially. If I see how I did designs a year ago ( or how my creative director delivers them to me directly imported from adobe photshop lots and lots of tables ) with soemtimes up to 5 nested tables and thsi over and over again it realy slows down making it biggger nd bigger to load.

    http://www.schwingnuke.com/dhd

    Altho its not dnn it shows what I mean by semantic html. all is layed out in clean div tags. both top and sidemenu are unordered lists with css ( the menubuttons are one big image each where I switch the background position onmouseover and active ) even the onmouseove text in the info window is done with css,no javascript was harmed here.

    Can I do this in Dnn, I think so but this layout needs valid html code, one validation error and it will scrw up the layout. And I cannot make 100% valid html code with asp.net 1.1 and dnn without too much of a core mod so some designs I just dont try in DNN untill I can actually make 100% valid html.But as there are css hacks for the difference browsers I managed to find soem dnn css hacks to make invalid html render good in dnn alone :)

     

     

     

     

     

    Armand Datema
  • slope

    slope

    None

    0 Points

    463 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 17, 2005 09:43 AM|slope|LINK

    DougV

    nokiko

    ok cant resist here goes :)

    Okay I can't resist either.  Here is proof why css is better - view it for yourself - follow these instructions:

    1. Find yourself a computer with a slow modem.  If you don't have this you will probably still notice a slight difference even if using DSL.
    2. Browse to my site Powerhouse Data.  Notice the speed of the time elapsing during your very first visit.
    3. Browse to another site I did about a year ago.  I can critize this site because I am the one who constructed it (pro-bono work).  Again, notice the speed of the time elapsing during your very first visit.
    4. Wait a couple hours, come back and visit both sites again.  On your second visit be sure to browse from page to page within each Web site.

    Over a slow modem, the speed of Powerhouse is about as fast  as DSL.  Powerhouse is also hosted by WebHost4Life.  If this doesn't convince the readers of this thread that css is better - I guess I really can't say anything else.

    Lightning fast with a slooow gsm connection (rural southern part of europe), in my village we have no GPRS, Edge or 3G net for mobile connection. So I browsed PowerhouseData with gsm data access.Speed less then 50 Kbps. Yet still the site was lightning fast. You proved your point, and mine too;-)

    Will dig up som great Css links when I get back to the city on sunday, so the most sceptics people can read up on css. Like I allready said just don't take my (our) word for it, get your hands dirty and test it yourself.

    Like nokiko said, at this point we also need to make things "future"proof.

    -Follow your dreams!
  • slope

    slope

    None

    0 Points

    463 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 17, 2005 10:08 AM|slope|LINK

    Ed_DeGagne

    Well, after spending 4 hours with it last night, I AM buying into it that it's a heck of a lot more efficient.

    The problem I have with it is the way different browsers, mainly IE, display rendered content through Css div driven layout design.

    It just seems that it's not quite there yet, and with 90% of my visitors using IE, I have to design what currently works for that browser.

    I went over to Css.Schwing and tried out one of Nokiko's tableless layout skins, even there's don't render correctly in IE.

    The left and right columns work ok, but the content column gets pushed below them, plus it renders the min/max module functionality broken.

    [:(]

     

    Well do not give up. After digging around and poking at other good css design you will soon find workarounds. Ok, making a css desing can be taunting in the begining. But after you learn what will work and what will not you will see that making lean and mean css design that reanders good is not that hard. Yes it should not be like that, IE and other browser should stick to standards. But unntil they do we need to use a few workarounds.

    One goal of Asp.net 2.0 was vallid xhtml output. I have not had the time to dig into 2.0 yet, but if MS actually made this, things will only get better and the hard work will be only a blant memory.

    Say nokiko, have you had the chance to play with asp.net 2.0 or Dnn 4.0? Do you know if they produce valid xhtml output yet?

    -Follow your dreams!
  • eureka

    eureka

    Member

    1 Points

    242 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 17, 2005 10:11 AM|eureka|LINK

    codewarrior415

    I tried creating skin design for the first time. The problem I found with Dotnetnuke 3.2 is that you were force to use tables to structure content. I tried to create a design that used only div tags and with the correct Id calling for the control and it wouldn't work.

    I read some were that tables and other tags like font, and br is obsolete or becoming obsolete.

    Does anyone have any ideas or any links for tableless skins for dotnetnuke? Is that even possible to structure you content with out these legacy HTML tags.

    Hello you might try this link, it has a table free DNN skin for download:

    http://www.thinkofdesign.com/Downloads/tabid/54/Default.aspx

     

     

    Regards

    Lynn

  • codewarrior415

    codewarrior4...

    None

    0 Points

    25 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 17, 2005 12:47 PM|codewarrior415|LINK

    portvista

    > Anything that can be done with tables can be done with DIV's.

    DougV, that's simply NOT true. For example, 100% to window height cannot be done with any reliability using DIV.

    Reference
    http://www.quirksmode.org/css/100percheight.html

    Is this true for width also?

    "It's in the computer?"(zoolander)
    Kwazimoto.com
  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 17, 2005 01:10 PM|mathisjay|LINK

    <div> by default is 100% width
  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Dec 17, 2005 01:12 PM|mathisjay|LINK

    robaxx

    I'm still reading this thread and the outcome only becomes clearer as it develops

    • Points made in favour of CSS right now are technical
    • Points made against using CSS right now are practical

    That means: CSS layout is a worthwhile, albeit at this point in time unnecessary, layout method.

    On a side note.. I do seriously wonder what sort of content people have on their pages when they save 50% bandwidth simply by switching layout tags.... air?

    Rob

    Less code, faster downloads, standards compliance, device acessibility...all sound pretty practical to me.

  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 17, 2005 08:46 PM|Ed_DeGagne|LINK

    I keep hearing a common theme here, work arounds, javascript, etc.

    All I know is that tables work NOW, and all my skins have been able to render EXACTLY the same across browsers and platforms.

    Until we can get to a point that we can write it once, easily, consistently, etc., then I will hold off on being a true convert.

    I am interested, I can see the benefits (although I think there a bit exacerbated), but I wait awhile before switching 100%.

    I can definitley see myself using a combination of both soon.

  • nbc

    nbc

    None

    0 Points

    1464 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 17, 2005 11:59 PM|nbc|LINK

    Ed - thats about the right approach for real world sites.

    I have 'pure' css layouts up and running (using Armands menu) but they are not terribly practical for clients because you need to control what modules go where to maintain the layout fully. An easy compromise for production sites is to use div/css layouts for the overall layout and a single table to hold the content panes.

    Results? I am reworking an e-commerce site at the moment which uses literally dozens of tables to display listings (ie a nested table layout for each item that then repeats). With only 20K of images each page at this site produces 180K + of HTML. The new layout has cut this down to 60K and I am confident I can reduce this further.

    The benefits are obvious even to those users with fast connections.

    Regards, Nick

    Free Css Skins! | nuke.nickclements.net 
  • slope

    slope

    None

    0 Points

    463 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 04:43 AM|slope|LINK

    Ok promised links to Css resources here it goes:

    http://www.westciv.com/style_master/academy/css_tutorial/introduction/key_ideas.html

    http://www.w3schools.com/css/css_intro.asp

    http://www.quirksmode.org/css/csshacks.html

    http://www.irt.org/articles/js135/

    http://www.sessions.edu/newsletter/Schmitt_C/interview.html

    http://www.webcredible.co.uk/benefits/css-design.shtml

     

    Ok there a tons of other good Css tutorials and Css related sites. Be sure to check out http://www.csszengarden.com/ or http://www.mezzoblue.com/zengarden/resources/ for great ideas and how to's.

    My bookmarks are in a mess, but if anyones need other links do a search in the forum for css links provided by nokiko, cause I remember he made a great css list a while ago.

    Enjoy

    -Follow your dreams!
  • DougV

    DougV

    Member

    10 Points

    604 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 10:05 AM|DougV|LINK

    Wow! Come Monday morning and look at all the views to this thread! 

    So I say to all curious about the debate between CSS vs. Tables: there are no hard and fast rules.

    I firmly believe if you ever find yourself doing some serious Web designing, you better not second guess the importance of CSS.  Sure, tables are important.  So are my old vinyl LPs.  Too bad I can’t play them anymore.  Rest assured you can skin anything with all CSS.

    While I enjoy matching wits with many familiar friends here on the forums, the magnitude of interest in this subject does cause me a little concern.  I fear there may be some readers of this thread being lead astray by all this friendly banter.  So let me take the time to try to clarify what I feel is important for all to know about this subject.

    The subject:  Tables vs. CSS

    Your web site creations depend entirely on you and your target audience.  This means there is no correct answer that applies to absolutely everyone!  This is not an “either or” argument, rather it is subject which requires you to decide where on the “wide spectrum” you fall.

    I’ll try to explain myself by using these following example situations.

    1. If you have any small sites with low traffic it may not be worth your time to go through all the extra effort for CSS because tables are easy.  In this situation browser compatibility (IMHO) not even important.  For example, I have a site with photos from Eastern Australia for my friends and family to view.  IE only, use tables – quick and easy – it doesn’t matter and who cares (I didn’t and still don’t).
    2. Going up the scale of importance maybe you would be Web designer of a site for a small club, organization, or even a very small Mom & Pop business.  CSS may not be that important (yet).
    3. Move up the scale to more prominent small businesses and the smaller of the nationally/internationally known organizations.  It becomes more important to consider going all CSS, but perhaps not even yet.  An example of what I am talking about here would be a car dealership in a major city.  What may start to become important is your search engine prominence.  This is a complicated subject but I will concede that CSS may not be needed.  Personally, if it was me and I was getting paid – this is where I would draw the line and I would opt for an all CSS layout.
    4. Go bigger yet again.  Say, for example, a bank having more than three or four dozen branches.  How professional are you going to look if you apply for a job here and tell your interviewer that CSS is not important – just use tables? – you will lose the job prospect.    You are now venturing into the territory where you will not be decreeing how things are to be done, anyhow.  You'll be working with a team and many a corporation will have the edict to go CSS.  But hey, you may not be using DotNetNuke either.
    5. Move on up to the Fortune 500 companies.  I don’t know, you tell me.  Are they wrapping things up table inside table?  No I haven’t researched this.  I guess if you are big enough you can do whatever the heck you want.


    What concerns me most is the fact that there may be a few “budding young developers” reading this thread and hence “getting misinformation”.  CSS is important to their careers.  Proclaiming, “you can just use tables and forget about CSS” is NOT helping them any.  Please don’t cause readers to make a decision that may be wrong for them – even if it is right for you.

    -doug,
  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 10:58 AM|Ed_DeGagne|LINK

    http://www.thinkofdesign.com/Downloads/tabid/54/Default.aspx

    Thats about the best example you can get of DNN Css/DIV only skin and container design. The Boxed4Css skin/container set is an invaluable example of how it CAN work in DNN and across all browsers.

    I learned a ton off of this skin. It is a must if you are wanting to move to an all Css DNN skin/container design.
  • ech01

    ech01

    None

    0 Points

    288 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 12:39 PM|ech01|LINK

    Ed_DeGagne

    http://www.thinkofdesign.com/Downloads/tabid/54/Default.aspx

    Thats about the best example you can get of DNN Css/DIV only skin and container design. The Boxed4Css skin/container set is an invaluable example of how it CAN work in DNN and across all browsers.

    I learned a ton off of this skin. It is a must if you are wanting to move to an all Css DNN skin/container design.

    I agree with Ed. This is a great design to learn from, and I love the menu. I'm a CSS novice, infact I'm trying to ease my way into it by still using tables, but having all the properties in the CSS file.

    Based on what I'm reading here, it seems that if you were to do a table-less design, you should try and do a container first. Reason: A skin might load many containers on one page, saving a ton of resources. Also, containers are fairly easy designs (basically a box with a center for content).

  • portvista

    portvista

    None

    0 Points

    241 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 01:28 PM|portvista|LINK

    I sure do see a lot of tables for a site designed entirely with CSS/DIV. Plus, it's broken on my widescreen monitor. The top background does not extend far enough. Ironic that someone would design for the future, and not foresee the emerging larger LCD screens entering the market.

    So far, the CSS/DIV guys are not making their case. I may also argue that the DIV designs I'm seeing are very simple compared to what I've seen with tables. I believe http://www.coolhomepages.com/ is the best source to see the very best of the web. Go check out the best and see how they use DIV's.

    I don't care what you use, but try learning from the best -- not these crappy examples people have been throwing up here. I'd really be surprised if any DNN sites were on coolhomepages.com anyway.

    Also, sort of outside of the DIV vs. TABLE debate, the menu is bad, because it uses background images that do not load right away on mouseovers (you see flashing in IE). This is common javascript thing -- the SOL menu doesn't do it right so I'm not surprised to see this. Rule of thumb -- don't use background images on rollovers.

    -PortVista-

    www.PortVista.com
  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 02:26 PM|mathisjay|LINK

    Couple of points:

    1) The website link he pointed out was referring to the skin package called Boxed4CSS which is available for download.  I don't think he meant the actual ThinkOfDesign website.  You are right that the ThinkOfDesign site has a problem on wide screens, but it is one that could easily be fixed (without <table>).

    2) I mentioned earlier that page using a pure <div> based skin/container would still have <table> in it if it uses the standard content modules.  This is because the standard modules use <table> to control their layout.

    3) If you really want to see the best, check out http://csszengarden.com    There is no better example anywhere of how one structural semantic HTML page can be drastically altered with just CSS changes.

  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 03:03 PM|Ed_DeGagne|LINK

    porta,

    You're missing the point, it's not the site, it's the skin you download that is entirely Css.DIV driven, it's in the download section called Boxed4Css.

    Download it and give it a spin.

    matisjay,

    The Boxed4Css skin is completely void of tables. AND it actually works.  [:D]

    The tables that do get "injected" into the HTML stream are done so through DNN, not the skin.

    The design of the skin also takes care of widow height and setting the footer position through 2 very usefule, but very simple javascript routines.


    I was about to give up on it for a bit and use a combination of the 2 methodologies, but after playing with this one, it's pretty clear I could actually move to a completely Css/Div driven skin and container design now and not later.

    Thanks for the help, and the discussion everyone.
  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 19, 2005 10:44 PM|Ed_DeGagne|LINK

    I have a slightly modified version of the boxed4css Css/Div skin running live on the South Village link below.

    Seems to work, haven't looked at it on a Mac in Safari yet.


  • ech01

    ech01

    None

    0 Points

    288 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 20, 2005 08:56 AM|ech01|LINK

    Ed_DeGagne

    I have a slightly modified version of the boxed4css Css/Div skin running live on the South Village link below.

    Seems to work, haven't looked at it on a Mac in Safari yet.

    That is a fast skin![Yes]

  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 20, 2005 09:37 AM|mathisjay|LINK

    Very nice Ed.  Very fast even on my PDA.  I am also working a variation based on the Boxed4CSS package.  Your are right that the Boxed4CSS package is the best example of a semantic HTML skin/container.
  • mathisjay

    mathisjay

    Member

    10 Points

    1373 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 20, 2005 09:38 AM|mathisjay|LINK

    It might be cool if we could put together a csszengarden type site for DNN.  Basically, come up with one set of content (perhaps the default home page when you set up a new portal) and then have one well defined semantic HTML skin/container.   Then ask people to start providing different CSS files and images to alter the basic look. 

  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 20, 2005 10:19 AM|Ed_DeGagne|LINK

    Check out the page source behind it, the only table on the entire page is from...


    MY OWN DARN MODULE!!

    [:D]

    I smell another release on the ServerStats module coming.

    [:)]


  • dstgroup

    dstgroup

    None

    0 Points

    78 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 20, 2005 11:02 AM|dstgroup|LINK

    I just read in interesting post about a new project MS will be releasing in the spring:

    ScottGu

    The ASP.NET 2.0 control model allows you to replace the rendering of controls as part of the new control architecture (we call these hooks "adapters").  This particular project is a a cool one that Shanku has been working on that uses this feature to allow you to plug-in new CSS based adapters for the built-in ASP.NET controls that allow you to build fully CSS based sites (for example: using divs and css for styles in controls, etc).  Note: We don't have an ETA on this project yet as it is more of a side-project.  But hopefully we'll have an initial drop ready next spring for people to play with.


    This sounds like just the ticket for making web sites backwords compatible with older browsers while still creating standards compliant content for browsers that can handle it. The question is does the core need changes for this to work? etc. I confess that I didn't get much time to look at the adapters feature during the 2.0 betas as documentation was scarce at the time.

    Keep an eye on this blog for more info:

    http://weblogs.asp.net/scottgu/archive/2005/12/20/433581.aspx
    Geoff Van Brunt
    DST Consulting Engineers
  • codewarrior415

    codewarrior4...

    None

    0 Points

    25 Posts

    Re: Tableless Skin Design: is it possible?

    Dec 23, 2005 03:01 PM|codewarrior415|LINK

    One of the reasons why I started this thread is because of CSSZengarden. I wanted to build a skin without tables. When I saw CSSZengarden.com, it inspired me. This would be a cool project for DNN users.
    "It's in the computer?"(zoolander)
    Kwazimoto.com
  • nbc

    nbc

    None

    0 Points

    1464 Posts

    Re: Tableless Skin Design: is it possible?

    Jan 02, 2006 10:16 AM|nbc|LINK

    In the spirit of this thread I have posted a CSS based skin package for free download at nuke.nickclements.net.

    A couple of caveats;

    • The skins are a port of Jaxon Rice's CS skins so if they behave badly it's his fault :)
    • They're a bit buggy especially in Firefox but I'll work through these

    Please download 'em and let me know what you think

    Regards, Nick

    Free Css Skins! | nuke.nickclements.net 
  • Ed_DeGagne

    Ed_DeGagne

    None

    0 Points

    906 Posts

    Re: Tableless Skin Design: is it possible?

    Jan 02, 2006 10:27 AM|Ed_DeGagne|LINK

    This is healthy for the cause, to have a number of DNN tableless examples to look at and continue to push it forward.

    The skin on South Village Software is a modified version of the Boxed4Css skin. I too will put that up for download in the next couple of days. You can look at it now by visiting the link let me kow if you spot any issues and we'll try to correct it before we make it available.

    We'll put up a few different color choices as well for those that don't want to modify them.

    As with Nick's skin, and the Boxed4Css skin, it too requires specific containers to work correctly.


  • nbc

    nbc

    None

    0 Points

    1464 Posts

    Re: Tableless Skin Design: is it possible?

    Jan 02, 2006 10:35 AM|nbc|LINK

    Couldn't agree more Ed, I have been messing about with CSS layouts for a while and lately implementing 'semi-css' layouts in production (ie div layout - table holding content panes) but this thread pushed me to get some layouts out there.

    BTW I can get around having to use a specific container by using an XHTML version of default.aspx, but of course that's not very practical.

    Regards, Nick

    Free Css Skins! | nuke.nickclements.net 
  • nokiko

    nokiko

    Member

    10 Points

    2134 Posts

    Re: Tableless Skin Design: is it possible?

    Jan 02, 2006 10:46 AM|nokiko|LINK

    mm using an xhtml version of default.aspx is the best way. With this doctype you can accomplish much better styling posibillities especially with floats and such. The standard doctype is not to be used in too complex css layouts.

    Another idea to gt skins is go to the wordpress, type etc ( php website and weblog template sites ). Install this skin on a basic php portal and then save the html and convert over to a skin. Its not that hard to do problem alon is you need a test php environment to do all this and I dont have that fully done yet.

    I did write my own webpage saver that saves an html webpage unmodified back to disk ( html, code, flash, images css files, css files referenced in css files and images referenced in css files. But now I need my php environment done and then its skin overload ;)

     

     

     

     

    Armand Datema
  • Spirit

    Spirit

    None

    0 Points

    51 Posts

    Re: Tableless Skin Design: is it possible?

    Jan 02, 2006 11:46 AM|Spirit|LINK

    I've been reading this with enthusiasm for a while now and downloading the examples to get some addition insite.

    I too would like to see a CSSZenGarden approach taken; add to that the promise of Atlas, well who knows.

    All I really would like, is to allow users to popup a top layer div containing the login control instead of zipping off to a new page, then having to return. That would go along way to making the UI much more user freindly.

    Maple Ridge, BC CA
  • Kabelsalat

    Kabelsalat

    None

    0 Points

    74 Posts

    Re: Tableless Skin Design: is it possible? (DIV vs. TABLE)

    Jan 07, 2006 05:35 PM|Kabelsalat|LINK

    DougV


    "Out of curiosity.  Has anyone done anything with DOCTYPE switching?"

    If I remember correctly there were some problems someone posted that SolPartMenu would stop functioning correctly if you did so.


    nokiko

    yeah solpart breaks up

    I have a deiffernt doctype in my modiefied default.aspx ( xhmtl transitional) but solpart doesnt like that. BUt if you use css skins you shouldnt use solpart anyway but a good semantic css menu


    Not every browser is affected. E.g. IE displays everything as it should but Firefox places submenus in the upper left. ... but actually Firefox is doing right: Solpart sets style-properties like left, top,... without specifying it's unit.

    Here's some sample-code:

    Solpart does it this way (wrong): "oMenu.style.top = oPDims.t;"
    The following snippet would be correct: "oMenu.style.top = oPDims.t + 'px';"

    I changed all affected Parts of the spmenu.js and it seems to work both in IE and Firefox. Other browsers should be tested, too.

    Here's a diff for the version bundled with DotNetNuke 3.2.2:


    --- D:\Dokumente und Einstellungen\Philipp\Desktop\spmenu.js    Sat Jan 07 23:05:29 2006
    +++ D:\Projekte\Src\Andere\dnn3\controls\SolpartMenu\spmenu.js    Sat Jan 07 23:08:24 2006
    @@ -737,7 +737,7 @@
                 //if (iNewTop&lt;0)
                 //    iNewTop=0;
                  
    -            this._m_oTblMenuBar.style.top = iNewTop - 10;   
    +            this._m_oTblMenuBar.style.top = iNewTop - 10 + 'px';   
         }
     }
     
    @@ -979,7 +979,7 @@
                     var oPDims = new spm_elementDims(oRow);
                     var oMDims = new spm_elementDims(oMenu);
                                        
    -                oMenu.style.top = oPDims.t;
    +                oMenu.style.top = oPDims.t + 'px';
                    
                     spm_resetScroll(oMenu);
     
    @@ -991,7 +991,7 @@
                   if (oMDims.t - spm_getBodyScrollTop() + oMDims.h > spm_getViewPortHeight())
                   {
                       if (oMDims.h < spm_getViewPortHeight())
    -                        oMenu.style.top = spm_getViewPortHeight() + spm_getBodyScrollTop() - oMDims.h;
    +                        oMenu.style.top = spm_getViewPortHeight() + spm_getBodyScrollTop() - oMDims.h + 'px';
                         else
                         {
                             spm_handleScrollMenu(this, oMenu);
    @@ -1001,19 +1001,19 @@
                   }
     
                     if (this.direction == 'rtl')
    -                    oMenu.style.left = oPDims.l - oMDims.w - spm_getBodyScrollLeft();
    +                    oMenu.style.left = oPDims.l - oMDims.w - spm_getBodyScrollLeft() + 'px';
                     else
    -                    oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft();
    +                    oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft() + 'px';
     
                     if (this.direction == 'rtl')
                     {
                         if (oMDims.l - spm_getBodyScrollLeft() < 0)
    -                        oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft();
    +                        oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft() + 'px';
                     }
                     else 
                     {
                         if (oPDims.l - spm_getBodyScrollLeft() + oPDims.w + oMDims.w > spm_getViewPortWidth())
    -                        oMenu.style.left = oPDims.l - oMDims.w - spm_getBodyScrollLeft();
    +                        oMenu.style.left = oPDims.l - oMDims.w - spm_getBodyScrollLeft() + 'px';
                     }
                        
                     this._m_aOpenMenuID[this._m_aOpenMenuID.length] = sID;
    @@ -1114,8 +1114,8 @@
                     oIFR.id = 'ifr' + eMenu.id;
                     //oIFR.src = 'javascript: void(0);';
                     oIFR.src = sysImgPath + 'spacer.gif';
    -                oIFR.style.top = 0;
    -                oIFR.style.left = 0;
    +                oIFR.style.top = '0px';
    +                oIFR.style.left = '0px';
                     oIFR.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
                     oIFR.scrolling = 'no';
                     oIFR.frameBorder = 'no';
    @@ -1125,10 +1125,10 @@
                 }
                 var oMDims = new spm_elementDims(eMenu);
                
    -            oIFR.style.width=oMDims.w;
    -            oIFR.style.height=oMDims.h;
    -            oIFR.style.top=oMDims.t;
    -            oIFR.style.left=oMDims.l;
    +            oIFR.style.width=oMDims.w + 'px';
    +            oIFR.style.height=oMDims.h + 'px';
    +            oIFR.style.top=oMDims.t + 'px';
    +            oIFR.style.left=oMDims.l + 'px';
                
                 var iIndex = spm_getCurrentStyle(eMenu, 'zIndex');    //eMenu.style.zIndex;
                 if (iIndex == null || iIndex == 0)
    @@ -1214,13 +1214,13 @@
            
             if (me.display == 'vertical')
             {
    -            oMenu.style.top = oPDims.t;
    +            oMenu.style.top = oPDims.t + 'px';
                 var oMDims = new spm_elementDims(oMenu);
     
                 if (oMDims.t - spm_getBodyScrollTop() + oMDims.h >= spm_getViewPortHeight())
                 {
                     if (oMDims.h < spm_getViewPortHeight())
    -                    oMenu.style.top = spm_getViewPortHeight() - oMDims.h + spm_getBodyScrollTop();   
    +                    oMenu.style.top = spm_getViewPortHeight() - oMDims.h + spm_getBodyScrollTop() + 'px';   
                     else
                         spm_handleScrollMenu(me, oMenu);
                 }
    @@ -1230,7 +1230,7 @@
                 if (spm_browserType() != 'ie') //since mozilla doesn't set width greater than window size we need to store it here
                      oOrigMDims = new spm_elementDims(oMenu);
                
    -            oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft();
    +            oMenu.style.left = oPDims.l + oPDims.w - spm_getBodyScrollLeft() + 'px';
                 oMDims = new spm_elementDims(oMenu);
                 if (oOrigMDims == null)
                     oOrigMDims = oMDims;
    @@ -1238,7 +1238,7 @@
                 if (oMDims.l - spm_getBodyScrollLeft(true) + oOrigMDims.w > spm_getViewPortWidth())
                 {
                   if (spm_getViewPortWidth() - oOrigMDims.w > 0)  //only do this if it fits
    -                  oMenu.style.left = oPDims.l - oOrigMDims.w - spm_getBodyScrollLeft(true);
    +                  oMenu.style.left = oPDims.l - oOrigMDims.w - spm_getBodyScrollLeft(true) + 'px';
                 }
     
                 //oMenu.style.display = "";
    @@ -1248,24 +1248,24 @@
                 if (me.direction == 'rtl')           
                 {
                     var oMDims2 = new spm_elementDims(oMenu);
    -                oMenu.style.left = (oPDims.l + oPDims.w) - oMDims2.w - spm_getBodyScrollLeft();
    +                oMenu.style.left = (oPDims.l + oPDims.w) - oMDims2.w - spm_getBodyScrollLeft() + 'px';
                 }
                 else           
    -                oMenu.style.left = oPDims.l - spm_getBodyScrollLeft();
    +                oMenu.style.left = oPDims.l - spm_getBodyScrollLeft() + 'px';
                    
    -            oMenu.style.top = oPDims.t + oPDims.h;
    +            oMenu.style.top = oPDims.t + oPDims.h + 'px';
                 var oMDims = new spm_elementDims(oMenu);
                
                 if (oMDims.l - spm_getBodyScrollLeft(true) + oMDims.w > spm_getViewPortWidth())
                 {
                   if (spm_getViewPortWidth() - oMDims.w > 0)  //only do this if it fits
    -                  oMenu.style.left = spm_getViewPortWidth() - oMDims.w + spm_getBodyScrollLeft(true);
    +                  oMenu.style.left = spm_getViewPortWidth() - oMDims.w + spm_getBodyScrollLeft(true) + 'px';
                 }
                
                 if (oMDims.t - spm_getBodyScrollTop() + oMDims.h > spm_getViewPortHeight())
                 {
                   if (oPDims.t - oMDims.h - spm_getBodyScrollTop() > 0) //only do this if it fits
    -                  oMenu.style.top = oPDims.t - oMDims.h;    //place above menu bar
    +                  oMenu.style.top = oPDims.t - oMDims.h + 'px';    //place above menu bar
                     else
                         spm_handleScrollMenu(me, oMenu);
                 }
    @@ -2337,15 +2337,15 @@
             this.l = spm_elementLeft(o, bIncludeBody);
             if (!spm_isMac('ie'))
             {
    -            o.style.top = 0;
    -            o.style.left = 0;
    +            o.style.top = 0  + 'px';
    +            o.style.left = 0 + 'px';
             }
             this.w = spm_getElementWidth(o);
             this.h = spm_getElementHeight(o);
             if (!spm_isMac('ie'))
             {
    -            o.style.top = this.t;
    -            o.style.left = this.l;
    +            o.style.top = this.t + 'px';
    +            o.style.left = this.l + 'px';
             }
             if (bHidden)
                 o.style.display = "none";

  • ‹ Previous Thread|Next Thread ›