ASP.NET Forums/Retired Forums/DotNetNuke (RETIRED)/Why does 100% Css Desing Fail in Dnn? (No Tables)

Why does 100% Css Desing Fail in Dnn? (No Tables)RSS

245 replies

Last post May 17, 2006 12:45 PM by nokiko

Armand Datema
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 04:51 AM|aaava|LINK

    Hey Vasilli: I notice that you do use a different skin when your url: http://www.thinkofdesign.com/Default.aspx?alias=www.thinkofdesign.com/el is accessed from a Macintosh. Is this on purpose? I know there are *SERIOUS* issues w/solpart menus on IE for the Max (ie. THEY DON'T WORK!), but css for Mozilla 1.4+ and Firefox works great on a Mac. Just wondering why you don't display your wonderfull tabless skin here. Have you tested this and it still doesn't work even for Firefox and Mozilla on Mac? I'm currently going thru a complete nightmare trying to get DNN to work at all with CSS on IE on a mac. I've already had to scout out a different menuing system, this after spending weeks figuring out all the ins and outs and nits of solpart...I didn't have access to a Mac at the time, so I just *assumed* that solpart had been tested for IE on Macs. The version of IE that ships *today* with Mac OS10.x (5.2.3), and the default Mac browser both ack on solpart. Fonts show up incorrectly (size is WAY off), and no submenus show up. Just a warning for any of you doing work for an ad agency, publishing house, or printing company...where Macs are still dominant...
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 04:57 AM|nokiko|LINK

    @aava how does my negative margins one look on mac, can you send / post a screenshot floated divs and sematic list menu negative margins
    Armand Datema
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 05:13 AM|aaava|LINK

    Hey Nokiko: Well, I for one would sure like to know how the heck you got negative margins to work. I could get them working fine for IE, but on Mozilla (ugh!). I sort of have decided that negative margins aren't the way for me to go anyway, since I've been able to get float and inline to do pretty much everything I want, and cross-browser...that is, cross-browser EXCEPT FOR the default Mac browser and IE both of which products ship for the Mac. Unfortuantely, I also tried your skin on the Mac in IE Nokiko. I'm sure it doesn't matter to anyone (personally, I'd like to avoid all clients that insist on Mac browser support...I'd love to be able to tell them to download Mozilla or Firefox and stop wastin' me time...but that would lead to a shortfall of customers. ;-)). It's weird. It took about 5 minutes to load. I thought it was a connection thing, but on my XP Pro laptop, it shows up immediately. When it finally *does* show up the center 'div' whos up at the bottom of the screen instead of between the left and right frames. I think Microsoft does this on purpose, and they're gonna end up paying for it because every single Max user is going to use Mozilla/Firefox, which work fine on a Mac. Just an FYI for all you folks, since I'm trying to find ways to get my skins to work on Mac IE 5.2.3 and default browser--which appears to be an impossible task. *Sighs*. Have to say though Nokiko. Yours is the first css skin that I've seen on a Mac that's even CLOSE to working...
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 05:19 AM|aaava|LINK

    Whoa, Ed, Joe Brinkman's skin is the only one I've seen that works close to correctly on a Mac. The solpart menu fonts are wrong (this is not his problem), but besides that it works. Not using solpart submenus definitely helps, but all his css frames show up in exactly the right spot. Did you say that he made his skin downloadable? Is there a link somewhere for this? Or could I contact Joe? I've got a fixed header footer skin that's nice, but none of my css skins work perfectly on a mac. It doesn't like my float box divs 'tall...
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 05:27 AM|nokiko|LINK

    @aava can you send me screenshots of each of the 2 in a mac browser btw: its not the fault of the kins perse how does this look in mac the boave is the same as the negative margin dnn version however in a completely valid xhtml structure ( any of the mac issues in the dnn version could be because of the non valid html and so ie goes into quirks mode )
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 05:31 AM|nokiko|LINK

    @ aava again how does this one look in mac ( its the same skin only with xhtml transitional and as much of the validation erros of standard dnn fixed )
    Armand Datema
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:31 AM|aaava|LINK

    Hey Nokiko: One sec, and I'll let ya know. After spending 14 hours fixing my skins so they would work on a Mac (and I still have to find a replacement menuing system for solpart, any ideas?), I decided to check w3.org browser stats, and a couplel of other places. IE on a Mac is a dead dog. Road kill. About 0.156 pct of users (well, prolly more like .2-.5 pct of total users, use IE on a Mac. So I'm gonna convince my clients to put a plain vanilla skin for Mac IE users. Even more important, that number is DOWN by FIFTY PERCENT (from 1.1-1.5 pct) just FOUR months ago. People are finding more and more websites that just don't work on Mac w/IE and downloading Mozilla and Firefox. However, solpart has to go, for me anyway. The clients who have customers who *do* use IE on a mac, have to at least be able to see the menus. I'm checking the: http://www.howardshome.com/nokiko/t/home.xml now. Dang it! Nokiko! I need that skin! It works fine on IE on a Mac. Not that you should really worry about it unless you're as anal retentive as I am... And do you have a suggestion for an alternative menuing system?
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:37 AM|aaava|LINK

    Hey Nokiko: Could you splain to me what you did to fix the skin? Is that still be generated from DNN? Are you changing the core or something? I'm checking that last link of yours: www.schwingproject.com/xhtml.aspx?tabid=107, and this one is still not right. The center lorem ipsum stuff shows up *under* the left and right frames, but above the copyright frame. Still like to know how you fixed the first one and get a look at that skin. At my age, I should be in bed w/my wife, not goin' to sleep just about when the kids get up. ;-(
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:37 AM|nokiko|LINK

    aava that skin is the same as the one im using for the dnn skin however, the howardshome one is perfectly 100% valid xhtml transitional, and dnn creates invalid html and there is probably where it goes wrong on the mac Im curious tho if the xhtml version link I snd you does work correctly
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:43 AM|nokiko|LINK

    oops posted at the same time I think the real problem here is invalid html, the css is ecactly the same but with invalid html you cannot predict the outcome anmore. If 100% valid html the negative layout should work perfectly in any browsers give or take a few pixelshifts etc but nothing major you can see how each one behaves by checking the dnn version snd the howardshome version in a browser , notice the differnece each time in font size color etc
    Armand Datema
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:43 AM|aaava|LINK

    So how do you convert 'on the fly' dnn html into xhtml transitional output? And just in case you missed it, do you have a suggestion for another menuing system I can use? One that is crawlable by browsers, and is not quite as IE heavy as solpart? Heck, I'm not knocking solpart, but it does about 800% of what I need it to do. Of course, I'd have to find another way of doing breadcrumbs too, since the breadcrumbing also doesn't work on a Mac...
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:45 AM|aaava|LINK

    I'm not sure I understand how you transitioned DNN code to XHTML on the fly. Did you just copy the html output, and then manually do this? Is there some way you could send me that skin (aaava at yahoo dot com?). It would truly get me a heads up on any future Mac stuff i do.
  • aaava aaava

    Member

    1 Points

    1151 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:48 AM|aaava|LINK

    I also think there should be some way to 'open up' the html that is output by the core (as well as by custom modules). After all, there's a *big* difference between being a css/xhtml/stylesheet expert and being a good ASP.NET coder...they're really different animals in a sense, ya know?
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:55 AM|nokiko|LINK

    aava, i didnt fix the skin, the css I use works for 100% if its in a completel valid html or xhtml document. But the minute you drop it in a dnn install you get invalid html so invalid results. Sometimes i get better results If I use a default.aspx where i have a xhtml header changed all the tags names to lovwercase and close all the meta tags. I can send you the skin when im back at work I dont have the install zip here at the moment. If you want to have the valid html and css, just go to the howardshome site and save the html out put and save the css, you now have it 100% working. You can use that for sites that need to look the same in a mac as wel as other brosers ( non dnn ). I use xhtmlwebcontrols.net to get my standard asp.net sites to validate. i start with createing a xhtml webproject, add there xform and then you can use any of there ow other xhtml cotrols or for more precise html creation i use the repeater to write out my other html tags like unordered lists. regarding your mac menu, does the burgondy looking menu in my very colorfull bare floated example work in a mac?. if yes, this is a menu that is part of my css menu pack on snowcovered. they are all based on unordered list so pure html.
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 06:57 AM|nokiko|LINK

    here is my xhtml default.aspx <script language="JavaScript"></script> <form id="Form" runat="server" ENCTYPE="multipart/form-data"> <input id="ScrollTop" runat="server" name="ScrollTop" TYPE="hidden"> </form>
    Armand Datema
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 07:32 AM|cluexp|LINK

    @nokiko @mathiasjay Massive Respons to this, this will be good! I will get back to work today, and continue with my css skin, when I am done I will upload it on the portal you created mathiasjay. Nice skin Vasilis. Will look more into it over the weekend, but it sure looks great. Got to go entertaining my guests:) -css is the new wine!
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 02:35 PM|cluexp|LINK

    @MathisJay Maybe you can set up the portal so that people can upload screen captures, that way we will know if the skins rendes correct in all different browsers? Maybe we can have some choices when uploading print-screens: Pre IE 4.0 IE 5.0 IE 5.5 Opera pre 4.0 and so on Mozilla and so on Then we could easily see what causes the different browsers to render incorrect. Just a thought will upload when I am 100% done with my skin, havw some trbl with 3 pane skin, renders good in IE, but lowsy in Mozilla. Will try different workarounds, then upload. @nokiko Did try to change default.aspx like you did, and guess what. Now mozilla works better for somereason, but at the minute IE is thrown of. Stacks the divs in strange ways, but that I will fix. -clue
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 17, 2004 03:31 PM|nokiko|LINK

    @clue Yeah this is called Quirksmode If the html is invalid then IE goes into quirksmode, other browsers however just render it the correct way ( IE is much more forgiving ). I start by making sure my skin is handled 100% valid html and css and then create dnn version. If I have i rending correctly in one browser I try different hacks to make sure it will render in othe browsers also keeping in mind the invalid html generation of DNN
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 19, 2004 03:28 AM|nokiko|LINK

    found a new commented/structured xhtml css template get it here
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 20, 2004 04:01 AM|nokiko|LINK

    IE5 css and MAC explained Realy good tips if you want to make sure stylesheets work in ie5 for mac or create css files especially for that browser
    Armand Datema
  • ryansimula ryansimula

    None

    0 Points

    1 Post

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 25, 2004 12:19 PM|ryansimula|LINK

    HTML tables are meant to display tabular data. They were never intended for design purposes. I have yet to get any CSS-based skins to work... even the one I downloaded from this page didn't work. (Once I uploaded the zip file as a skin package, no skin files were available, and could not be applied to anything.) Quite frankly, I'm surprised that DNN employs the old-school paradigm of layouts based on HTML tables. I think I speak for several other designers/developers here when I say that it would be nice to have an actual tutorial available, free of charge, that details step-by-step instructions for developing a CSS-based skin from scratch and deploy it with ease.
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 26, 2004 06:01 PM|cluexp|LINK

    Ok, I am back. What did i miss? Have been in Norway(oh my what a cold place) for the past week, so I have not got any Dnn work done. But now I am ready for some css work. How is things going? Many people signed in yet? Guess I am ready in about a week, so then I will post my skin, and make also a little goodie for those in need of a little guiding along the way. I am writing a little tutorial or maybe a "whitepaper" for skinning, and I have just started adding a little something-something for css use. Don't know if this will be ready when I post the skin, but I will do my best. @Nokiko Have you done more work with the xhtml conversion for the default.aspx? I was thinking about that today on the plane home, and what about the modules? Will all the different modules need to be converted to xhtml(output) in order to get the css to act 100 % the way we intend? If so, we are in for some heavy workloads the next month(s)D) I do belive I have some modules that rely on tables in the default.aspx, this was dnn 2.0 modules I belive, have not played with them during the css skin work, but as soon as it all works fine in std mode, I will add all the modules I have just to see if they behave the way I hope. Clue
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 26, 2004 06:14 PM|nokiko|LINK

    welcome back no nothing much done, I had some other stuff to do, being one of the happy few I am busy converting over all my modules skinobjects and css menus to dnn3 so not too much css work altho not dnn related. For my normal job ( dnn is fun work i do on the side ) I completes a complete xhtml asp.net framework full .net sites no tables used in layout xhtml transitional and full accesibillity AAA. So I did have soem css fun but not dnn related I havent lookid into dnn3 yet if the table inhection around a module is still there but there are plenty of http modules so we could make a new http module to handle all the xhtml conversions. But in my opinion its better to just create a css skin that works with screwed html ;)
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 27, 2004 10:04 AM|nokiko|LINK

    a few new links asp.net posts on webstandards.org part1 part2 creating your own xhtml compliant webform library
    Armand Datema
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 27, 2004 01:42 PM|cluexp|LINK

    So what does 3.0 look like? Are we set to be as amazed as with 2.0, or even more? Anyway, realy looking forward to the release. For the xhtml part, I am not sure about the buggy html, I will look more into this over the next weeks. I guess what I am trying to say, is that if we create some PA or even core change that take care of our problems regarding html 4.0, then we are much more free when it somes to xml, and implementing other excisting software/modules to work well with dnn. Many companies, no let me refraze that, a lot! of companies have legacy software or special needs that need to be taken seriously, and a xhtml output I think is the way to go anyway, and I belive within a short:-) period of time, so will even the core team. I belive more and more buisnesses are moving from html and over to xhtml, so I will try to figure something out. Will not start with this before 3.0 is launched, but imagine if we have it all. Pure css skin, and xhtml! clue
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Oct 28, 2004 08:35 AM|nokiko|LINK

    conditional comments ideal for adding specific css styles to the skin or laoding completely different css files
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Nov 16, 2004 04:23 AM|nokiko|LINK

    mmm not much action here lately, i did lots on dnn3 so not too much on css skin but Ihave been paying with a new css based menu ala solpart but much cleaner and pure css so far it works in IE 5.x Mac IE 6.0 Win IE 5.5 Win IE 5.01 Win NS 7.x Mac Netscape 7.2 Win Safari 1.2.3 Firefox 1.0 PR Mac Firefox 1.0 PR Win Opera 7.54 Mac Opera 7.54 Win
    Armand Datema
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Nov 16, 2004 09:19 AM|cluexp|LINK

    Great, nokiko. Can you post a link? I have been flooded with workloads, and will try get the Css designed done this weekend. Sadly the day only holds 24hrs, and when spend you 10-12 og them working you axx off, and another couple of hrs in external meetings it is impossible to get any Dnn work done. But it looks like my schedual will be better in a week, so guess I will post it during next week. Hey nokiko, u r known here to be a graphic wizard, maybe you can give me some advise? I had some trouble getting my css correct, and this is because I started messing with rounded corners, and borders. I am working on a fixed width, yet fluid skin, with an outerwrapper with dashed 1px border. Using photoshop to fix rounded corners is fairly straight forward, but how to make rounded corners with dashed or dotted border photoshop? Because the problem now is to make a border outside every 9 slices of the curved image I made in photoshop. I have used 1px "solid" before, applying fill in photoshop, to create an imaginary border, but I don't know how to make a dotted border or a dashed border in photoshop. So, nokiko, or any other graphic wizard here, if you knwo how to make dashed/dotted border to curved corners in photoshop, pls step up. Have visited all my favorite photoshop tut.,but no luck with this so far, and I have seen it done so many times.....aaaagggh clue(less)
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Nov 16, 2004 09:42 AM|nokiko|LINK

    mmm its almost done just need to set up a dnn3 install since I did all new stuff for dnn3, but ill have alook at a 212 version as well. mm you dont do that with photoshop but with illustrator, you select the rectange in the toolbox, set the rounding corner values create it, then you can change the line style to dotted dashes custom etc. mm i think you can fake it in photoshop, its from my bare head but im 99% sure it works ;) lets say we want a 2 pixel dashed border create a 4 x 4 pixel image and add 2 whiteblocks and 2 black blocks on here of each 2 pixels bw wb select all and go to edit define pattern, give it a name on the image you want to have a border around make a new layer select all choose edit fill with pattern you now have your image layer and a fill layer with black white blocks make a new layer select all, edit stroke and give it a 2 pixel stroke black now select all the black so you have your whole solid border selected, inverse your selection and you have the middle part selected and the 2 pixel border is not selected anymore set this layer to invisible go back to the dotted layer and press delte the whole middle part is cut out and you now have a dashed border around your image that is on the underlying image Have fun I hope you understand it, im in a meeting now so its all by head and not tested :)
    Armand Datema
  • cluexp cluexp

    None

    0 Points

    36 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Nov 16, 2004 11:44 AM|cluexp|LINK

    As I said, a true wizard:-)) I don't have the time to play around before friday night, but I will check it out then. For the moment I don't have Illustrator, and I am currently using mostly Firework to do vector work. But I guess I will be able to do the same in Fireworks too. If however I get stucked, I will post here for more help. But your guiding looks very good, so I am sure its all ok. Thx for taking the time to fix a look for 2.1.2 as well. Clue
  • AnyUserNameWillDo AnyUserNameW...

    None

    0 Points

    118 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Feb 09, 2005 02:55 PM|AnyUserNameWillDo|LINK

    Hey Everyone, We were looking at this in depth today and trying to make pure CSS skins (no tables). After removing it all, we still found a table in there. One module, Links (all we worked with). The offending container? DataList. DataList uses Tables to render, which is what will cause DNN to break (as we've seen, or at least not work as expected). From looking at the 2005 version of .NET (2.0) it seems this behavior has been corrected, but theoretically, every user of .NET will suffer from this. I can deal with that for now. If anyone knows how to make these render other than tables (which I don't know if you can, doubt it though), then we are in business. Otherwise. That's a shame. =) HTH, Chris.
    w00t!
    DotNetNuke Silver Benefactor
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 12:15 PM|mikeh36|LINK

    Any chance I could get one of you Div tag gurus to look at a tableless skin I've done. It looks great in IE but in Firefox the SolPartMenu is shifted down a few pixels while the USER LOGIN tags display where they're supposed to (they share the same line).
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 01:41 PM|slope|LINK

    Just post the code and I am sure someone will help:-) There are some issues with how the different browsers "read" css. This is because the browsers do not follow the css standard 100 %. If you google for Css Hacks or try searching the forum I am sure you will find a way to make it look good. But if you post here, I will give it a shot. And if I am not able ot solve this, we put or good faith in Nokiko vasilis or mathisjay. They are all Css artists:-) I am sure it is just a minor fix with a known css hack. Easy fix I belive.
    -Follow your dreams!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 02:04 PM|nokiko|LINK

    as for solpart and: Sorry i dont do css and solpart because solpart works because ie is way too forgiving in the layout and css area. Solpart css works great in quirksmode but not in standards mode. Gice your default.aspx a good doctype that doenst render in quirksmode and you will see what i mean tableless layouts and tables a css layout shouldnt break with tables. Its a matter of a good doctype a good xhtml structure. Mostly it breaks because the width of the table is set to a width that is too much for the surrounding div. If this is the case you could try with adding overflow style to the surrounding div set it to scroll or invisible and you can trak down the error I have a set of free skins coming soon ( with included css only menu ) horizontal vertical left to right vertical right to left as you see I have a different default page with a good doctype so that it doesnt render in quirksmode but standards mode the skin and menu are tested ( in dnn environment) windows ( ie, firefox, opera) mac ( safari, opera, firefox ) linux ( konqueror) just check the hompage of the portal with defaultxhtnl.aspx and you will see how there are style differneces in the solpart menu
    Armand Datema
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 02:53 PM|mikeh36|LINK

    Yeah why not. Armand, I'll take a look at your samples as well. CSS /*_____________________________________________________*/ /*___________________________________________________________________________________________*/ /* Main Menu */ .MainMenu_MenuContainer { border-top: #6d6d6d 0px solid; background: none transparent scroll repeat 0% 0%; margin: 0px 0px 1px; border-bottom: #6d6d6d 0px solid; height: 1px; } .MainMenu_MenuBar{ } .MainMenu_MenuIcon{ display:none; } .MainMenu_MenuItem { padding-right: 0px; border-top: #b1bdc5 0px solid; padding-left: 5px; font-weight: normal; font-size: xx-small; padding-bottom: 0px; color: #ffffff; padding-top: 0px; border-bottom: #b1bdc5 0px solid; font-family: Verdana, Tahoma, Arial, Helvetica; } .MainMenu_MenuArrow { border-right: #a8a8a8 1px solid; padding-right: 3px; border-top: #a8a8a8 1px solid; padding-left: 7px; padding-bottom: 1px; border-left: 0px; width: 1px; padding-top: 0px; border-bottom: #a8a8a8 1px solid; text-align: right; } .MainMenu_MenuBreak{ display:none; } .MainMenu_RootMenuArrow{ } .rootmenuitembreadcrumb TD { padding-right: 0px; border-top: #ffffff 0px solid; padding-left: 10px; font-weight: bold; font-size: xx-small; background: none transparent scroll repeat 0% 0%; padding-bottom: 5px; color: #000000; padding-top: 0px; font-family: Verdana, Tahoma, Arial, Helvetica; } .submenuitembreadcrumb{ color:#FFFFFF; font-family:Verdana, Tahoma, Arial, Helvetica; font-size:xx-small; font-weight:normal; padding:4px 0px 4px 5px; border-bottom:1px #a8a8a8 solid; border-top:1px #a8a8a8 solid; } .rootmenuitem TD { padding-right: 0px; border-top: #ffffff 0px solid; padding-left: 10px; font-weight: bold; font-size: xx-small; background: none transparent scroll repeat 0% 0%; padding-bottom: 5px; color: #ffffff; padding-top: 0px; font-family: Verdana, Tahoma, Arial, Helvetica; } .rootmenuitemselected TD { padding-right: 0px; border-top: #ffffff 0px solid; padding-left: 10px; font-weight: bold; font-size: xx-small; background: none transparent scroll repeat 0% 0%; padding-bottom: 5px; color: #ffffff; font-family: Verdana, Tahoma, Arial, Helvetica; } .submenuitemselected{ color:#ffffff; font-family:Verdana, Tahoma, Arial, Helvetica; font-size:xx-small; font-weight:normal; padding:4px 0px 4px 5px; background:#6d6d6d; } .submenu { border-right: #6d6d6d 1px solid; padding-right: 0px; border-top: #6d6d6d 1px solid; margin-top: 1px; padding-left: 0px; background: #a8a8a8; padding-bottom: 0px; margin-left: 2px; border-left: #6d6d6d 1px solid; padding-top: 0px; border-bottom: #6d6d6d 1px solid; } #headerwrapper { border-top: 0px; background: url(header.jpg); width: 100%; border-bottom: 0px; background-repeat:no-repeat; height:165px; padding:0px; } #logowrapper { border-top: 0px; width: 100%; border-bottom: 0px; background-repeat:no-repeat; height:128px; padding:0px; } #logo{ height:auto; padding:5px 0px !important; padding:5px 10px 0px 10px; margin-right:10px !important; margin:0px; float:right; } #banner{ height:auto; padding:10px 0px !important; padding:10px; margin-left:10px !important; margin:0px; float:none; width:auto !important; width:100%; } #date{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#013DA4; padding:110px 10px 0px 10px; float:left; } #menu{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#FFFFFF; padding:5px 0px 0px 10px; float:left; } #users{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#FFFFFF; padding:5px 10px 0px 0px; float:right; } a.users:visited{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; } a.users:active{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; } a.users:hover{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; } a.users:link{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; text-decoration:none; } #breadwrapper{ width:100%; border-top:1px solid #a8a8a8; border-bottom:1px #a8a8a8 solid; text-align:left; } #searchbox{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#013DA4; text-align:left; padding:5px 30px; float:right; } a.searchbox:visited{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } a.searchbox:active{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } a.searchbox:hover{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FF0000; text-decoration:none; } a.searchbox:link{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } #breadcrumb{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#013DA4; text-align:left; padding:5px 30px; float:left; } a.breadcrumb:visited{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } a.breadcrumb:active{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } a.breadcrumb:hover{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FF0000; text-decoration:none; } a.breadcrumb:link{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#013DA4; text-decoration:none; } HTML page <div align="center"> <div id="headerwrapper"> <div id="logowrapper"> <div id="logo">[LOGO]</div> <div id="date">[CURRENTDATE]</div> <div id="banner">[BANNER]</div> <div style="CLEAR:both"></div> </div> <div id="users">[USER]  |  [LOGIN]</div> <div id="menu">[SOLPARTMENU]</div> <div style="CLEAR:both"></div> </div> <div id="breadwrapper"> <div id="searchbox">[SEARCH]</div> <div id="breadcrumb"> You are here: [BREADCRUMB] </div> <div style="CLEAR:both"></div> </div> <div id="mainwrapper"> <div id="rightcolumn"> <div id="RightPane" runat="server"></div> </div> <div id="leftcolumn"> <div id="LeftPane" runat="server"> </div> </div> <div id="centercolumn"> <div id="ContentPane" runat="server"></div> </div> <div style="CLEAR:both"></div> </div> <div id="bottomlinks" align="center">[LINKS]</div> <div id="footer" align="center">[PRIVACY]  |  [TERMS]  |  [COPYRIGHT]  |  [DOTNETNUKE]</div> </div> <script language="javascript" type="text/javascript"> </script>
    GMSS DNN
  • vasilis vasilis

    None

    0 Points

    116 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 04:22 PM|vasilis|LINK

    Is there a url to see the results online? Another way is to use absolute positioning for the elements in headerwrapper Example: #headerwrapper{ ... position:relative; } #menu{ position:absolute; left:0px; bottom:0px; width:auto; height:20px; ... }
    Are you looking for free DotNetNuke skins?
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 05:55 PM|mikeh36|LINK

    Vasilis, not yet. I've been doing all my code and skinning locally but haven't set up a DNN3 install on my webserver yet. I can do so tonight though without a problem. I thought position:absolute was a bad thing because of the control panel or in this case, because the menu is nested in the headerwrapper, the menu's absolute is based on the position of the headerwrapper? BTW thanks so much for your CSS skins. I relied heavily on them when designing this one (as you can probably tell from the .css classes). I learn much better from seeing how it's done than by reading about how it's done. :)
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 06:22 PM|slope|LINK

    Well get going. Give us a link.:-) Always fun to look at new css desing.
    -Follow your dreams!
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 06:22 PM|mikeh36|LINK

    Vasilis thanks a ton. The absolute positioning did the trick.
    GMSS DNN
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 10, 2005 09:35 PM|mikeh36|LINK

    You can get and see it here. I put both versions of the skin up on the site for your viewing pleasure. :)
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 05:58 AM|slope|LINK

    Hmm slightly different in firefox and maxthon. I see where the menu gets thrown off. Will look into this now, and post more later. Good work btw! Looks nice.
    -Follow your dreams!
  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 07:59 AM|nbc|LINK

    Looking good Mike - its not easy is it... Regards
    Regards, Nick

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

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 11:18 AM|mikeh36|LINK

    Thanks Nick Nope, it isn't easy. Especially if you're old, old, old school when it comes to HTML and simple CSS is newfangled to you. :)
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 12:06 PM|slope|LINK

    Hmm could it be the box model causing this? How does the css look? Is menu x pixels from top? You know the different browsers count the pixels differently? Maybe if you use absolute it will change. If you try to get pixel perfect by using so and so many pixels down from you will get different looks in gecko and Explorer. Make a quick search for boxmodel and you will see what I mean Looks good, nice work.
    -Follow your dreams!
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 01:30 PM|mikeh36|LINK

    The menu is x pixels from the bottom actually. I know that the menu is still slightly out in the none IE browsers though it's fairly close when I looked at Firefox, Netscape 7.2, and Opera. I have found a few other areas that need some tweaking for other browsers though. I'll check out the boxmodel stuff along with Armand's suggestions a few posts back.
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 03:09 PM|slope|LINK

    If the menu is n pixels from the bottom I am sure this is what causes the menu to get thrown of in non-IE browsers. This is because some browsers counts pixels from within a div others count from outside the div..let's say you have a 1px margin for the outer div. And this div is wrapped around the rest of content. Then IE I belive will add 1px from the bottom when "drawing" or rendering the screen. Thats why it is not correctly lined. I will try to look up your css's and see if I find out excactly what causes this.
    -Follow your dreams!
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 11, 2005 03:40 PM|slope|LINK

    Ok, I am digging into this: <#menu{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#FFFFFF; padding:5px 0px 0px 10px; position:absolute; bottom:10px; width:80%; left:0px; }> #Bottomlinks: < #bottomlinks{ width:100%; padding:5px 0px; background:#a8a8a8; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:xx-small; color:#333333; padding-top:10px; border-top:0px #FFFFFF solid; }> The header is one large image. Inside the #headerwrapper.The menu is lined up 10px from bottom. But there is another thing wrong in firefox with the bad skin. That is for the bottom links. They are alos of by say 10 px or so. Hmm will make a skin with the css from your site and have a look. I can't see right away what is causing this behavior in firefox, but I will make a ascx skin with your css and your headerimage, that way it is easier for me to see right away what changes is needed. Post as soon as I get someway.
    -Follow your dreams!
  • vasilis vasilis

    None

    0 Points

    116 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 12, 2005 09:55 AM|vasilis|LINK

    Well Mike, I think your CSS skin looks really cool... maybe the only thing needs, is to experiment a little with menu and user options (login - register) paddings and margins. A good idea is to place a 1px red (or any color that makes a good contrast) border to the div you want to experiment with. If you want to go further with your CSS adventure I found this page with a bunch of useful links: http://www.sitepoint.com/forums/showthread.php?t=121128 Sooner or later I will also post some dnn3 optimized CSS skins at thinkofdesign.
    Are you looking for free DotNetNuke skins?
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 12, 2005 01:10 PM|slope|LINK

    Could you post the ascx file? then I am sure I get the same as you when checking. I am certain the box-model causes this, but I have not been able to solve this yet. I might not have the same/corrects div's as you so doing this without ascx is harder then I thought:-)
    -Follow your dreams!
  • mikeh36 mikeh36

    Member

    1 Points

    915 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 12, 2005 04:21 PM|mikeh36|LINK

    Vasilis, thanks for the link. I'm at work today so no skinning allowed but I'll work on it more tomorrow. slope. Here ya go: <div align="center"> <div id="headerwrapper"> <div id="logowrapper"> <div id="logo"></div> <div id="date"></div> <div id="banner"></div> <div style="CLEAR:both"></div> </div> <div id="users">  |  </div> <div id="menu"></div> <div style="CLEAR:both"></div> </div> <div id="breadwrapper"> <div id="searchbox"></div> <div id="breadcrumb"> You are here: </div> <div style="CLEAR:both"></div> </div> <div id="mainwrapper"> <div id="rightcolumn"> <div id="RightPane" runat="server"></div> </div> <div id="leftcolumn"> <div id="LeftPane" runat="server"> </div> </div> <div id="centercolumn"> <div id="ContentPane" runat="server"></div> </div> <div style="CLEAR:both"></div> </div> <div id="bottomlinks" align="center"></div> <div id="footer" align="center">  |    |    |  </div> </div> <script language="javascript" type="text/javascript"> </script>
    GMSS DNN
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 13, 2005 04:18 AM|slope|LINK

    Would you care to also post your container file? Will fix this later tonight.
    -Follow your dreams!
  • vasilis vasilis

    None

    0 Points

    116 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 13, 2005 06:45 AM|vasilis|LINK

    I know this code with blind eyes... Just tell whats the exact problem and I will help!
    Are you looking for free DotNetNuke skins?
  • rich freeman rich freeman

    Member

    356 Points

    158 Posts

    Question about DNN and XHTML compliance - advice needed

    Mar 14, 2005 06:51 PM|rich freeman|LINK

    I've been reading through this thread and I thought this would be the right place to get a perspective on this question: We haven't used DNN before but rather custom-build our own XHTML-compliant CMS sites using VB.NET. A small site such as http://www.stagedresults.com took us about 30 hours to build. Naturally the site doesn't have all of the functionality that DNN offers, but I'm wondering whether anyone thinks DNN is a better choice from a time-saving perspective. In reading this discussion it seems to me that XHTML compliance is less than a piece of cake with DNN - is it worth making the switch?
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Question about DNN and XHTML compliance - advice needed

    Mar 15, 2005 02:22 AM|nokiko|LINK

    mm I would go with dnn and then possibley change that, its not too much work, I think I would handle as follows use xhtml structure all lowercase and a good doctype, xhml transtional because of all the opening in new windows get rid of the table injetion around each module make your own literal control instead of label, so something like <dnn:dnnlit tag="h2" modulevar="title/> this would render in a more semantic way. so achtual H tags for the titles as the are supposes to be used. Use a good clean css skin/menu/container my upcoming one for eaxample ;) Go through some of the core modules if you use these andmake them morre semantic html used as well, FAQ can be in a nested list structure instead of tables. But lot of modules can stay in tables no problems there. Create more custom modules using repeaters instead of datagrids saves a bunch of viewstate and not to mention cleaner code with mor layout friendlyness and control( This is how I build my modules :) Dont go mad about ripping out tables because tables have a use tabular display of data, and there are lot of modules that are perfect for thsi so dont try to untable these ( thats a misconception of tableless design ) Use an editor that supports xhtml instead of freetextbox that messes up your carefully typed in code. finally use http module for final rewriting of standard generated asp.net form js and viewstate tags I Can reproduce the site you mentioned using xhtml in dnn, without any problems.
    Armand Datema
  • rich freeman rich freeman

    Member

    356 Points

    158 Posts

    Thanks for the advice Armand.

    Mar 17, 2005 09:23 PM|rich freeman|LINK

    I will give it a closer look. Any other opinions would also be appreciated. Rich
  • foolah foolah

    None

    0 Points

    22 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 30, 2005 09:14 AM|foolah|LINK

    Hardest thing in css styling are browsers. IE ... ehm is that really a browser ? FF ... yeah ! Opera ... littlebit =) Browsers at Macs ... different. Table layouts has good property ... no problems with browsers, but css ... each browser doin it itself. But I've found one page <a href="www.ivanpik.net">www.ivanpik.net</a> and I havent found browser (with CSS Level 2 support) who's displaying that page incorrect o_0

    Nice I guess ...?

    And here's my question, who to handle  UL/OL coz FireFox and Explorer are working with these elements different way. Any good idea how to figure it out ? I've tried to change div id="yellowcont, orangecont, orange2cont" to UL/OL but it's absolutley different in FF and IE...

    thx for any idea  [^o)]

    Here's "HaTMatiLka" (why I cant post here any HTML code ? ... ordinary :> )

    <*html>

    <*head>

    <*title> HaXoR paGe<*/title><*meta name="Autor" content="f00l" /> <*meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" /> <*link href="my.css" rel="stylesheet" type="text/css" />

    <*/head>

     <*body>

    <*div id="web">

     <*div id="header"><*a href="#"><*img src="#" /><*/a><*/div>

    <*div id="mainmenu">

        <*div id="lftpart"><*/div>

        <*div id="btn1"><*a href="#">MENU<*/a><*/div>

       <*div id="btn2"><*a href="#">MENU<*/a><*/div>

       <*div id="btn3"><*a href="#">MENU<*/a><*/div>

    <*/div>

    <*div id="leftside">

       <*div id="topyellow"><*/div>

       <*div id="yellowcont">

          <*a href="#">link1<*/a><*br />

          <*a href="#">link1<*/a><*br />

          <*a href="#">link1<*/a><*br />

          <*a href="#">link1<*/a><*br /> <*/div>

       <*div id="toporange"><*/div>

        <*div id="orangecont">

           <*a href="#">link1<*/a><*br />

           <*a href="#">link1<*/a><*br />

           <*a href="#">link1<*/a><*br />

          <*a href="#">link1<*/a><*br />

       <*/div> <*div id="toporange2"><*/div>

       <*div id="orange2cont">

          <*a href="#">link1<*/a><*br />

          <*a href="#">link1<*/a><*br />

           <*a href="#">link1<*/a><*br />

       <*/div>

    <*div id="topfooter"><*/div> <*div class="clear"><*/div>

    <*/div>

    <*div id="rightside">

       <*div class="hotnews">

          <*div class="hottitle"><*a href="#">Pwnage<*/a><*/div> <*a href="#"><*img src="#" /><*/a>

          <*span> Pure blahy nic než blahy blahy blahy blahy ... piss on u Pure blahy nic než blahy blahy blahy blahy ... piss on u Pure blahy nic než blahy blahy blahy blahy ... piss on u Pure blahy nic než blahy blahy blahy blahy ... piss on u <*/span> <*a href="#">více<*/a>

       <*/div>

    <*div class="newska">

        <*div class="newskaTitle"><*a href="#">Ownage<*/a><*/div>

       <*span> There's difference between talking about something and knowing what the hell are you talking about. There's difference between talking about something and knowing what the hell are you talking about. There's difference between talking about something and knowing what the hell are you talking about. There's difference between talking about something and knowing what the hell are you talking about. There's difference between talking about something and knowing what the hell are you talking about. <*/span>

    <*/div>

    <*div class="clear"><*/div> <*/div> <*div class="clear"><*/div>

    <*/div>

     <*/body>

     <*/html>

    <div id=web> <div id=header>Here's the CSS ...</div></div>

    BODY{margin: 0; padding: 0;}

    div#web {width: 780px;}

    div.clear {height: 1px;clear: both;}

    /* webcontent */

    div#header

    {

    height: 70px;

    width: 100%;

    float: left;

    }

    div#header a

    {

    text-decoration: none;

    }

    div#header img

    {

    border: 0;

    position: relative;

    top: 10px;

    left: 30px;

    width: 300px;

    height: 55px;

    }

    div#mainmenu

    {

    width: 100%;

    height: 30px;

    overflow: hidden;

    float: left;

    }

    div#lftpart

    {

    height: 100%;

    width: 30px;

    background: yellow;

    float: left;

    }

    div#btn1 , div#btn2 , div#btn3

    {

    height: 100%;

    width: 80px;

    background: blue;

    float: left;

    }

    div#btn2{ background: red;}

    div#btn3{ background: green;}

    div#btn1 a, div#btn2 a, div#btn3 a

    {

    margin-left: 20px;

    line-height: 30px;

    text-decoration: none;

    color: White;

    font-family: Verdana;

    font-size: 0.8em;

    font-weight: 600;

    }

    div#btn1 a:hover, div#btn2 a:hover, div#btn3 a:hover {color: Yellow;}

    /* leftside */

    div#leftside

    {

    width: 150px;

    float: left;

    margin-top: 25px;

    margin-right: 15px;

    }

    div#topyellow, div#toporange, div#toporange2

    {

    width: 100%;

    height: 20px;

    background: purple;

    }

    div#toporange{ background: pink; }

    div#toporange{ background: orange;}

    div#yellowcont, div#orangecont, div#orange2cont

    {

    width: 100%;

    background: #cccc00;

    padding-top: 5px;

    padding-bottom: 5px;

    }

    div#orangecont { background: #cc00cc;}

    div#orange2cont { background: #009988;}

    div#yellowcont a, div#orangecont a, div#orange2cont a

    {

    margin: 15px;

    text-decoration: none;

    font-family: Tahoma;

    font-size: 0.6em;

    font-weight: 600;

    color: black;

    }

    div#topfooter

    {

    width: 100%;

    height: 30px;

    background: orange;

    }

    /* rightside */

    div#rightside {width: 600px; float: right; margin-top: 25px;}

    a.noborder

    {

    border: 0px;

    text-decoration: none;

    }

    div.hotnews

    {

    width: 175px;

    float: left;

    margin-right: 10px;

    margin-left: 10px;

    margin-bottom: 10px;

    }

    div.hotnews img

    {

    float: left;

    width: 175px;

    height: 100px;

    margin-top: 3px;

    border: 0;

    }

    div.hotnews span

    {

    float: left;

    font-family: Tahoma;

    font-size: 0.6em;

    color: Black;

    margin-left: 5px;

    margin-top: 4px;

    margin-bottom: 4px;

    }

    div.hotnews a

    {

    float: right;

    font-family: Verdana;

    font-size: 0.7em;

    color: orange;

    text-decoration: none;

    width: 100%;

    text-align: right;

    }

    div.hottitle

    {

    width: 175px;

    float: right;

    height: 30px;

    background: purple;

    }

    div.hottitle a

    {

    font-family: Tahoma;

    font-size: 0.7em;

    color: White;

    font-weight: 600;

    text-decoration: none;

    padding-right: 30px;

    padding-top: 8px;

    }

    div.hottitle a:hover

    {

    text-decoration: underline;

    }

    div.newska

    {

    width: 100%;

    float: right;

    margin-top: 2px;

    }

    div.newskaTitle

    {

    width: 580px;

    background: green;

    float: right;

    }

    div.newskaTitle a

    {

    font-family: Tahoma;

    font-size: 0.7em;

    color: White;

    font-weight: 600;

    text-decoration: none;

    margin-left: 30px;

    }

    div.newska span

    {

    float: left;

    width: 100%;

    font-family: Tahoma;

    font-size: 0.6em;

    color: Black;

    padding-left: 5px;

    padding-bottom: 8px;

    padding-top: 3px;

    border-bottom: 1px solid #dedede;

    }

  • foolah foolah

    None

    0 Points

    22 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 31, 2005 07:06 AM|foolah|LINK

    dudes dont be so aggressive to css,

    a.users:visited{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    a.users:active{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    a.users:hover{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    a.users:link{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    try this, its better ;)

    a.users:link, a.users:visited, a.users:hover, a.users:active {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    text-decoration:none;
    }

    a.users:hover {color: #FF00FF;}

    a.users:active {color: #00FFFF;}

    a.users:visited {color: #FFFF00;}


  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 31, 2005 07:29 AM|nokiko|LINK

    ok

    I am gettign a new hosting setup I hope over the weekend and then I will put my new css site live this will include my new free css download

    • one bare css skin to extend
    • bare css container to extend upon
    • a css only nlevel menu
    • 3 css files for the menu ( horizontal vertical left to right and vertical right to left)

     

     

    Armand Datema
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 31, 2005 12:28 PM|slope|LINK

    You are the king of Css nokiko.

    And look free too, that's the spirit. Playing with the Beta tells me you will make the community happy.[:)]

    -Follow your dreams!
  • ndr ndr

    None

    0 Points

    111 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 06, 2005 10:19 PM|ndr|LINK

    are these available for download now or soon? thanks
    Thanks, Chad
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 07, 2005 02:17 AM|nokiko|LINK

    yeah as soon as i have my new hosting setup I will put them for download
    Armand Datema
  • foolah foolah

    None

    0 Points

    22 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 08, 2005 02:58 AM|foolah|LINK

    lo, could you help me with one "bug" ?

    <div style="width: 500px; height: 400px; overflow: scroll; background: gray;">_</div>

    How hide that horizontal scrollbar ? I've tweaked it with another div z-index: 100; position: relative; top: -15px;

    but I dunno if there is better way to figure it out. Any ideas ? Thx ...

  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 08, 2005 05:29 AM|nokiko|LINK

    overflow:auto;

    scrollshows both scroll bars, autoonly shows the one that is neededso if you make sure that the content in here is no wider then 500px you will only have a vertical scrollbar

     

     

     

    Armand Datema
  • foolah foolah

    None

    0 Points

    22 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 08, 2005 10:14 AM|foolah|LINK

    lol thanx =)
  • kbain kbain

    None

    0 Points

    8 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 08, 2005 11:57 AM|kbain|LINK

    This sounds great! I have been working on a pure CSS skin and container, but having difficulty getting the container to work properly. I am happy with the skin because it works perfectly in IE & Firefox for the PC and IE & Firefox for the Mac. I would like to see how you structured your CSS for the containers because it is driving me crazy.

    Thanks for all the hard work on this.

    Kristofer Bain
    Dataentity, LLC
  • foolah foolah

    None

    0 Points

    22 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Apr 11, 2005 03:55 AM|foolah|LINK

    I've cool 3column CSS layout but tell me how to paste html here ? It want to render the code if I use ctrl+c ctrl+v and <code></code> doin nothing =(

    I wont write html here again by myself =)

  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Sep 15, 2005 03:49 PM|Designer72|LINK

    Just found this thread. I've been working on a CSS layout for a client, but realized I should make a base table with css in each basic area since they could be hard people to deal with. Anyway, I've been spending weeks trying to get DNN to make clean HTML and it looks like my lack of .net and .asp is going to be my downfall here. Does anyone have a place to download converted modules for XHTML and any other tools for generating clean XHTML? I was excited to hear the talk of a website we all could go to for help, but I haven't found one yet. What happened with that? It's a great idea! I don't want to give up on it all, but I have to move on so that I can pay some bills here. I want to believe that a clean DNN is possible to achieve. Thanx!
  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Sep 16, 2005 01:08 AM|nbc|LINK

    www.schwingnuke.com Armand has skins that use css based layouts and he has made an xhmtl version of default.aspx.

    Pure css layouts and CMS (not just DNN) don't always play nice because a lot depends what modules (and the html within them) is being injected into the page and where. I must say my approach is to use a div based layout for the page and a simple table to hold the content panes.

    In your case what is the particular result you need?
    Regards, Nick

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

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Sep 16, 2005 09:43 AM|Designer72|LINK

    I have started to just use basic tables for layout, but I want to eventually not use them. I don't mind using one big one, but usually everything within the table has to load before it will show which I don't like, but will deal with if I have too. I created a div layout that worked, but I didn't want to put it into production without testing it with many different modules. The main thing I'm asking for is anyone that can offer a download of any converted modules. I really think we should try to put together a site (as stated earlier in the thread) where we can put all this info together to try to get to a perfect XHTML DNN (at least with core modules.) The other thing is how to get the rest of DNN to spit out valid code. I know there are extras you can use to do this. What is the fastest for browsers and how do you use it? I don't know .asp or .net, but am good with html and css.
  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Sep 17, 2005 03:59 AM|nbc|LINK

    You mean re-write all the core modules to use css based layouts instead of tables? Ouch, but why not I guess.
    Regards, Nick

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

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Sep 17, 2005 06:41 AM|Designer72|LINK

    From what a few people have talked about in this thread they have already done it for many of the core modules. It's mostly changing from tables to unordered lists and taking care of the table injector (I believe that's what's been talked about). It would just be nice if these were offered to the general public instead of having to reinvent the wheel for each user.
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 12:17 PM|dnncreative|LINK

    Hello all,

    Thought I would revive this thread and see where people are at. - I've just created a simple CSS skin.

    This skin is the 'Simple Red Leaf Skin' - it is a pure CSS skin.

    The aim of this skin is to provide a clean, simple, search engine friendly and accessible skin.

    The layout is created using CSS and makes use of CSS for styling the fonts, menu etc.

    It does not use the SolPart menu. It uses the House of Nuke Menu.

    Accessibility: All fonts are based on percentages and can be increased / decreased in size within all browsers. This makes the skin accessible for users with visual impairments.

    Search Engine Friendly: The skin is search engine friendly.
    • There is a tag line at the top of the skin which allows you to enter a key phrase for your page. This is placed at the top of your source code enabling search engines to index your page based on your key phrase.

    • Within the source code, the main content appears before the menu. This allows search engines to easily gain access to your main content and index it. This also allows screen readers easy access to the main content.

    • The menu is CSS based and completely search engine friendly. All of the links can be read and indexed by the search engines.

    • The hacks are stored in a separate css file for hopefully future compatibility with IE7
    I have tested the skin in IE5, 5.5, 6, Firefox, Mozilla, Netscape and Opera.

    Within Opera I've found that the text is one level larger than all of the other Browsers, has anyone come across this and do you have any ideas?

    If people are interested in the skin, I will release it for free download.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 12:54 PM|slope|LINK

    Nice work. Loads fast. Less then 5 sec on dial up PSTN.

    Slimming the image will give you even faster loading on slow connections:-))

    Nice to see that Css catches up, not to mention a gesture for the visual impairments.

    -Follow your dreams!
  • empulse empulse

    None

    0 Points

    56 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 01:18 PM|empulse|LINK

    I have spent more than a hundred hours over the last couple of months wrestling with this and have come to a couple of conclusions:

    A 100% CSS skin will not work with DNN (And probably any other CMS) for two primary reasons.

    1. you cannot control which browser the user has - different browsers treat the same CSS styles differently. Example:  Given the following structure when a skin is rendered into a web page - a box within a box ( I know the syntax below is not correct, but there for illustration)

     <DIV id-container border=1px solid prettyblue >

        <DIV id=contentpane background-color: red>

                    Containers and a
                    bunch of content here,
                    a module or two, etc
                    maybe another module
          
        </DIV>
    </DIV>

    <DIV ID=bottom stuff>
       Terms     Copyright     Privacy notice
    </div>

    As content is added, a text/html module for instance, content panes will grow - get longer - as one would expect.  IE will "stretch" the containing box so that it always wraps around the interior box and pushed the 'bottomstuff" div down on the page.   FIREFOX will not - the inner box will overlap the exterior box. and the "bottomstuff" div.

    There are differences in how different browser versions handle margins, borders and padding which, as far as I can determine cannot be reconciled.  If one could determine the browser when a client initially hits the site, and  apply stylesheets specifically for that browser, you might be able to use a pure CSS , no tables, design, but i do not know of a way to do that with DNN.

    Reason number two is that unless the skin designer can control the size and position of the content, (specifically what a CMS is NOT designed for) you could , using absolute positioning, design a skin that would work well in most browsers. But the whole idea of a CMS is to let users control content.

    I have developed a workable compromise, which I will share when I am satisfied with the testing and finish samples and  a write-up.  Basically, it works like this, any page sections that do not contain content that will vary  (i.e. top of page stuff: logo, login, menu, etc. where the designer knows what will be there and how much geography it will occupy) is positioned using CSS (no tables)  - absolute works better than relative, but relative will work.  I use one table within a DIV (one row-  one, two or three columns) to contain the content that the site's users monkey with.  The table will "push" following content further down the page and stretch the containing boc, regardless of which browser.the user has.

    I have not yet (but intend to) dealt with vertical menus and I am still working on the bottom section (copyright, terms, etc). I haven't determined whether or not those will work strictly in DIVs or whether they will have to be contained within a table.

    Isn't this fun??
    James Brown
    Great Barrington, Mass USA
    www.empulsetech.com
    ----------
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 01:34 PM|dnncreative|LINK

    Thanks,

    Yes the idea was to give something to the community where they can easily put in their own image and easily change the menu colours to suit their own needs. I decided to use a 11kb image so that it was nice and clear, but it can be easily slimmed down or taken out if people want it to load even faster!

    Would be interested to hear if anyone has come across a fix for the opera problem or any ideas on what maybe causing it.

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 04:55 PM|nokiko|LINK

    well you can use 100% pure css layoutrs with dnn or other cms sites. Youjust have to make very sure that evrything fits in and most 3rd party modules are very sloppy with table code and closing tags.

    Furthermore you need the correct doctype for good css sites and the standard dnn default.aspx doesnt have the correct doctype for good css layouts. I have modded the standard default.aspx with an xhtml transitional doctype and that generally does the trick.

    With special widths sometimes ie adds extra pixels to the width so lets say i have in firefox

    width:50px

    I could add for internet explorer

    _width:53px;

    the _ trick isperfect for giving ie only . The skins on css.schwingnuke have been tested on 90% of the browsers and they generally look almost the same on most the popular browsers. But you need the specially prepped default.aspx. The same skin in standard default.aspx will blow completly.

    I also have a css menu for horizontal and vertical layout based on unordered list, I need to fix a few tiny bugs but its working very nicely. It has about 2 validation erros i recently foundout but that will be dealt with after I have finished my new module.

     

     

     

     

     

     

    Armand Datema
  • mathisjay mathisjay

    Member

    10 Points

    1338 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 04:56 PM|mathisjay|LINK

    Pure semantic CSS skins are possible but there are definitely some tricks (not browser hacks) you need to know to make them work.

    I will post some links to some samples once I get them cleaned up a little.

  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 05:19 PM|Designer72|LINK

    I have devoted most of my time in the last few months to figuring out a workable solution to tableless CSS in DNN.  I wish I would have documented all the stuff I went through, but it was hard enough to pay the bills and learn something new like this at the same time.  Anyway, I have made one major website in full production using CSS in DNN.  I haven't redone any modules, so they still produce tables (I would love to have them available to download to save me the time!), but everything else is tableless with a separate print and cell phone style sheet.  It even defaults to text only in older browsers.  The address is www.ppmgroupinc.com

    If it wasn't for SchwingNuke.com I wouldn't have been able to do it.  Thanks!  The only issue that isn't resolved is that the background CSS images seem to carry from one page to another due to something in the Schwing Add Attribute module, so the page sizes are about 4 times bigger than they should be.  Anyway, I hope this helps spark more interest in making more functional tableless designs.  I also have a great javascript skin and style changer if anyone is interested in making it into a module.

    I have another one in production that will blow my last one away.  I didn't know about the negative margin problem, so I have to recode part of it.  I have learned a TON more about accessibility in the last month and this next skin will reflect all the new things I've learned.  I'll post it here when I'm done.

    Thanks again for such a great forumn!

  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 05:35 PM|dnncreative|LINK

    The skin I've created has a left pane, top search engine keyword tab pane (above the logo) and a main content pane. As well as the footer.

    They all can handle varying lengths of text. - If you check the portal for the skin, I've set up a demo portal where you can view different lengths of text and modules in action.

    http://skins.dnncreative.com

    I've set this up using floats and have not used any absolute or relative positioning. I've also used a minimal use of hacks - pretty much to set the text to the correct size in IE5.

    The skin works in all of the browsers except opera where the text is larger than it should be, if I can find a fix that would be good, but if I can't I can put up with it as it doesn't affect the overall layout.

    I've found the decision between creating a default.aspx page specially for css an interesting one. - This skin uses the standard default.aspx file so that hopefully everyone can install the skin without problems.

    I found that when I set up the default.aspx file using the correct code as Nokiko has created that the action menus on the containers display at the top left of the page instead of on the container (think this was in firefox) has anyone else come across this?

    If you change the default.aspx file and you have several skins on several portals, will this affect the other skins that are created using tables?

    I've just got a couple of tweaks to make to the code before I release the skin to the community. I'm currently creating a print.css file for the skin so that when you click on print the menu is removed and you just get the logo at the top of the page with the content below it. - I've created the print.css file, I'm just trying to work out how to incorporate the separate css file within the skin - anyone done this previously?

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 05:39 PM|nokiko|LINK

    yeah solpart doenst work nice with xhtml transitional i havent had a change yet to make a nice javascript action dropdown with lot less code that does work but for my containers I use the dropdown based action menu that was in dnn212 and that works perfect and doesnt add weird javascript
    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 05:47 PM|dnncreative|LINK

    How do you implement the action menu from 2.1.2 into DNN 3 / 4?

    I seem to recall that in V2.1.2 I set up for a client the action menu so that it used drop down lists rather than the menu as a client had problem with the menu in their browser, is it this method you are using?

    Any tips appreciated. - Would it be easy to inform a user on how to set this up when they install the skin?


    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 05:55 PM|nokiko|LINK

    I dont know the correct html tag  but here is for ascx

     

    forst register it

    <%@ Register TagPrefix="dnn" TagName="DropDownActions" Src="~/admin/Containers/DropDownActions.ascx"%>

    then add it 

    <dnn:DropDownActions runat="server" id="dnnActions"/>

     

    If this one follows the correct namng standard the html container tag should be

    [DROPDOWNACTIONS]

    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 06:05 PM|dnncreative|LINK

    ah right, so you don't need to add anything to the core code, it's already in there for backwards compatibility?

    I will dig out some old DNN2 skins for the html version, but that makes perfect sense, many thanks, appreciated.
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • xddg xddg

    Member

    14 Points

    1864 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 30, 2006 11:37 PM|xddg|LINK

    The skin looks good but I see it's only a 2 pane skin, or is that my imagination?  I would like to see what can be achieved using the standard 5 panel skin that most people are used to - The house menu you used seems to work well - I think that's what it is, but again, is there any chance we can see 3 - 4 & 5 pane skins that are browser compliant and allow us to work with more than just the html editor.

    I've seen several nice looking skins, but they are all.2 pane, once you start using multipane it just throws bad hissy fits and chucks it in.  I wonder if you could use gifs and spacer to hold things together..

    But having said that, it seems that there is some progress and that's always good news.

    Nina Meiers

    Nina Meiers


    Free Skins & Containers by Nina Meies
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 03:18 AM|dnncreative|LINK

    Hi Nina,

    Yes this is just a 2 pane skin, this has been done as a test run to simplify the design process and to test for browser compliance. I'm particularly interested at the moment if anyone finds any errors in the skin. At the 2 pane level they are much easier to fix.

    The idea was to create something simple to get the ball rolling that was pure CSS that got rid of SolPart, was compatible with browsers, managed the hacks in a separate css file, and enables text re-sizing without causing overflow problems. The next project I am working on is to create something more complex.

    These were my aims:

    1) Minimal source code
    2) Much more Search Engine friendly design - enabling the important content to be placed as early as possible in the source code
    3) Text which can be displayed in various sizes within IE and all other browsers
    3) Fluid and flexible layouts which automatically expand and contract depending on the content - especially dependant on the size of the text - Many current DNN CSS layouts break at this point
    4) Experiment with containers - or completely dismissing the use of containers and finding other solutions for layout and content presentation (in process of)
    5) If images are removed can still operate correctly
    6) SOLPart menu - find another solution to minimise the source code generated and to create more search engine friendly links

    I have created a 4 pane skin (left, centre, right, footer) which works ok, but you have to watch out for the peekaboo bug, I blogged about peekaboo, IE7 and some of my experiments as I was creating the skin here:
    http://dnncreative.blogspot.com/

    The menu is the house menu - it's the professional version from snowcovered - all you have to do is upload the module (the skin object version), install the skin and the css for the house menu is stored in the skin, so once you apply the skin, the menu automatically appears ready configured, which is great for distributing the skin to the community as users do not have to do any complex setup configurations.

    In fact, even for clients, if I am implementing table designs, I may start incorporating the house menu rather than solpart as it's much more search engine friendly.

    I would try to avoid gifs and spacers within CSS design as that is heading back towards table design methods with bloated code. - I'm sure with a lot more experiment solutions can be found!

    These 2 designs are what I am eventually aiming to achieve within DNN, they are pure CSS and use content management systems:

    http://www.sitepoint.com
    http://espn.go.com/

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • xddg xddg

    Member

    14 Points

    1864 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 03:45 AM|xddg|LINK

    Thanks Lee that's some comprehensive feedback - the two pane skin for css only has been around since DNN2.1.2 days, so we're almost 2 year ahead already and still no further than the 2 pane skin... hmm.. must be that number 2 I think! Maybe it's jinxed!

    I do however, wonder about all the search engine placement behaviour and things like that - My xd site - (new one to be released this week, minus solpart) currently is messy in design, chaotic to find things an a perpetual discovery - especially for me since, when updating I discovered pages I forgot about [:O]

    However, if you do a search on "dotnetnuke free skins" on google, I'm number one, (well today I am, who knows next week) if you do a search on free dnn skins, I'm also up in the top 10 I think, the point is, my site is full of tables, solpart menu, and images all over the shop.. so I have my own opinions, and have been exactly where you are in in agonising over designs that are search engine friendly so when I see my site come up at number 1 out of 134,000 and I have a chaos in my design, I'm confused!!  Why does it come up if the design formatted with CSS in mind, has bloated tables and whitespace (due to dnn2, editor behaviour and such, just to name a few things)

    I have used the http://www.inventua.com menu as well, which is free, but also available for purchase, and found it's a good option but doesn't have flyout, and Armand's menu and css knowledge has also been very friendly. The house menu does seem to work well to, so it's a good option, but I've also just used the links skinobject on my menu on my new site. So, no third party products in that sense, but I have used another menu for the vertical links on the sub pages displayed.

    The thing I would like to point out too is that we can all travel down a path of creating pure CSS but until the infratstructure of DotNetNuke is changed to be managed this way, we will only have moderate success and will be always working around a pre existing issue of areas we can't control, and that is probably my only reason for not perservering myself at this stage, as I'm doing alot of ecommerce and high end custom work and I still am of the belief that corporate sites don't rate it high enough to be a priority.

    The difference with CMS products that have been designed with CSS in mind from the beginning may have a different standpoint but they are not DNN are they, and we're using DNN for different reasons that these other CSS rich CMS products seem to be lacking otherwise we'd not be using DNN would we?

    Having said that - again, I still think it's a worthwhile pursuit.. I think for now I'd like a bit more sleep in my life than agonising over the somewhat lack of true compatibility with browsers.

    I think there are also other elements that make sites search engine friendly and CSS is just a small part of the equation and often we get bogged down in the fine print. 

    I might have a forum on my site covering CSS but for now, I think I'd rather focus on the productivity of the site as a major element, and I'm glad this is an active thread because it's one of those jobs that requires a helmet on your head at times, to protect from banging on wall with frustration!

    Nina Meiers

    Nina Meiers


    Free Skins & Containers by Nina Meies
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 04:14 AM|dnncreative|LINK

    he he, yes I'm used to the head banging!

    Re: search engines, it is an interesting topic, and I too am in the top 10 search results for a DNN2 website that is for a keyword in competition with 1.7million and I know for a fact that this skin is not very se friendly!

    So I know that it is not all down to skin structure, but it does help. If you have implemented all of the search engine techniques for promoting your site, with fully optimized content, lots of links coming in etc. and so have all of your competition, the extra edge to get you ahead of the competition is to have a search engine optimized design - every element counts when you are in competition with millions of other sites for a certain keyword, especially for keywords with high competition - I personally regard 1.7 million as low competition.

    If the search engines can easily get to your content, ie. the main content is at the top of the source code you are much more likely to get ahead of your competition.

    I think that if I had implemented a better design for the DNN2 skin, I would be in the top 5 rather than the top 10 which can potentially be a big difference in traffic.

    One other reason for persuing CSS is for page size, I'm finding that in some of my table designs the page size grows way too big once you have added a few containers and content. With CSS I can keep the page size down to an absolute minimum. - Hence reducing bandwidth on my server while also loading much quicker for the visitors.

    The DNN infrastructure is not yet CSS compliant, but if enough of us keep head banging and persuing these avenues then we may build up a strong enough case for the core team to at least have a think about it! ;-)

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • mathisjay mathisjay

    Member

    10 Points

    1338 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 09:19 AM|mathisjay|LINK

    This site is still in development so there are still some tweaks being made but the skin 100% semantic HTML and CSS.

    dev.rainbowbabies.org

    (with the exception of some of the modules)

     

  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 09:24 AM|nbc|LINK

    Now thats very nice! And I clicked on the feel good logo (hint: have your sound turned on...)
    Regards, Nick

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

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 09:30 AM|dnncreative|LINK

    That's a great example, love the rainbow touch. - Little elements like this without being in your face with flashy elements work really well.
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 10:39 AM|slope|LINK

    @designer72
    Nice skin. Loads ok on slow connection. Great look. If you are up for comments I think even more slimming would make it super for even slow connections. But on dual ISDN or xDSL it loads really rapid.

    @Nina
    I belive you have some good inbound links, and after all you was one of the early skinners, so your page have been out there for a while. You are right that Css and semantic will not take you to the top alone, cause as always content is king as well. But if content is king Css/semantic must be next in line.queen maybe? dhaa

    @mathisjay
    Nice design on the rainbowbabies.

    @dnn creative
    You are right. What Dnn needs now is advocates of Css. If a large enough group keeps pushing for Css and better semantic eventually we will be heard eventually.

    @Anyone and all + css guru nokiko
    How is the asp.net 2.0? Have not had the time to play wit it. All our clients are still on 3.x and we will not start to move before july.
    A year or so ago we where told stories about how great asp.net 2.0 and Css would play togheter. also it would much easier to make strictly xhtml output. So is that a fact? Will we get better css in asp.net 2.0, or is there still lot of changes inside Dnn that needs to be adressed first?


    Sadly many or most(?) people fail to recongnize the power of Css. Both in better SEO and user availability. In my eyes the good design is not about setting everthing in position and make it look the same for all users, using all the tricks in the book like whitespaces, tables and yes nested tables. For me good design is for the end user to have choices, we are not all alike, someone have big ears other might have bad vision, hence need bigger fonts. For SEO I have only one thing to say. For many companies the problem is to be found on the net. Slowly many compaies dies a painfull death caused by a lack of traffic. you could spend all your top dollars placing ads, even using hired guns to make your keywords better. But when an easy trick is allready known, why would you not grab it with both hands? Embrace css, use it to the max and get your siteranking up.
    Seo is complex, and it does not help that the rules of SEO changes almost everday now. But ultimatly the things to remember is:

    • Content is king
    • Keywords selected carefully
    • Content that matches the keywords
    • Good samentic and crawler friendly links/menues [Css!]
    • Good inbounds is a plus, and bad outbounds is not.
    • No spamtricks, like whitelinks or missmatch btw keywrd/content

    Add more as you like.

    -Follow your dreams!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 10:55 AM|dnncreative|LINK

    Ok, I've now got the skin working correctly in the Opera browser.

    http://skins.dnncreative.com

    I changed the default.aspx file to use:

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

    and added closing tags, formatted it in lowercase etc.

    So that the browser uses standard mode rather than quirks mode.

    This then threw up problems for IE6 as I configure it for quirks mode. - But with a slight modification managed to get IE6 and IE5.5 displaying correctly. IE5 now displays the "Normal" class a size larger even though the text size for this is set to x-small. - It doesn't even alter when you change it to xx-small.

    I figure that it is better to have the latest version of Opera displaying correctly rather than an old version of IE, so I can live with that.

    Regarding the solpart menu on the containers I have changed this to the dropdown action menu, so there are no longer any issues from the skin being in standard mode.

    To do this in your .htm file all you have to do is add the [DROPDOWNACTIONS] token, you don't need to do anything to your .xml file.

    If you look in the source you will see that there is no mention of solpart now, and I have also stripped back quite a bit of the code in the default.aspx.

    Final step, which I would be greatful for if anyone can provide any advice:

    - I have created a print.css stylesheet which strips out the menu and just displays the logo and then main content at 100% width below it.

    How do I refer to this stylesheet and bring it into the code. - If you look in the source code you will see I have made an attempt with Javascript, this works for the iehacks.css file, but doesn't work for the print.css file. - Does anyone know how to implement this?

    Basically I want to call an external stylesheet set to: media="print" without adding this in the default.aspx file.

    Any thoughts appreciated. Thanks,


    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 11:02 AM|nokiko|LINK

    mm if you dont want to put it in the default aspx you would need to make a skinobejct that just inects the correct stylesheet code into the page
    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 11:05 AM|nokiko|LINK

    im going back to dnna nd css and releasing new stuff when I have finished my new module

    SchwingXtremeDirectory ( I will also use this as the main module on my resource site to power the downloads and display of all the code.

    I have a few new css menu tricks coming out, Im looking into dynamic flash powered by dnn ( I allready build one but that is not beginners friendly ) and someother goodies.

    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 11:08 AM|dnncreative|LINK

    Sounds very interesting Nokiko, looking forward to it.

    Do you know of an example for creating skin objects in this way? - This is something I have yet to explore.

    Thanks
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Jan 31, 2006 11:15 AM|slope|LINK

    nokiko

    SchwingXtremeDirectory ( I will also use this as the main module on my resource site to power the downloads and display of all the code.

    I have a few new css menu tricks coming out, Im looking into dynamic flash powered by dnn ( I allready build one but that is not beginners friendly ) and someother goodies.

     

    Always looking forward to the Css goodies nokiko. Email us when it is done.

    -Follow your dreams!
  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Jan 31, 2006 11:48 AM|cniknet|LINK

    Lee,

    Looks like @import is only supported at the beginning of a stylesheet on Mozilla browsers (AFAIK), so here's the amended script:

    <script type="text/javascript">
    if (document.createStyleSheet)
        document.createStyleSheet("<%= SkinPath %>iehacks.css");
    else
    {
        var newStyleSheet=document.createElement("link");
        newStyleSheet.rel="stylesheet";
        newStylesheet.media="print";
        newStyleSheet.href="<%= SkinPath %>print.css";
        document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
    }
    </script>

    I just did a quick test and it seemed to work on FireFox (don't have Opera)...please post back if it works for you.

    Here's a great tool that generates multi-column CSS layouts which you can use as the basis of your skin: http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php 

    And if you are using DNN 4, Microsoft has some decent XHTML templates you can hack for use with DNN: http://msdn.microsoft.com/asp.net/reference/design/templates/default.aspx

    Nik

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Jan 31, 2006 12:10 PM|dnncreative|LINK

    Hi Nik,

    Thanks for the updated script, appreciated. - I've tried it out, but it still doesn't pick up the print.css styles for some reason.

    I've tested the print.css file separately and that works ok. - I've updated the online version so you can see. Any other thoughts?

    Thanks for the links, look as though they are going to be very useful!

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Jan 31, 2006 12:55 PM|cniknet|LINK

    I'll check it out later today and post back here.

    I posted the link for the CSS layout generator, but be sure to also check out the parent site Position Is Everything...it's a fantastic resource for CSS, especially if you want to see working examples of cross-browser designs and learn about CSS bugs. While CSS Zen Garden is good for design concepts, PIE is a better resource, IMO for CSS layouts with dynamic content (a.k.a. DotNetNuke skins).

    Nik

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Jan 31, 2006 02:12 PM|dnncreative|LINK

    Hi Nik,

    Thanks that's appreciated. - I used PIE as a reference when creating the skin & it is an excellent resource.

    Here's another good resource I have come across today: List of resources for CSS hacks

    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Rainbow babies DNN site

    Jan 31, 2006 05:13 PM|Designer72|LINK

    Hello, I've been reading the tableless DNN forum and saw your post for the rainbowbabies.com site and I have to say that I have never been so impressed with a DNN site before. I was curious what all the steps were that you took to implementing it. I currently modify my default.ascx file for my tableless css code. Do you do the same? If you would like to trade templates, I have a static 3 column with header/footer, source ordered, works in all browsers with only a small glitch in Opera 6 and it has a non-javascript min-max that works in all browsers but IE for mac (no max). I also have a photoshop and fireworks template for the background. I've been working on it for 3 months and if you use Dreamweaver at all, it displays perfectly in it (never have seen that elsewhere yet). The problem is that it uses negative margins so DNN doesn't like it. It would be easy to convert probably and just loose the source ordering. I would like to see how others are doing tableless DNN skinning. I'm Designer72 on the forum and I posted my first tableless DNN site today which is www.ppmgroupinc.com. Have you redone the modules as well so that they don't use tables? I haven't done that yet, but would like to at some point. Anyway, congratulations on top honors for the best looking DNN site I've seen yet (and it's fast!) Have a great night, Jonathan
  • mathisjay mathisjay

    Member

    10 Points

    1338 Posts

    Re: Rainbow babies DNN site

    Jan 31, 2006 09:51 PM|mathisjay|LINK

    Thanks Jonathan (designer72).

    I wish I could claim all the credit but alot of it belongs to the people in this forum like Armand and many others who have discovered through hard work and many many hours what works best.

    The core skin template for dev.rainbowbabies.org is based off the ideas found at

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

    (look for the Boxed4CSS skin package)

    and also the excellent tutorial found at

    http://www.powerhousedata.com/Tutorials/tabid/95/Default.aspx

     

    I modified the Boxed4CSS design to clean up some of the HTML, optimize the code,  and make it a fixed width design.

    There are no broswer hacks and only semantic HTML in the skin template.

    I am putting together a write-up of how I did it and will also be releasing a downloadable skin package for anyone interested.  There is also plans for a write up at DNNCreative.com as well.

    As for the core modules, I have actually already rewritten several of the ones I use most often.  For example, I have a semantic HTML version of the Links module which renders nothing but <ul><li> elements.  You can then choose a .css sheet from a list to format the list vertically or horizontally and you can add you own .css files to style the list however you want.  I also have a FAQ module that works much the same (although it also uses the telerik callback controls to load items on demand).

    I am kind of rewritting the core modules as needed but I'm not spending alot of time on it since they are all seperate projects now which their own project teams.

    I would love to see all of the core modules redone using pure semantic/structural HTML as much as possible since I believe this is where the industry is headed and is the best practice we (DNN) should be promoting.

  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Rainbow babies DNN site

    Feb 01, 2006 02:34 AM|nokiko|LINK

    Designer72

    The problem is that it uses negative margins so DNN doesn't like it. It would be easy to convert probably and just loose the source ordering

    This is not completely true. http://css.schwingnuke.com is all negative margin based. The problem with this is that it will not work with the standard default.aspx because of the wrong doctype and validation issues. ON my site you can find a odified default.aspx with XHTML transitional doctype hat works great with negative margin based skins

    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Rainbow babies DNN site

    Feb 01, 2006 02:38 AM|nokiko|LINK

    mathisjay: thanks for the head up good to see you have taken all my advise and make something realy cool with it. Exact the kinda site that behaves well in a css driven environment . mainly textual data and nt too many weird 3rd party modules. This is where most issues come from, most 3rd party modules arent as correct with valid html tables etc.

    As for converting over standard dnn modules to be tableless dont go overboard on thsi there are only a few that could enefit from it. Links ( for better styling ) faq ( for better styling and adding of unobrosive javascript ) and a few others. Tables are good things as long as they are used fro what they originally were intended for. Tabular display of data.

    For most my modules I always use repeaters that way I have full control over the exact html that is outputted byt the module instead of datagrid tables

    Armand Datema
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Tableless DNN Skins

    Feb 01, 2006 08:19 AM|Designer72|LINK

    Nokiko: Is your transitional default.aspx for negative margins the same as you have listed before?  I use that in my tableless designs for DNN, but for some reason the one I'm working with now is giving me all kinds of issues.  It could be the way I did the min-max for all browsers.  I found a way last night that is painless and works without negative margins to make it work, so I will try implimenting that and see if it fixes it.  If it is different, could you please post the aspx for it?

    Would anyone be willing to create an area of common elements we all use to save us all time so that we can download ideas, code, modules (especially redone core modules), skins, etc.?  I love Nokiko's site, but it would be nice to have a public area for us to pull known-working examples from and have the ability to add to it (approved people!)  I would do it, but I'm already 5 projects behind.

    It's great to see this forum back in action again.  It couldn't have happened at a better time!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Tableless DNN Skins

    Feb 01, 2006 10:32 AM|dnncreative|LINK

    @Designer72 - I would be willing to provide a completely free area for us all to share info.

    I have some spare hosting available and can set this up on a separate SQL database to keep everything separate from my own work.

    I could set it up under a subdomain eg http://css.dnncreative.com

    Or if you think it should be another name i don't mind purchasing a separate .com name.

    Let me know your thoughts and I can have something up in a couple of days.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • timrolands timrolands

    None

    0 Points

    243 Posts

    Re: Tableless DNN Skins

    Feb 01, 2006 11:01 AM|timrolands|LINK

    Great discussion here, folks.

    I like the idea of having a place to share DNN CSS info, too. Lee, I am willing to help out, too, but it's cool if you have it covered. I am planning a CodeProject-like site for sharing DNN code, tips, etc., and CSS should certainly have a place there. It would not be ready in a couple of days, however!

    The skin looks good, Lee, and I would welcome any comments about HouseMenu and your experience using it. Always looking to make improvements.

    Tim

    Tim Rolands
    timrolands.com
    WriterGear.com
    House of Nuke
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Tableless DNN Skins

    Feb 01, 2006 11:13 AM|dnncreative|LINK

    Hi Tim,

    If people are ok with me setting it up then I would welcome as much help as possible from everyone. - I would prefer to give admin access to the main contributors to add content etc. and have the site as a community focused content based site.

    Or perhaps it would be better to use Scott McCullochs New Articles module, we can split the content up into categories easily & everyone can contribute articles easily - we can also then provide RSS feeds so that everyone can easily keep up to date.

    I found HouseMenu to be easy to set up, I coded the CSS menu for it in a matter of minutes. I opted for the static version as the dynamic version disappears in IE5.1 - This also happens with solpart (although I have created 1 solpart menu which does not disappear & I can't figure out for the life of me why I've managed to get it to work!)

    If everyone is ok with me setting the site up, let me know & I will start work on it.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Tableless DNN Skins

    Feb 01, 2006 11:20 AM|Designer72|LINK

    That sounds great!  If we can all work together and not keep trying to reinvent the wheel then we could really break some new ground with tableless DNN.  We also need to keep our ideas open to each other instead of worrying about "competition" taking our ideas.  I know I have seen many designers fail in this industry with that attitude.  We need to make everything available that we have and know if we are going to be successful with this.  Here is a list of my thoughts on what we should have...
    • Converted DNN core modules available to download with any needed instructions.
    • Third party modules that will help in any way.
    • Successful tableless skins download.
    • Documentation of failed attempts so that we know what to avoid.
    • Helpful scripts.
    • Wish list for anyone to tackle when time permits.
    • URL's of great resources.
    • Make it syndicated so that we receive updates in our RSS readers.
    I like the css.dnncreative.com name.  Let me know what I can do to help.  I don't have a lot of time, but I can email stuff if needed or post when it's available.  My email is jonathan@designinnovations.net if you want to email me direct.
  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 12:20 PM|cniknet|LINK

    dnncreative

    Thanks for the updated script, appreciated. - I've tried it out, but it still doesn't pick up the print.css styles for some reason.

    The cross-browser part turned out to be trickier than I had imagined, but I have it working. FireFox seems to choke when the "media" property is used, which is why the script was not working. As a workaround, instead of using a DOM-based approach, I just appended the requisite <LINK> element into the flow.

    My test case consists of four docs: default.htm, default.css (default stylesheet), ie.css (IE stylesheet) and other.css (Other browsers' stylesheet). I opened the HTML document with IE and FireFox and selected "Print Preview" on both to see if the correct stylesheet was selected. The results were as expected:

    Screen: IE=ie.css; FireFox=default.css
    Print: IE=ie.css; FireFox=other.css

    Here are the files I used --

    default.htm
    =======

    <html>
    <head>
    <link rel="stylesheet" href="default.css">
    </head>
    <body>
    <div id="test" class="Normal">Hello World</div>
    <script language="javascript">
       if (document.createStyleSheet)
           document.createStyleSheet("ie.css");
       else
       {
           var styleSheet = "other.css";
           var head = document.getElementsByTagName("head")[0];
           head.innerHTML += "<link rel=\"stylesheet\" media=\"print\" href=\"" + styleSheet + "\">";
       }
    </script>
    </body>
    </html>

    default.css
    =======

    .Normal
    {
       color: red;
    }

    ie.css
    ====

    .Normal
    {
       color: blue;
    }

    other.css
    ======

    .Normal
    {
       color: green;
       font-size: 24pt;
    }

     

    Nik

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • empulse empulse

    None

    0 Points

    56 Posts

    Re: Tableless DNN Skins

    Feb 01, 2006 12:27 PM|empulse|LINK

    Thanks to ensuing discussion on this thread, I have almost un-concluded that good, purely CSS skins are possible - although I have not yet proven it to myself.  A hosted discussion, article, etc. site devoted specificlly to CSS skin design, tips, tricks, hacks etc, would be wonderful. I enthusiasticly vote "YES" and am willing to help out with whatever would make the task easier.

    James Brown
    Great Barrington, Mass USA
    www.empulsetech.com
    ----------
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 01:41 PM|dnncreative|LINK

    Hi Nik,

    Thanks loads for researching this. - I've spent several hours looking at websites covering Javascript and CSS and couldn't find anything.

    I've applied it to the skin which you can see here: http://skins.dnncreative.com

    I've tested it in Mozilla, Opera, Firefox, Netscape and IE6 - All of them work except for IE6, which is pretty strange when you've found IE6 works ok.

    Any ideas why IE6 doesn't pick it up? - Could it be because IE6 picks up the iehacks.css file and therefore doesn't follow the 'else' statement and pick up the print.css file?

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 02:29 PM|cniknet|LINK

    The results you see are expected since the script does not define any print stylesheet for IE. I created a JS object called styleSheetPicker() to make this easier. Now, the code for setting the stylesheets can be:

    var picker = new styleSheetPicker();
    // IE stylesheets
    picker.ieScreen = "ie.css";
    picker.iePrint = "other.css";

    // Other browser stylesheets
    picker.otherScreen = "default.css";
    picker.otherPrint = "other.css";

    picker.render();

    You can grab the complete script including the code for the object from my blog post Dynamically switching stylesheets using client-side code.

    Nik

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 03:27 PM|dnncreative|LINK

    Hi Nik,

    That's brilliant, I've added it to the skin and all of the browsers work!

    For anyone else reading this post, within DNN you use "<%= SkinPath %>/iehacks.css"

    to specify the css file that is stored within your skin folder.

    I've added the Javascript to the bottom of the code within the skin so that the main content is as high in the source code as possible and the un-important content is at the bottom of the source code. - The size of the skin has grown from 11.7Kb to 12.5kb - But I think that size is ok!

    So the skin can now call upon separate hack css files and separate print css files as necessary. - I'm sure this will be a very useful tool for the future designs of CSS skins.

    Many thanks Nik,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 03:44 PM|Designer72|LINK

    Congrats Lee!  That's very exciting.  I didn't exactly follow where you are putting the <%=SkinPath %> though.  Is it right in the skin itself?  This is one area I'm rough on.  I've always modified my default.ascx file before for print and handhelds and then create skins in HTML and convert to ascx for the skins.  ascx is something I'm learning slowly as time permits.  Could you post an example area where it's being inserted?

    Question: What happens when someone has javascript turned off with this example?  I'm quite surprised at the stats on people without javascript on, which is a major topic with css+xhtml design.

  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 04:56 PM|cniknet|LINK

    Glad it worked!

    One word of caution about the SkinPath variable...

    <%= SkinPath %>/something.css  <= will work but will produce a double slash

    <%= SkinPath %>something.css <= will work and will produce only a single slash

    Some browsers may choke on the former, so it's best to use the latter.

    Nik

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 05:27 PM|nokiko|LINK

    for what its worth

    Nina and I have been working together on a site with everything related to skinning, videos tutorials articles. Everyting you always wanted to know and more

    A special section on this site will be devoted to css with css skins css tips and tricks special css skinobjects module tricks and more.

    So soon you can read all you wanted to know about skinning and especially css skinning since that will be my baby on http://www.skincovered.com I will handle most of the tableless skins part there This will soon go life

     

     

    Armand Datema
  • xddg xddg

    Member

    14 Points

    1864 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 05:46 PM|xddg|LINK

    Yes, we had hoped to get a couple of modules finished earlier to help in the process, but it's not run quite a smoothly like so many things, however, that being said it will be interesting to see different perspectives on it.

    I am expecting to launch xd again with new skins, but it will only be for free skin downloads and dnn in general, but skincovered will have and does have alot more content behind the scenes..

    Small word of adice off topic for anyone doing work locally - CHECK that your information can be exported.. modules that don't export do make it more of a headache to bring to live production if you're not working with synched dbs.. and having others doing development on one server, expecting to export modules.. Not all of them do.

    Since Armand is also one of the very knowledgeable CSS people and it's great to see people working together on projects.

    Should be interesting.. we've been peeking at some of the csszengarden skins and seeing what can be done, compromises still but nevertheless, that's been the direction we've been working on in creating different look and feel using css and dnn.

    Good thread this one to add to your favorites!

    Nina Meiers

    Nina Meiers


    Free Skins & Containers by Nina Meies
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 06:10 PM|dnncreative|LINK

    Hi Nik,

    Thanks for the tip, I will change that to a single slash.

    @Designer72 - the skinpath code is placed infront of the css file that you wish to call up. I placed all of this Javascript at the bottom of my source code. - Check out the source code of the skin at http://skins.dnncreative.com and you will see this has created the full path where my css file is stored.
     
    I guess when Javascript is turned off, all that will happen is that the special hacks for IE5, 5.5 will no longer work and the print version of the skin will no longer work, so it will not actually cause any negative effects. - Even in IE5 the only hack that is used is to size the text to the correct size, so the users will just see text in a slightly larger size, which will not cause any problems.

    I will be releasing the skin for free, I just want to document it and tidy it all up before I do, so you will be able to see the code in action.

    Nokiko and Nina - the css stuff sounds great & I'm sure it will be really useful. I will create a css portal for those that wish to collaborate and share ideas together on css and hopefully if we work alongside Nokiko and Ninas information we can put some comprehensive css info together to share with the community.

    Nokiko / Nina, if there is any information that you still haven't covered that you could do with help on, then feel free to contact me direct and we can share out the work load and ask volunteers to research certain areas of CSS etc.
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • timrolands timrolands

    None

    0 Points

    243 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 01, 2006 10:12 PM|timrolands|LINK

    As a gesture to the community and in support of Lee's free CSS skin (which uses HouseMenu), I have released a free PA for the skin object on my site. Download freely; no need to register. Head over to SnowCovered.com for the HouseMenu Professional package only if you need the source code or just want to support my efforts. The free PA version should be all you need to enjoy the DNNCreative skin when it's released.

    Cheers!

    Tim

    Tim Rolands
    timrolands.com
    WriterGear.com
    House of Nuke
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 02, 2006 04:45 AM|dnncreative|LINK

    Hi Tim,

    That's fantastic, many thanks, that's really appreciated,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 02, 2006 08:32 AM|dnncreative|LINK

    Hello all,

    I've just completed a 5 pane version of the Simple Red Leaf Skin!

    http://skins.dnncreative.com/RedLeaf5Panes/tabid/65/Default.aspx

    The Panes where you can add modules include:
    • Top Tag Pane - Above the logo
    • Left Pane - Below the menu
    • Content Pane
    • Right Pane
    • Footer Pane - Content which spans the entire width of the skin
    I've tested it in IE5, 5.5, 6, Firefox, Opera, Mozilla, Netscape and all of them work ok.

    I ended up creating this because I wanted to use a CSS skin for the http://css.dnncreative.com site that we are about to create and I needed a 5 pane version.

    It was an interesting challenge, and I made sure that the main content pane appears first within the source code, as well as keeping the accessibility features of being able to increase the size of the text without causing overloads.

    Let me know what you think,

    Cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 02, 2006 10:15 AM|dnncreative|LINK

    Hello,

    http://css.dnncreative.com is now online. I'm going to contact a couple of module developers to see if they will donate some modules in return for some sponsorship on the home page and once I have finished that we will be ready to start adding content.

    I'm looking for 1-2 people to act as moderators for the site, is anyone interested in this? - Basically to check the articles and content as they are uploaded and to check that people don't abuse the site etc.

    All contributors will have access to upload files and write articles. At first the moderators and I will check that the content is ok, and then like the forum, once a person has submitted a couple of items that are of decent quality they will be able to post without moderation.

    Does this make sense? - It just ensures that the quality of the content is high while still allowing everyone to contribute easily and quickly.

    If anyone has any suggestions please feel free to contact me direct: lee at dnncreative.com

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 03, 2006 06:37 AM|dnncreative|LINK

    Hello,

    The Red Leaf Skin is almost ready for release, I've added another container, which I created for the sponsors who are donating modules on the css site and I've also validated the code for both the html & css and just had a couple of changes to make.

    One thing that did pop up is the new Javascript that has been added for the stylesheets, the validator threw a wobbly on the Javascript.

    Is there a best practice method for including Javascript while still remaining XHTML compliant? - Should the Javascript be referenced to a separate file? - If so how do you go about this, I am not experienced with Javascript. Any ideas on this would be appreciated.

    You can view the validation report here

    The Javascript errors are from no. 20 to 33

    Many thanks
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 03, 2006 10:58 AM|dnncreative|LINK

    Hello all,

    Thank you to Will from Active Modules who kindly has donated his active forum module.

    The forum is now on the css site: http://css.dnncreative.com/Forum/tabid/55/Default.aspx

    It's un-moderated and I have also enabled the uploading of files so that people can quickly ask questions regarding CSS files etc. that they are currently working on.

    Please feel free to start using the forum, any feedback on how you would like the site to work and develop etc.would be great.

    Hope it's of some use, thanks,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 03, 2006 11:13 AM|Designer72|LINK

    It took me a LONG time to figure out how to call an external JS file from DNN, but I figured it out eventually.  I do mine in the default.ascx file, but you could probably figure out how to do it elsewhere.  This is the how it must be formatted...

    <script language='javascript1.2' defer type="text/javascript"  src="/Portals/0/Skins/javascriptfile.js"></script>

    As far as the validation goes, I'm not the one to ask.  I don't even know enough about javascript to be dangerous with it.

    Hope this helps!

  • cniknet cniknet

    Member

    46 Points

    1903 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 03, 2006 12:12 PM|cniknet|LINK

    Lee,

    Most of the report is misleading because the validator is parsing the code within the JS block as code within the page. This is why there are attribute flags raised. This can be fixed as follows:

    - Change the script tag to <script language="Javascript" type="text/javascript">

    - Mark the script as #PCDATA content as follows:

    <script language="Javascript" type="text/javascript">
    <![CDATA[
    ... script  ...
    ]]>
    </script>

    - Add a closing slash for the link element that is rendered:

    "<link rel=\"stylesheet\" ... "\" />";

    BTW, looks like the IE check in the script is going to have to be version-specific. The layout of the site goes nuts on IE7. I'll work it out and post the code.

    Speaking of the site, I am glad to support any community efforts for skinning resource sites, so I will sign-up and contribute as much as I can (including any Speerio module you would like to have). Also, skinning enthusiasts will be glad to learn that a DotNetNuke Skinning project and related resource site are also in the works and we hope to have details available about both very soon.

    Nik

     

     

     

    Nik Kalyani
    Speerio, Inc.

    [DotNetNuke and ASP.Net solutions here]
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 03, 2006 03:15 PM|slope|LINK

    dnncreative

    Hello all,

    Thank you to Will from Active Modules who kindly has donated his active forum module.

    The forum is now on the css site: http://css.dnncreative.com/Forum/tabid/55/Default.aspx


    Lee

     

    Nice. Look forward to have a dedicated css forum for Dnn. May I suggest a sligt change in forums skin? just to make it blend better with the site?

    Kudo to active modules.

    -Follow your dreams!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 05, 2006 11:36 AM|dnncreative|LINK

    Hi Nik,

    Many thanks, those changes have worked well, it now just produces 19 validation errors.

    re IE7 - how have you set it up on your computer, have you got a separate installation that can run alongside IE6? - I was put off installing it as I didn't know how it would affect my setup.

    In the iehacks file I have set it up so that IE5 reads certain hacks and IE6 reads other hacks, so I'm guessing one of these is being read by IE7. A version specific script would certainly help for future browser updates.

    Your support will be appreciated Nik, looking forward to getting the site fully up and running!

    - Slope yes that's a good suggestion, it's on the task list, but my main concern is to just get everything up and running so that we can all start adding content. - If you have a bit of spare time, feel free to send me a forum skin colour scheme that will work. - Will even suggested that it should be easy to convert the forum skins into pure CSS skins.

    I will keep you posted with the progress, cheers,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 06, 2006 05:19 AM|dnncreative|LINK

    Hi Nik,

    Just following up, after a bit more testing, I discovered that with the CDATA element in place that the stylesheets do not get called up.

    Check this page http://skins.dnncreative.com/Home/tabid/53/Default.aspx which is using the 3 pane skin with the CDATA statement: - try print preview, you will see that the css is not called up.

    This page however http://skins.dnncreative.com/RedLeaf5Panes/tabid/65/Default.aspx , I have removed the CDATA statement, which is the 5 pane skin and the additional css is called up.

    On a further note, I think I have fixed the IE7 problems, check the 5 pane skin. - I've had to implement IE5 hacks within the iehacks file and then reset them for IE6 and above, which is kind of messy placing hacks within a hacks file!

    Thanks,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 08, 2006 02:31 AM|nokiko|LINK

    try this generator for css skin starter andbuild and beautify from there

     

    http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

    Armand Datema
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Feb 08, 2006 07:53 AM|slope|LINK

    Sure many will find this usefull. But as I see it, would be even more usefull if one could decide for other then px. Say that outdiv is 80 % wide, that works on all screens just as a fixed px will.

    And little font styling as far as I saw.

    -Follow your dreams!
  • krsouthern krsouthern

    None

    0 Points

    90 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 01, 2006 12:43 PM|krsouthern|LINK

    Hi,

    What would be the best way to create a tabular type layout within the contentpane, without just inserting a table inside a html module? Is it possible to use Divs and CSS to achieve this type of layout:


    -------An Image------
    some text -- some text
    some text -- some text

    As the people on this thread seem to know the score on css/dnn I thought I'd see if you have any suggestions as to best practices for this type of layout.

    Thanks
    Kieran


  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 02, 2006 02:44 AM|nokiko|LINK

    mm I dont know about your css layout but you could try something like

    <div>

    <div>text</div>

    <div style="float:right;"> text2</div>

    </div>

    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 02, 2006 05:57 AM|dnncreative|LINK

    Hello all,

    The 'Simple Red Leaf' CSS skin is now available for free download.

    Thanks,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 02, 2006 01:34 PM|trond.rud|LINK

    I am new to this forums so please be gentle with me.

    I have discovered Dot Net Nuke 4-5 months ago. My first headache was getting Css to play along nicely. I have read all threads with css topic here on this great forum, followed many great links and even downloaded some of the free css skins. Still things do not always run as I expect them to do. And I have put a lot of effort and hours in learning this, might just be slow learner but please give me a hand here. I am working with Dot Net Nuke version 3.1. Have not started with the newer ones yet.

    Maybe all this is because I am fairly new to asp.net as well, just started to learn it last summer. Earlier I have been doing plain html and css layout, sometimes with tables, but preferable without them. So my css and html feel is at the top. Rambling here sorry for that.

    1. Can I make some tweaks to modules so they put out a nicer code? The most used module would be text/html for my part. Can I make it display divs and css rather then tables?
    2. Working with html and css I have considered the markup and semantic of highest importance. How can I use the html/text module to display H1, H2 etc. for my headings?
    3. When using the text/html module, I find myself trying to get it to understand for instance float. What this means is that I try to put in images, and have the text float to the left of the images. No matter what I try I can not get this to work with Dot Net Nuke.
    4. Does it excist maybe a third party text/html module to buy that handles all this?
    5. Negative margins sort of mess up the layout when I upload a html skin. Yet the skin will work in all my test browser if I make it a regular html/css template. Any solutions for this? Maybe someone have made skins like this, that I can see?
    6. I have seen a demo at school of people setting up a self made portal created with Asp.Net version 2.0, that handles negative margins and they even told us that the html code would validate for xhtml tran 1.1, maybe even strict. According to the team that help the presentation, this is due to the fact that Microsoft follows the standards more with Asp.Net 2.0, compared to the earlier 1.1. Is this possible with Dot Net Nuke version 4.02?
    7. I would consider paying good money for any modules that will allow for output code that validates. If modules like this is made a tip would be nice.

    As I said in the start, I am new so be nice. If all this does not belong in this thread but rather in own thread just tell me so and I will move it.

  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 02, 2006 05:49 PM|nokiko|LINK

    1. If you have the code you can create modules that output better code. I can see a few of the core modules that could use a semantic rewrite

    2. You can create a container with <h1> </h1> and in there drop the dnntitle. this will then render a span inside a header and thats valid

    3+4. I use the rad editor from telerik.com they output valid xhtml.

    5. negative margins dont behave very well in quirks mode. YOu need other doctye ad more valid default.aspx. http://css.schwingnuke.com

    6. its true that asp.net 2.0 handles webstandards better but so far as i know dnn4 still works in quirksmode

    7. well i have a module on snowcovered where youc an create any kind of master detail datastructure using templates. So you create your ow user deifinedd tables and becaause of the custom repeaters and templates you can output just the code you want for a simple data display a amster detail data display ( one to one and one too many ). I dont ahve the url handy but look for schwingcontent

     

     

    Armand Datema
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 02:35 AM|trond.rud|LINK

    Ok. I will go more in detail.
    1. Does it excist any rewritten modules for sale at the moment? If not, this might be a buisness opportunity for me as well as others.
    2. Sure a container would give the most importent heading, but what about sub-heading? H2 and maybe even H3 etc, where do I put them?
    3. Will I be able to use the rad editor in the same way as I use text/html module? Inside Dot Net Nuke user interface, rather then inside Visual Studio? Will it install like a module in Dot Net Nuke without writing a lot of code?
    4. Any other options that might install directly as a module with xhtml output code?
    5. How would one start to rewrite the most common modules to output valid xhtml code, and will this even be possible to do for a single person, or do I need a larger team to manage such a task?
    6. Will there ever be a Dot Net Nuke that put out xhtml valid code? When doing Css reading on the forum I have read posts dating back to 2004, back then they where talking about what place Css had. And now two years later it seems that nobody knows what place Css has in Dot Net Nuke. It does seem to me that there is not much support for Css among the people on this forum, and even people that have a place in the coreteam seems to think less of css, below is cut from another post by one coreteam member and a moderator:                                            

      jbrinkman

      I have to say after having spent a lot of time trying to develop, tableless skins, that I just can't justify the time it takes to make it work correctly.  If I had to do it over, I would have used more tables to begin with.

      My problem with a pure CSS solution requires a LOT of experience.  You have to know the IE Box Model inside and out, something I still struggle with.  You also need to understand the various bugs which affect each browser.  CSS design seems to be where HTML development was in the late 90s.  Each browser has varying levels of CSS support.  Each one has slightly different CSS bugs, and the CSS standard still does not fully support the most standard site layouts.  For example, when laying out a 3 column design, with equal length columns, you have to go through a lot of gyrations.  Some of which require you to play around with floating divs and the order of the divs in your skin.  This can have adverse impacts on other aspects of your site.  Like, if I am forced to move my center column down because of the ways floats work, then this can impact search engine rankings which tend to give more weight to content that is higher up in the html.  This is also not very friendly to sight impaired visitors whose screen readers will read all of the content from the left and right columms before getting to the meat of the site.

      So my recommendation is to learn CSS and use it where it is appropriate, but don't create an arbitrary requirement to eliminate all tables.  You will spend a lot of time to get your design to look good in all browsers and in the end, the only one who will really know about your "pure" design is you. 

    Telling what the future will bring might not be to everyones liking, but I wish I had a better knowledge of what direction this open source software is moving. And what choices the coreteam make has adirect effect on what choices I will make. There are other CMS applications out there which I have yet to explore and learn. Some of them might have more of the things I am looking for for this particular project, in other words better Css support. If people know of CMS applications that does play nicer with Css feel free to enlighten me. At this point what I need is a CMS with true Css capabilities, preferable with xhtml validation. And all other functionality will just be a bonus for me.

    Finally I will say that I understand that there have been put tremendous effort and time into this CMS project by both the core team of Dot Net Nuke but also by the active community. For that I salute you all. I am truly amazed by all the features and possibillities laying within the framework. And I hope that I will be able to use Dot Net Nuke for many of my future projects for many years to come.
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 02:57 AM|trond.rud|LINK

    One more thing for the text/html module. one would think that the html view of the module would let you use embedded Css for all of the things you put in there. But as far as I can see this is not the case. I guess the embedded Css gets overridden by the skin.css or portal.css. How can I prevent that?
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 03:19 AM|dnncreative|LINK

    The Text/HTML module adds the "Normal" class to everything from within the module, which can cause problems for CSS skins.

    You can remove the code for using the Normal class:

    Within your install if you go to: \DesktopModules\HTML
    and select the HtmlModule asp.net file you will see in the code it states the Class="Normal" - remove this and it should work.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 03:36 AM|dnncreative|LINK

    In response to the other questions:

    1. Don't know, and wouldn't really think this was a business opportunity as no.5) For most modules it's not too hard a task to get them to create valid XHTML compliant code - just look at the .ascx files within the module, change the capitals to lowercase and close all tags - eg. <br> should be <br/>
    There's an article here on creating XHTML compliant code

    - That's creating XHTML compliant code, not changing a table based module into a CSS layout based module which can be a harder task.

    At http://css.dnncreative.com I've now got some time to finish it off and the idea of this site is that any tweaks that we make to modules, we upload to this site and share the code to make it an easier job for all of us.

    2) H2 and H3 wouldn't you just use them as in any ordinary site / skin? You can place them using the Text/HTML module and format them from within your skin.css file.

    3) Don't know about rad editor, but it will replace the FreeTextBox editor that comes with DNN. - This is the editor that appears when you use the Text/HTML module.
    I personally use the FCKEditor, which is also a good editor & XHTML compliant - just look on the site for install instructions, it's pretty easy.

    6)Don't know, it's an interesting issue. - If you want to create a totally accessible site, you need to go the CSS way. Accessibility is becoming more of an issue for web design and it's something we should all be preparing, learning and implementing, especially when sites such as target.com are getting sued for creating an inaccessible site.

    There has been interesting comments from the web development community on this which unfortunately demonstrates an ignorance to accessibility. This is well summed up in Bruce Lawson’s blog

    The same question has also just been asked here

    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 04:03 AM|trond.rud|LINK

    Ok. That will give me the ability to use embedded Css? But how will I be able to force the text/html module to make valid xhtml code output? Is there any way to modify the source code to make for valid xhtml code? Anybody went down this path? Or is it to many depandacies to make it work? Is there other core modules that use the text/html module in some way that might get affected in a bad way if I try to make valid xhtml?
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 05:50 AM|nokiko|LINK

    freetextbox screwes up nicely html you layed out completely.

    I dont know about other editors like teh free fkc editor but i use the telerik skinobejcts and anything I type in get saved that way.

    if you type <div class="mydiv"></div>  its get saved as <div class=mydiv> in the freetexteditor amongst other things

    Armand Datema
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 08:14 AM|trond.rud|LINK

    Well that is sweet. So with the rad editor I can just easily make a separate css to be used with whatever text I put in using the rad editor? But will I need to do it within Visual Studio, and then compile, can rad editor easily be included into Dot Net Nuke as a ordinary module so I can use a webbrowser interface to maintain and update the project via rad editor? I had a look on their website, but it does not seem to be working with Dot Net Nuke, at least not without mods.
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 03, 2006 08:56 AM|nokiko|LINK

    http://www.telerik.com/dnn/Support/radeditorproviderinstallation/tabid/47/Default.aspx
    Armand Datema
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 04, 2006 06:26 AM|trond.rud|LINK

    I will download and test the rad editor along with the free fckeditor. As things seems now this will lead me where I need to go.

    nokiko

    It is true that asp.net 2.0 handles webstandards better but so far as i know dnn4 still works in quirksmod.



    So to the newest version of Dot Net Nuke the 4.02, will I be able to do some tweaks to the source code to loose the quirksmod? Have people tried to get the latest version to do better with Css? And why is it that when asp.net 2.0 will follow the standard Dot Net Nuke 4. will not? Is it due to some legacy code lines? Or a matter of the coreteams thoughts of Css? Maybe a general thought of Css incapabilities? Feel free to give me your thoughts on why Dot Net Nuke still not let us use more Css as it ships.

    Is there any hard bezerk coders that know or might have an idea of the amount of work to make Dot Net Nuke follow webstandards? Is it doable code fix?
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 04, 2006 11:19 AM|trond.rud|LINK

    After reading up on a link I missed in this post, on the Dot Net Nuke forum
    about valid html or valid xhtml in Dot Net Nuke might be in the future, but I guess there is no telling when the coreteam will adress that. Well I guess for one of my semester-project I will be using plone.org as a framework, and make it fit my specs. For me being a student Dot Net Nukes validation is not a big issue. I have no clients breathing down my nack, nor have I made any promises about standards to anyone. So in reality I could care less about Dot Net Nuke and valid output-code. Yet I must say I am somehow amzed by the fact that it seems that many buisnesses has made Dot Net Nuke such a big thing in there core buisness strategy. Some actually have their buisness as a whole based on Dot Net Nuke. How do you all manage to get around the fact that the framework you base your solution on does not validate at all? And will not validate at all for an indefinatly period of time? Is there no demand for valid code in the real world? Is webstandard something they push in university, and customer and larger corporations really do not care about this?

    However it also seems that are a small fraction of the community that do care. As I mentioned before some of the Css and xhtml posts in this forum dates back to the year of 2004. Two years later this is still an issue not even on the roadmap of the Dot Net Nuke website. Could it be that I do not see the bigger picture here? And when there is forces in this forum that would be excited with valid code and xhtml ability output-code, why is there not a grup of people working togheter making this happend? Correct my if I am wrong, but making the needed changes to the framework and the modules supplied with the framework can not be that big of a task? It must be manageable by a team of say 6-10 people? I for sure would join, and it seems there so much demand for this type of work that I am sure others would too. This could be done completly without involving the coreteam at all, after all I am sure they have their hands full with more importent matters, or I belive they would have adressed these issues a long time ago. So either this group of people could put togheter a fork of Dot Net Nuke, and release this under new name, like we often see in the Linux/unix world. Or if someone in the core team are willing to, the group could work togheter with the core team so this project does not get separeated/sidetracked from the original Dot Net Nuke. It could probably be done fastest and with minimal timedelay done as a saparete project, but then we could be writing something that will not benefit from the rest of the communities brainpower and the rest of the excelent work the coreteam do.

    If others are willing to dedicate some spare time and some brainpower to make a version of Dot Net Nuke that validate with html, and xhtml let me know. Answer me here in this post or send me pm or email. And we can see and talk about how we can put togheter a group of people to adress this once and for all. We can have democratic process in choosing whom is to lead the project. I am a master student, but due to my age I have not much work experiance. So I am sure there are others with management experiance that could lead this project. If not I do have the theoretic background to lead a group like this. But as I said not much practise.

    Reading the license we can do this legally with or without the cooperation of the core team. The benefits of doing this with the coreteams blessings will be tremendous, so I really hope they can manage to let this group work as the other side projects of Dot Net Nuke.

        * Need better Css capabilities?
        * Have an urge for valid output-code?
        * Tired of waiting around for things to mature?
        * Could really do with faster loading page time?
        * Have one or more braincell we can put in a wide working cluster?
        * Are a sharing and hard working person whom would donate some brainpower to this?
        * Feel like taking matters into your own hands to get the job done properly to meet own demands?

    Well stop thinking and waiting for things to mature. Join now and togheter we can make this happend. In true open source nature, no task is to overwhelming. Start writing that email!
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 04, 2006 11:23 AM|Designer72|LINK

    It truly is frustrating working with DNN when trying to do tableless design.  I have been working at it since the first of the year and have made some headway, but still not in a reliable way.  I never did get it to validate.  FCK editor does a very nice job of creating valid XHTML.  Since I don't plan on having multiple sites on the same installation I hack the entire site to get it to do what I want.  Here is a list of things I do...
    • Use nokiko's XHTML default.ascx file.
    • Get a subscription for his site for a year to get the XHTML modules he makes.  The members css menu is a must have.  No other menu can touch it for accessibilty.
    • Empty out your skin.css and portal.css.  Divide the css from those into site functionality and admin css and add those into your master css files (site and admin).  There is no reason to call all the admin css into your site when you don't need it.  It adds quite a bit of size to your overall download. Make sure you keep a <p></p> in each empty css file.  Otherwise, NN4 will never load your page.  Apparently it has issues calling up a blank css file.  I have NN4 load a text only page and this has worked well for me.  See www.ppmgroupinc.com for an example.
    • I put all my css calls for screen, print and handheld directly into my default.ascx file.  That gives the widest range of functionality to all people.  If you do it in a javascript then over 20% of the market won't view it right because their javascript is turned off.
    • Make tableless modules with your h2 and h3 tags in them.  Make sure you create one with position: relative and one without if you are doing tableless designs.  With PPM Group I have some customer pages with their logo at the top of the Text/HTML module and when I have the logo it makes the text under it disappear in IE6.  If I make it position: relative it works.  Just one of those quirky things in IE6.  If that doesn't work I put position: relative as an inline style for both logo and paragraph, and that always works.
    • Lastly...pray it works.  I haven't found  rhyme or reason why the sites sometimes work and sometimes don't.  The last one I created was a total waste of time and I never did get it to work right.
    I unfortunately had to break from DNN recently because of the lack of direction into standards based sites.  I don't see anything on the horizon for it getting any better and with lawsuits starting to come into play I can't afford to NOT to embrace XHTML standards.  I just started using Joomla which has a clear path going toward standards (already there in most cases).  I can also create a site in a fraction of the time it took in DNN, and completely tableless with it all validating.  I will still use DNN in some large projects, but I'm not looking forward to it.  I really hope things get better for DNN, but I have a business to run and I can't keep wasting time with it, otherwise I won't have a business anymore. 

    Good luck with you DNN standards journey!
  • mrswoop mrswoop

    Member

    20 Points

    2211 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 04, 2006 05:04 PM|mrswoop|LINK

    trond.rud

    However it also seems that are a small fraction of the community that do care.

    So either this group of people could put togheter a fork of Dot Net Nuke, and release this under new name, like we often see in the Linux/unix world. Or if someone in the core team are willing to, the group could work togheter with the core team so this project does not get separeated/sidetracked from the original Dot Net Nuke.

    Actually, this is something that quite a lot of people care about.  But if you are studying up on this topic, you'll also understand that it is not entirely simple or "clean".  One simply issue is that Microsoft controls don't always generate compliant XHMTL... there's not much we can do about that.  That's not an "excuse", but the generalization that its not important or that its easy isn't entirely accurate.

    Now, its not necessary to "fork" DotNetNuke to work on this.  In fact, we rely heavily on folks working on enhancements in discreet projects in order to be able to isolate the changes required so that they can be carefully rolled into a project along with other changes ( coming from other discreet projects ).  But this can require more discipline than folks want to employ.  It is hard to figure out how to migrate an existing installed base from one place to another without adversely impacting them... but this is priority number 1 for us when assembling upgrades.

    If you can assemble a team which can make contributions toward helping DotNetNuke become more compliant, I'm sure that would draw a lot of appreciation.  But be prepared for the practical necessities of design review in the context of an existing codebase.

    Cheers... and good luck!  We'd love to see what you can come up with.

    Scott Willhite

    It is only with the heart that one can see rightly... what is essential is invisible to the eye.
    ~ Antoine de Saint-Exupéry
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 05, 2006 06:10 AM|trond.rud|LINK

    mrswoop

    Actually, this is something that quite a lot of people care about.  But if you are studying up on this topic, you'll also understand that it is not entirely simple or "clean".  One simply issue is that Microsoft controls don't always generate compliant XHMTL... there's not much we can do about that.  That's not an "excuse", but the generalization that its not important or that its easy isn't entirely accurate.

    Now, its not necessary to "fork" DotNetNuke to work on this.  In fact, we rely heavily on folks working on enhancements in discreet projects in order to be able to isolate the changes required so that they can be carefully rolled into a project along with other changes ( coming from other discreet projects ).  But this can require more discipline than folks want to employ.  It is hard to figure out how to migrate an existing installed base from one place to another without adversely impacting them... but this is priority number 1 for us when assembling upgrades.

    If you can assemble a team which can make contributions toward helping DotNetNuke become more compliant, I'm sure that would draw a lot of appreciation.  But be prepared for the practical necessities of design review in the context of an existing codebase.

    Cheers... and good luck!  We'd love to see what you can come up with.



    Thank you for the feedback Scott Willhite. Appreciated and valued, you being core.t.

    As far as I am informed, Asp.Net 2.0 will let you have valid output-code. This I have seen with my own eyes. So that makes you wonder why Dot Net Nuke takes advantage of that. I honestly started to belive the coreteam did not have faith or belives in Css, due to some of the posts in this forum. That is why I thought a Dot Net Nuke fork would ease up on the politics. If we formed a formed with one goal we could work in peace without reporting or meeting deadlines. Making a fork would let us care less about roadmaps, politics, legacycode, code working along with others code and "noise" like that. The downside would be a dramatic loss of brainpower. Clearly we would then remove us from the original project, and probably not to many people would have followed, at least not in the start. So we would have a hard time when times comes to upgrade.

    When I now see that you indicate even the core team would appreciate an initialisation of the process of getting Dot Net Nuke to validate I can only say to the other reading this post: Join now. email, pm or post here. Let us get a team working on this matter once and for all.



  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 05, 2006 07:23 AM|nokiko|LINK

    Hi

    well let me start by handing out my latest secreet in how to build better standardbased sites.I have a few tutorials coming up on my site on how to use them but here are soem of the thisng i have been doing with this script library http://www.jquery.com

    in a complete tableless design automaticall inject on table because of xbrowser issues with xternal content i dont ahve control over

    do a faq module rewrite and use nothing but a few lines of this script to get all li tags with the class question and al li tags with the class answer and attache onclick event handlers to the question li and use that to open the correspondin question tag

    get all the image tags at one and apply on clas to them sitewide and use that to have margin and padding for each image no matter in which part it was edirted later on.

    loop through all the image tags of a given image module and ruen this into a simple gallery module just with javascript alone.

    use all the css2 and css3 attribue style posibillities that always was availble in the good browsers but never in ie

    for a very specific layout, build as usual works perfect in firefox screws up in internet explorer. After the page is fully loaded get  the dimention of each of the blocks on the page and dynamically make the site a absolute positioned on in IE alone.

    implement other libraries like prototype, moo.fx, scriptaculaou, behavaiour and more

    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 05, 2006 10:00 AM|dnncreative|LINK

    Hello All,

    As requested, the DNN CSS Resource site is now running: http://css.dnncreative.com

    There is a section for adding articles, resources etc.

    A section for uploading documents.

    And then a forum area for discussion.

    If you have already created a tutorial on your own website, feel free to create an intro text section and add a link to your tutorial.- have a look at this page: CSS articles.

    Also, if you have CSS skins that you have created but don't want to upload them direct to the site, you can add them as a link in the Resources section.

    Hopefully this can become a central area to enable us all to share articles and resources and easily search and find the information we need.

    If there is anything else you need from this site, such as additional categories etc. then just let me know, thanks,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 05, 2006 05:04 PM|slope|LINK

    trond.rud


    However it also seems that are a small fraction of the community that do care. As I mentioned before some of the Css and xhtml posts in this forum dates back to the year of 2004. Two years later this is still an issue not even on the roadmap of the Dot Net Nuke website. Could it be that I do not see the bigger picture here? And when there is forces in this forum that would be excited with valid code and xhtml ability output-code, why is there not a grup of people working togheter making this happend? Correct my if I am wrong, but making the needed changes to the framework and the modules supplied with the framework can not be that big of a task? It must be manageable by a team of say 6-10 people? I for sure would join, and it seems there so much demand for this type of work that I am sure others would too. This could be done completly without involving the coreteam at all, after all I am sure they have their hands full with more importent matters, or I belive they would have adressed these issues a long time ago. So either this group of people could put togheter a fork of Dot Net Nuke, and release this under new name, like we often see in the Linux/unix world. Or if someone in the core team are willing to, the group could work togheter with the core team so this project does not get separeated/sidetracked from the original Dot Net Nuke. It could probably be done fastest and with minimal timedelay done as a saparete project, but then we could be writing something that will not benefit from the rest of the communities brainpower and the rest of the excelent work the coreteam do.

    If others are willing to dedicate some spare time and some brainpower to make a version of Dot Net Nuke that validate with html, and xhtml let me know. Answer me here in this post or send me pm or email. And we can see and talk about how we can put togheter a group of people to adress this once and for all. We can have democratic process in choosing whom is to lead the project. I am a master student, but due to my age I have not much work experiance. So I am sure there are others with management experiance that could lead this project. If not I do have the theoretic background to lead a group like this. But as I said not much practise.

    Reading the license we can do this legally with or without the cooperation of the core team. The benefits of doing this with the coreteams blessings will be tremendous, so I really hope they can manage to let this group work as the other side projects of Dot Net Nuke.

        * Need better Css capabilities?
        * Have an urge for valid output-code?
        * Tired of waiting around for things to mature?
        * Could really do with faster loading page time?
        * Have one or more braincell we can put in a wide working cluster?
        * Are a sharing and hard working person whom would donate some brainpower to this?
        * Feel like taking matters into your own hands to get the job done properly to meet own demands?

    Well stop thinking and waiting for things to mature. Join now and togheter we can make this happend. In true open source nature, no task is to overwhelming. Start writing that email!

    Hmm. Time is a shortage every now and then:-) And also I am starting my own shop now, between my day job and family.

    But I would like to hear more about this team. I too belive there is a need to resolve these Dnn "flaws". I do not yet know how much time I can contribute to the project but surely I can do some grunt work. How many others have agreed to be a part of this? Is there any spesific tasks divided on the group, or are all in spe?

    Let me and others know how you plan to manage the team, and what chores will need to be done when. Also you might wanna get in thouch with the other hardcore css people on this forum. Some of them might be able to join. Don't know how familiar you are with people on the forum, you having just around 10 posts here and all. So a search for css and xhtml, and you will see whom are involved in those threads.

    Maybe a post in the dnn official sites forum will help you, as the move to a dedicated forum on the official dnn site has just started. And just to be sure you could also post a new main thread in this forum.

    -Follow your dreams!
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 06, 2006 07:11 PM|trond.rud|LINK

    Will put up more info within two days. Have some thesis to pay attention to right now, but withing two days I promise I will have written more on this, some thoughts on how we can achieve the goal and how many people will be needed.

    I will answer your questions to my best. Untill then continue to email or pm me.
    We will get this project of the ground. Just write that email.
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 07, 2006 04:05 AM|isomies|LINK

    Here is my latest CSS based site - http://www.damnwitty.com - no tables in the skin, valid XHMTL transitional and CSS. It also passes automated 508 validation. I haven't removed all the tables from the core modules, eg the links module.

    It wasn't that difficult to get DNN to produce code that validates.

    A few changes to the default.aspx. Amend a few features in the dotnetnuke.dll where uppercase are tags are hardcoded and the id's are generated with a leading underscore.

    In the skin I use Tim Roland's HouseMenu (free from http://houseofnuke.com/ ) and Scott McCullloch's Top Menu (by subscription from http://www.ventrian.com - well worth it!)  for the menus - as Solpart is a problem in Firefox as well as not validating. A couple of tweaks to the modules, eg the HTML module writes everything inside a span when it needs to be a div to validate.

    Finally a few tweaks to the CSS to remove dimgray and a couple of other oddities.

    www.obrienit.se
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 07, 2006 11:16 AM|Designer72|LINK

    Very nice!  Could you post the files you modified for download at http://css.dnncreative.com?  That way we don't all have to reinvent the wheel as we make each CSS site.
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 07, 2006 02:00 PM|dnncreative|LINK

    That's brilliant! - The first DNN site I have seen that validates. I understand the changes that you do in the default.aspx file, but could you outline the changes you do within the dotnetnuke.dll file to get it to validate, this is the info that everyone has been looking for.

    Perhaps you would be interested in putting an article together or sharing the dotnetnuke.dll and default.apx files that you have created on http://css.dnncreative.com ?

    Congratulations, the site looks great and doesn't look like a DNN site - top marks!

    Cheers,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 07, 2006 02:08 PM|dnncreative|LINK

    PS. - Just been looking in the CSS for the skin, you could further increase the performance of your site by implementing CSS and Colour Shorthand. - I have created an article on this here, Shorthand CSS which helps to reduce the overall file size of the CSS file and helps to improve the performance of your skin. Hope it's of use, thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • DeveloperMCDBA DeveloperMCD...

    None

    0 Points

    1095 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 07, 2006 06:30 PM|DeveloperMCDBA|LINK

    isomies

    Here is my latest CSS based site - http://www.damnwitty.com - no tables in the skin, valid XHMTL transitional and CSS. It also passes automated 508 validation. I haven't removed all the tables from the core modules, eg the links module.

    It wasn't that difficult to get DNN to produce code that validates....

    What I like is that TV job! Very Cool!

  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 03:31 AM|trond.rud|LINK

    Isomies. This is just fantastic. I belive you have solved my problems with Dot Net Nuke. Perfect.
    So if you could please tell us how you manage to make the site validate?
    Can you give us all the details that you made to the dll? I hope you can make a tutorial or a paper on this a put in on the css forum mentioned earlier by designer 72? Let us know everything please. How you have changed the modules, what changes you have put where. If you can do this me and a lot of other people would be so happy.
    Hope you will share this with us.
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 03:44 AM|trond.rud|LINK

    May I ask what version of Dot Net Nuke you are using for the Damn Witty site isomies? This is a milestone reached for the Dot Net Nuke. Please share your excellent skills with the rest of us so we all can make valid xhtml and css sites.
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 08:18 AM|isomies|LINK

    Thanks all for your kind comments.

    trond.rud - I was using 3.2.0

    I will put together a detailed step by step tutorial for this. I will do this for a clean 3.2.2 install, unless anyone has a better idea.

    Please register at my site www.obrienit.se and I will send you a note when it is ready.

     

     

    www.obrienit.se
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 12:01 PM|trond.rud|LINK

    isomies

    Thanks all for your kind comments.

    trond.rud - I was using 3.2.0

    I will put together a detailed step by step tutorial for this. I will do this for a clean 3.2.2 install, unless anyone has a better idea.

    Please register at my site www.obrienit.se and I will send you a note when it is ready.

     



    I did register at your site, but can not log in. The registration went as normal, but without any confirmation that I was registrered. Can not log in, but when I enter my username and hit password reminder a reminder is send to my email. Strange thing is that your register site say it is public, and then when I recived the reminder I had gotten a verification code as well. I thought verification codes was only send to people if the site was NOT public. Well you are notefied and can now take action.
    Looking forward to see this and to test it out myself. Great work.
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 03:59 PM|isomies|LINK

    trond.rud


    I did register at your site, but can not log in. The registration went as normal, but without any confirmation that I was registrered. Can not log in, but when I enter my username and hit password reminder a reminder is send to my email. Strange thing is that your register site say it is public, and then when I recived the reminder I had gotten a verification code as well. I thought verification codes was only send to people if the site was NOT public. Well you are notefied and can now take action.
    Looking forward to see this and to test it out myself. Great work.

    Strange, I haven't really used the registration feature before, However,I have tested it with a dummy account and it seems OK.

    Anyone else have a problem?

    www.obrienit.se
  • mrswoop mrswoop

    Member

    20 Points

    2211 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 08, 2006 04:46 PM|mrswoop|LINK

    isomies

    I will put together a detailed step by step tutorial for this. I will do this for a clean 3.2.2 install, unless anyone has a better idea.

    May I suggest continuing this conversation ( and further ones, I hope ) in the "Make It Hot!" forum at DotNetNuke? 
    http://www.dotnetnuke.com/Community/ForumsDotNetNuke/tabid/795/forumid/109/scope/threads/Default.aspx

    We are naturally interested in understanding these changes ourselves and having an opportunity to assess their impact on existing installations ( which tends to be the persnickety part *grin* ).  If there are enhancements that can be made with minimal impact, and that can make some positive progress ( even if we can't get there all at once ), they're more likely to be seen by the folks that need to see them there!

    Cheers

    Scott Willhite

    It is only with the heart that one can see rightly... what is essential is invisible to the eye.
    ~ Antoine de Saint-Exupéry
  • daxdavis daxdavis

    None

    0 Points

    118 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    Mar 08, 2006 05:21 PM|daxdavis|LINK

    Worked just fine for me.  I didn't have to login at all because you site is set to public.

    Dax
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 10, 2006 04:47 AM|isomies|LINK

    The tutorial is now available for registered users at www.obrienit.se

    This is a draft version which explains how to create a very simple table free pure css design that validates with the minimum of changes to the core. Any input on the tutorial would be appreciated!

    www.obrienit.se
  • DeveloperMCDBA DeveloperMCD...

    None

    0 Points

    1095 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 10, 2006 06:34 AM|DeveloperMCDBA|LINK

    i like the design of that skin too...very cool
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 10, 2006 03:27 PM|trond.rud|LINK

    Wow. You are the best, o'brian!
    You have solved one of the great mysteries with Dot Net Nuke. And to think of all the people that said it could not be done.And there have even been a few of them in coreteam[:D] It is just a reflaction of my happiness, and not ment in a hash way.

    I will get to work, and keep working over the weekend. Hopefully I will have lots of great skins done when moday morning comes. And now they will validate. Fast loading time will get a new meaning, along with a much more usefriendly design. I will link your page for all the sites I will put up using your tutorial. And I will try to drink less beer this month so I can make a donation to you. Fantastic!

    1. I wonder if this can easily be done to the Dot Net Nuke 4.02 as well?
    2. Is there anyone that have converted 3rd party modules to xhtml?
    3. If any one notice any modules that breaks after this please let us know.
    Happy Skinning [cool]


  • Lennon][ Lennon][

    Member

    20 Points

    139 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 11, 2006 04:52 PM|Lennon][|LINK

    Nice work.

    I did the same changes, but I've written an HTTPModule which filters the markup produced by DNN.  That way, I don't have to make any changes to the core at all.  I was in the process of making a site and making it available, but I stumbled across this thread, and it looks like you've beaten me to it!

    Hopefully these changes will be made to the Core ASAP.

  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 11, 2006 06:10 PM|Designer72|LINK

    Could you still post a link to download your HTTPModule?  There are some sites I don't want to mess with the core and this would be a great alternative for me.  I would also love to see the core files posted as a download at css.dnncreative.com so that we all don't have to recompile the code.  Any progress on getting some modules available to download that have been converted as well?
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 11, 2006 07:59 PM|trond.rud|LINK

    This is so great. I am working on the second skin today for the new 3.2. Man do I have lots of my old static xhtml/css design I will force into working with Dot Net Nuke now.
    I having a blast now. Will also try to make a new and nicer menu while I am at it. Maybe I can use the Houseofnuke as inspiration?  If it is light I just use it like it is.

    Amazing, thank you so much isomes for sharing this and takin gthe time to write this. Have yet to validate, but it all runs nice so I guess it will validate when I check in the morning. Followed your instructions to the point. It was all nice and tidy.
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 12, 2006 12:56 PM|slope|LINK

    Hmm. Got to get me one of those:-)

    Will download and start playing. Is this really possible? True css and even xhtml in Dnn?
    Does it take lots of tweaking? Will it be possible to update to future versions of Dnn?

    Will start playing.

    Trond.rud, you could check out nokiko's css menu, it is lightning fast and pure css. Nokiko has a bunch of css stuff for paying members, and it is just 50 euro a year. Well worth it.

    -Follow your dreams!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 12, 2006 01:07 PM|nokiko|LINK

    yeah a httpmodule would be a better solution since on my own apps I can do the rewrite but on otehra llready excisting dnn installs they are not so happy about this in regards to the upgrade posibillites.

    I did an htpp module in the dnn2 days to move the viewstate to db or xml file as well as move it to the correct place so it would generate valid html. A dnn3 version of this is still int he panning, bu hey if its allready done no need to reinvent the wheel.

    Armand Datema
  • dandrade dandrade

    None

    0 Points

    150 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 13, 2006 11:28 AM|dandrade|LINK

    I feel attracted to the idea of CSS Skins. And, I could live without Solpartmenu. But, a web site with thousands of pages require good navigation. So, what do you recommend? Should we use DNNTree?
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 16, 2006 06:32 AM|isomies|LINK

    Anyone care to progress a httpmodule? It would be better without doubt.

    I am working a new CSS based layout here: http://www.obrienit.se/cityost - would anyone be interested in a copy of the final skin (plus a psd file for updating the picture of the cheese to something else!)  when it is finished?
    www.obrienit.se
  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 16, 2006 10:23 AM|nbc|LINK

    Isn't there a performance hit with this approach?
    Regards, Nick

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

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 16, 2006 10:31 AM|Designer72|LINK

    There would be a small performance hit, but the performance increase by doing tableless xhtml+css far outweighs the downside of the script.
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 16, 2006 11:24 AM|slope|LINK

    dandrade

    I feel attracted to the idea of CSS Skins. And, I could live without Solpartmenu. But, a web site with thousands of pages require good navigation. So, what do you recommend? Should we use DNNTree?

     

    I would recomend a pure css menu without js or .hct
    There are a few good ones out there, take a look at
    With menues like this even large sites with thousands of pages will be easy to navigate. This is espacially true for the vertical menues, as horizontal can get rather ugly if you need lots of first level menues, because the width of the menu will be wider then the browser window. With these ones you will not have that problem. 

    css.maxdesign.com.au/listamatic/

    http://www.seoconsultants.com/css/menus/vertical/

    http://www.cssplay.co.uk/menus/dd_valid.html

    http://www.cssplay.co.uk/menus/flyoutt.html

    The last two are not "free", but if you make a small donation I am sure you will be able to use them even for commercial use. Send an email to the author, and you can see.

    If you do a "google" you will find tons of good examples to use as a base for your own menu.

    -Follow your dreams!
  • Lennon][ Lennon][

    Member

    20 Points

    139 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 16, 2006 04:45 PM|Lennon][|LINK

    The HTTPModule approach does have a slight performance hit yes, but it does avoid having to touch the Core.   Isomies solution on the other hand requires Core modifications, but doesn't suffer from any performance hit.

     

    The only real solution to the problem is for the Core team to implement the markup produced by the Core (default.aspx and the markup added around each module) as a Provider model.  That way, they can implement a default provider which produces the exact code that is produced at the moment (therefore not breaking any old sites when they update), and then CSS savvy people can produce a new Provider which outputs Web Standards compliant code which validates.

     

    Then it's up to end users to use an alternative to the SolPartMenu (again a navigation Provider can be written by anyone to do this already), an alternative Text editor (again, there are a few text editors out there which produce valid XHTML), and alternatives to modules such as the Links module, and any other commonly used modules (such as account login etc). 

     

    Again, all this is already completely customisable, so the only work the Core has to do to make DNN produce Web Standards compliant code is to implement a Markup Provider which allows third parties to alter the document header in default.aspx, and a few other bits (like what gets inserted around each new module, a span or a div etc)

     

    If someone wants to write a document of what the Provider should support, and how it should be implemented, I would be happy to help out with ideas of what I think it should support.  We can then present it to the Core team and hopefully minimise the amount of work they would have to do.

  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 17, 2006 06:03 AM|nokiko|LINK

    Well i played a bit with this and my most demanding css design that would chose on dnn before are now purring with happyness so this is good. I will try and see if i can make a http module inbetween projects around this weekend (dnn 3.2) havent gotten around to asp.net 2.0 and dnn 4.0 yet.

    What we can do from here is

    go to all the textpattern, wordpress tempalate sites etc. Install these on a sample installation of the apps and then use this css to make dnn skins out of ( cc and sharalike licenses are perfect for this usage )

    I will look up te semantic links and faq module i have done for a cleitn before or else I will redo them

    What I need:

    more coders ( semantic modules or semantic 2.0 modules )

    skinners to help convert over free skins to dnn ( i build an app that takes a sample website and saves everything in the correct structure, so css images in css background images in css other css files referenced in css flash files etc - none of this crappy IE save as but 99.9% succes rate of every css site i tested one one one copies )

    someone with php system to host these blogging/php portal sites so we can reuse these skins.

    I am allready working with Nina on a new skin resource site and all this was in planning for my baby, the standardizing of dnn and some web 2.0 tricks for nn ( webstandards and prototype, moofx, scriptaculous, jquery and other fun libraries )

    So help me now and be part of the future of a standard dnn :)

     

     

    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 17, 2006 07:22 AM|nokiko|LINK

    hi

    will ahve the first version ready in a few hours.

    Armand Datema
  • Designer72 Designer72

    None

    0 Points

    37 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 17, 2006 09:20 AM|Designer72|LINK

    Very good news!  I can't wait to see everything that will come from this. I can't believe I will finally be able to use the skin I spent a month making.  I am going to post the skin as soon as I get some time to modify it for public use.  It's a 3 column, source ordered, min-max (no javascript and works on ie), header/footer, fully marked up for accessibility, works in all tested browsers on mac and pc, VERY flexible and it shows correctly in Dreamweaver.  It has been my project for 3 months now and finally is ready for prime time.  In the next couple days I'll try to get it ready and upload for all of you to use.
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 17, 2006 03:15 PM|nokiko|LINK

    well i got another project inbetween so it has to wait a but what i have is about 90% done

    edit - pasted incorrect code , new deliverable soon )

    Armand Datema
  • nbc nbc

    None

    0 Points

    1461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 19, 2006 08:06 AM|nbc|LINK

    FYI - the href exchange module at inventua.com ha sthe option to output xhtml so that could be an option to explore.

    Re Nokiko s post about converting over free templates like those wordpress ones, I've done dozens of these. Why? To learn about using css better and also to do so in relation to generating css based DNN skins. I have found it is possible to get results as long as you have control over the environment ie the default.aspx page, the modules being used etc.

    So it would be great to get a little group of like minded DNNers together so we can produce real world solutions for the core.

    Regards, Nick

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

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 03:37 AM|nokiko|LINK

    Ok first version is done ( this one will do the link replacement so you still need to do the other modifications but at least you dont ahve to do a recompile

    add following to webconfig

    <httpModules>

    <add type="SchwingSemanticFilter.SemanticDNN,SchwingSemanticFilter" name="SemanticDNNHttpModule" />

    </httpModules>

    extract and put the dll file in your bin directory

    http://www.schwingnuke.com/schwingsemanticfilter.zip

     

    This is the first version so you can all play with semantic dnn ( I am working on making a new version so that all the changes outlined int he document to the original dnn forntedn code also wont be neccesary but for now here you hve it, Semantic validating dnn sites

    Armand Datema
  • Lennon][ Lennon][

    Member

    20 Points

    139 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 06:30 AM|Lennon][|LINK

    nbc

    So it would be great to get a little group of like minded DNNers together so we can produce real world solutions for the core.



    Yes, I agree.  What do you think of my provider model idea?  Can you see any problems with it?  Does anyone want to work on a document that can be presented to the Core outlining the provider model? 
    Does anyone have any better ideas?!
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 07:19 AM|nokiko|LINK

    well the provider model seems ok to me, Right now you only have one doctype and for specific skins I might need a differnet doctype. You can do neat tricks in quiksmode for fixed postion and things.

    I fixed this myself by making a usercontrol with a nr of panels each with one of the doctypes I use and then I doa simple select case on my portalids to determine which doctype i wanted to use in this. But for a new version of dnn dynamic doctypes would be great

    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 08:53 AM|nokiko|LINK

    Well since I started this all let me start with what I would like to ahve included in the new skinning engine

     

    examples i propose here are based on an html skin

    define the doctype

    - I would like to be able to set which doctype I want use use for a skin  so in my html skin i would have something like

    <doctype>my doctype here</doctype> - thsi would then be parsed somehow that I know that for this skin the header should have this doctype

    <headertag>scritps and stuff</headertag> - This would be the same as what we have now as headertag section per page, but it would be much better to have in a skin since with all the new libraries coming out, moofx, jquery, scriptaculous, prototype etc) I use more and more of these effect to enrichen my skins but now I need to put in these headertags for each tab I use the skin on, or I would have to chenge the default.aspx. It would be much better if this is on skin level

    this is just an idea, but for the future of skinning we need better options, just look at the wordpress themes, they ahve plugins scripts and other option that you can pack all kinds of extra functionality with your skin

     

    Armand Datema
  • slope slope

    None

    0 Points

    461 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 09:05 AM|slope|LINK

    isomies

    I am working a new CSS based layout here: http://www.obrienit.se/cityost - would anyone be interested in a copy of the final skin (plus a psd file for updating the picture of the cheese to something else!)  when it is finished?

     

    Sure thing isomies. Let me know where I can download it when you are doen. Looks good by the way.

    -Follow your dreams!
  • Lennon][ Lennon][

    Member

    20 Points

    139 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 20, 2006 10:45 AM|Lennon][|LINK

    nokiko

    examples i propose here are based on an html skin

    define the doctype

    - I would like to be able to set which doctype I want use use for a skin  so in my html skin i would have something like

    <doctype>my doctype here</doctype> - thsi would then be parsed somehow that I know that for this skin the header should have this doctype

    <headertag>scritps and stuff</headertag> - This would be the same as what we have now as headertag section per page, but it would be much better to have in a skin since with all the new libraries coming out, moofx, jquery, scriptaculous, prototype etc) I use more and more of these effect to enrichen my skins but now I need to put in these headertags for each tab I use the skin on, or I would have to chenge the default.aspx. It would be much better if this is on skin level



    I would also like the option to have total control over what external stylesheets are included.  i.e. I don't want default.css, portal.css, or container.css to be included.  I also want a stylesheet for printing purposes to be included.  I'd also like the option to remove all the comments that are inserted in the markup before and after every module.

    That's a good idea to have the DOCTYPE and header information in the skinning engine, as different skins would use different doctypes.  However, I think a provider model would be a quick solution to get support in there straight away, and then develop the skinning engine afterwards.  With the provider model, the DOCTYPE would be set in Web.config, and would apply to all skins.



  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 21, 2006 09:53 AM|nokiko|LINK

    Hi

    Is anyone using the httpmodule in a website yet, so far I jut have used it n test sites and so far no issues with performance but would love to hear other peoples experience.

    And who wants to help with making css skins and release them to community, or recode some excisting core mods

    Armand Datema
  • trond.rud trond.rud

    None

    0 Points

    46 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 22, 2006 09:39 AM|trond.rud|LINK

    For my next css and xhtml skin, I will try to use multi level light weight css vertical menu. The menu uses pure css, is light and with no java or other strange files for server.

    It is a vertical menu with 2 level submenu. (actually n level)

    Menu1
    Menu1
    Menu1

    Menu1
             Sub Menu1
                       Sub Menu1
                       Sub Menu1       
    Sub Menu2
                                               
    Sub Menu2
                                               
    Sub Menu2
                                                          


    It does validate at xhtm 1.0 trasitional,  and works great in static pages. I wonder how I could embed the menu right into the skin rather then having it as a module?

    Is it even possible to have the menu right in the skin? Or does the menu need to be packed as a module?

    I will try out your httpmodule nokiko, and will post here when I have had the time to test it properly.            
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 22, 2006 11:52 AM|nokiko|LINK

    hi

    youcan do this using a skinobjct, i have acss menu on css.schwingnuke.com that you can downlaod after registration

     

    Armand Datema
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 29, 2006 11:06 AM|nokiko|LINK

    well i just converted over a table based skin with lot of nested tables into a css based skin

    3 floated columns with a lot of subcolumns all using floated divs and the pseed increase was enormous about 2 seconds loading speed per page.

    even tho dnn has some issues with negative margins floated divs can be used even if there are validation errors or other doctypes

     

     

    Armand Datema
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Mar 29, 2006 01:15 PM|dnncreative|LINK

    Good news Nokiko,

    The method I used was also using floats which worked well in the Simple Red Leaf skin. - One thing that everyone should be aware of though is a particular bug that occurs in IE6, to quote my blog,

    "I'm particulalrly developing skins that are using float properties rather than fixed absolute positioning to create as fluid and flexible skin as possible.

    Unfortunately quite a few browser errors can occur when using floats.

    One particular error that I am discovering more and more is the Peekaboobug. - This shows up in the IE6 browser. You will find that your images will randomly disappear. - As well as images, within DNN, this also includes your Token links such as your breadcrumbs, search register etc.

    There is a discussion here which discusses a hack and an explanation of the Peekaboo bug along with other IE bugs."

    You may find this article useful if you are coming across the bug. - But, make sure you test their hacks against IE7 - the hacks are now out of date for IE7 - you can't use the *html hack for instance, you need to use the box model hack to ensure compatibility with IE7 and to just apply the hack to IE6 and below.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Apr 06, 2006 11:14 AM|dnncreative|LINK

    Hello everyone,

    Well, I've finally had a bit of spare time to go through Tims tutorial on getting DNN to validate and I've now got the Simple Red CSS skin working and validated to XHTML Transitional 1.0

    You can check both 3 and 5 pane versions.
    http://skins.dnncreative.com/Home/tabid/53/Default.aspx

    http://skins.dnncreative.com/RedLeaf5Panes/tabid/65/Default.aspx

    The skins still include the Javascript that Nik provided and I found the extra bit of code that I needed to get it to validate with the Javascript. - I will upload the updated skins in a while, want to do a bit more testing on the CSS containers.

    - A tip: I realised once I had got the skin to validate that I had set up the containers in the wrong way. The layout of the containers was originally setup using the same method as the skin. - ie a div tag with a unique id - if you use this method for the containers, validation errors occur because you can only have one unique id per page, with several containers added to the page, I had several ids of the same name - not good! - So all I had to do was change the divs ids to classes and styled the containers using classes. - It now validates with several containers added to the page.

    (The pages with any other modules on (eg. announcements module) apart from the Text/HTML module are not compliant yet, but it's a big step forward!)

    Will check out your module Nokiko as it looks like a much simpler method to implement for everyone.

    I've also added some links to CSS based articles / layouts etc. on http://css.dnncreative.com I will keep adding bits as I come across them on my travels, if you have any good links, feel free to add them to the site.

    If your interested in Tims design on http://www.obrienit.se/ we did an interview which you can read here covering DotNetNuke CSS skins and validation

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • xddg xddg

    Member

    14 Points

    1864 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Apr 06, 2006 06:48 PM|xddg|LINK

    That's great news - Can you clarify this comment -

    >>
    The skins still include the Javascript that Nik provided and I found the extra bit of code that I needed to get it to validate with the Javascript. - I will upload the updated skins in a while, want to do a bit more testing on the CSS containers.
    >>

    Does it require JS to be fully complian?? Or is this pure CSS with no JS assistance to make the skins fully compliant and browser compatible?

    Looks like a good move forward.

    Nina Meiers

    Nina Meiers


    Free Skins & Containers by Nina Meies
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    Apr 07, 2006 03:16 AM|dnncreative|LINK

    Hi Nina,

    Sure, the Javascript is not required for compliance, but it is an interesting solution to a problem I had.

    Consider this: You create a pure CSS skin and you want to have several style sheets for the skin, for instance a print.css and a iehacks.css stylesheet as well as your skin.css file.

    If this was a skin for a client where I had full control over the portal I would probably reference the different stylesheets by changing the default.aspx file.

    The problem is that I wanted to distribute the CSS skin to the community and you can not ask everyone to edit their default.aspx files!

    So, the Javascript is a solution provided kindly by Nik which allows you to call into your skin the various stylesheets dependant on browser or if you are printing etc.

    - The comment refers to the code that you surround the Javascript with to enable your skin to be valid. If you don't use the code, it will create an invalid skin. Nik provided the code earlier in this forum, but it didn't quite work right, think there was something missing from it. - Anyway after a bit of hunting around I found the section of code. - I will be uploading the new version soon so you can check it out.

    There could be a potential flaw in this method - what happens if the user has Javascript disabled? - In my skin it won't affect it. - It will print, but it wont have any special print layout and IE5 will just have text one size to large and some spaces where it shouldn't - nothing too drastic. - All other browsers will display without any changes.

    Regarding validation, all I did was tweak DotNetNuke to produce valid code and then made sure that my skin produced valid code.

    The skin.css file produces valid CSS, but the default css files that come with DNN all create invalid CSS, so I need to edit the default.css files for the CSS to be totally compliant.

    In fact while your here, perhaps the core team could look at the default CSS, having a glance through it there are quite a few places where you can reduce the amount of code used by using CSS shorthand and perhaps you could also look at changing the code to be compliant?

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    May 04, 2006 05:15 AM|dnncreative|LINK

    Hello all,

    Just to let you know, you can now download the updated skin with the validation fixes from here:
    http://www.dnncreative.com/FreeRedLeafCSSSkin/tabid/238/Default.aspx

    Thanks,

    Lee
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • Russ Helfand Russ Helfand

    Member

    290 Points

    741 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    May 04, 2006 09:11 AM|Russ Helfand|LINK

    For how control adapters can help create table-less (more CSS friendly)  ASP.NET web sites, check out:

    http://weblogs.asp.net/scottgu/archive/2006/05/02/444850.aspx
    http://www.asp.net/cssadapters/.

    -Russ-

     

    Russ Helfand
    Groovybits.com
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Desing Fail in Dnn? (No Tables)

    May 04, 2006 09:47 AM|nokiko|LINK

    for some real inspiration

    http://cssreboot.com

    I will have a new flaoted div portal design coming out soon, no tables pure divs bijna xbrower just a few little tweaks and its life, even looks good non validating

     

     

    Armand Datema
  • taylorsmith taylorsmith

    None

    0 Points

    47 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    May 04, 2006 01:01 PM|taylorsmith|LINK

    dnncreative

    Hello all,

    Just to let you know, you can now download the updated skin with the validation fixes from here:
    http://www.dnncreative.com/FreeRedLeafCSSSkin/tabid/238/Default.aspx

    Thanks,

    Lee

    Hi Lee,

    Great work BTW (all of you), this is the most important subject in DNN at the moment.  You have included a download for Default.aspx for DNN 4.0.2.  Does Red Leaf work in DNN 4.0.2?  We have made the upgrade and we are looking for compliant solutions.

    Lucien

    Oxford Information Labs, UK

  • dnncreative dnncreative

    None

    0 Points

    218 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    May 04, 2006 01:35 PM|dnncreative|LINK

    Hello,

    I haven't tested the skin in 4.x, but I've been told that it works. The HouseMenu works with DNN4.x and the default.aspx for 4.02 provides the changes you need to get DNN to work in Standards Compliance mode, so everything should work fine.

    Thanks,
    Lee Sykes | DNN Creative Magazine for DotNetNuke - www.dnncreative.com
    Reviews, Tutorials, Interviews - 134 DotNetNuke videos. July Issue 11 out now!
  • isomies isomies

    None

    0 Points

    61 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    May 17, 2006 11:07 AM|isomies|LINK

    Following in Lee's footsteps, you can now visit http://www.xhtmlskins.com to download the first in a series of free skins for DNN in valid XHTML.

    This site will become a great resource for those interested in the issues of building web sites that validate in DNN.

    www.obrienit.se
  • nokiko nokiko

    Member

    10 Points

    2096 Posts

    Re: Why does 100% Css Design Fail in Dnn? (No Tables)

    May 17, 2006 12:45 PM|nokiko|LINK

    Hi

    Well here is one I just completed. It has about 10 contentpanes and up to 35 cusatom modules on some pages. Still all look almost perfect on most browsers apart from a few alignment issues in the menu.

    Design is based on normal dnn no modifications and based on floated divs. This will prove it will also work on big portal like sites with lots of dynamic content

    http://z.nu.nl/

     

    Armand Datema
  • ‹ Previous Thread|Next Thread ›