Useful Resources - Coding & Standards

[Webnauts]

CSS Resources, Tutorials, Tips and Tricks (please report broken links)

1. Rebuilding a Site With Standards http://www.meyerweb.com/eric/talks/2...ebuilding.html

2. The University of Arizona - Cascading Style Sheets http://uaweb.arizona.edu/resources/t...ss/index.shtml

3. W3C Web Style Sheets CSS tips & tricks http://www.w3.org/Style/Examples/007/

4. Tables or CSS? Choosing a layout http://www.saila.com/usage/layouts/cssvtables.shtml

5. Tableless Layout with CSS HowTo (W3C) http://www.w3.org/2002/03/csslayout-howto.html.en

6. How to build a web site without tables http://www.mako4css.com/Tutorial.htm

7. CSS Quick Reference http://www.devguru.com/Technologies/...css_index.html

8. Real World Table Free Site Development http://www.womendesignersgroup.com/articlerachel.shtml

9. CSS Bugs and Workarounds http://css.nu/pointers/bugs.html

10. How to hide CSS from buggy browsers http://w3development.de/css/hide_css_from_browsers/

11. Hiding CSS form Netscape 4+ http://www.v2studio.com/k/css/n4hide/

12. External link icons the CSS way http://www.kryogenix.org/days/173.html

13. CSS Top Menu Combination - Does not work in Internet Explorer 6.0. It does work in Mozilla 1.4., Opera 6.0., and Safari 1.0. http://moronicbajebus.com/playground/cssplay/top-menu/

14. Hover Sidebar with CSS - It is known to work in Mozilla 1.3b or later (though in Mozilla 1.4a it was buggy but then was fixed) and it also works in Opera 7.0. But alas, it does not work in Internet Explorer 6.0 because Internet Explorer does not support :hover on anything but hyperlinks (<a>). http://moronicbajebus.com/playground...hover-sidebar/

15. Erlarger Button Menu with CSS - Overlapping the other elements: http://moronicbajebus.com/playground...r-button-menu/ This does not work in Internet Explorer.

16. Reformat the tables with CSS - It works in Mozilla 1.4+ and Opera 7.0. It does not work in Windows Internet Explorer 6. http://moronicbajebus.com/playground...eformat-table/

17. Image replacement - no span with CSS - This works great in Windows Internet Explorer 6, Mozilla 1.4+, and Opera 6+; but in Windows Internet Explorer 5 nothing shows up. This can easily be solved, note of problem and solution courtesy... http://moronicbajebus.com/playground...e-replacement/

18. Mark you jump - You need a browser that supports CSS3. This is where the time traveling comes in because as of today (2003/2/June) CSS3 is still in the draft stage; but you are in for some luck Mozilla 1.3 does support :target—those wacky Mozilla people. http://moronicbajebus.com/playground.../markyourjump/

19. Horizontal Menu using CSS http://moronicbajebus.com/playground/cssplay/hormenu/

20. Box Model Hack http://www.tantek.com/CSS/Examples/boxmodelhack.html

21. Designing for two Style Sheets - This method is suitable for use when you have a site that is laid out using CSS positioning as opposed to tables, and where the content is likely to get displayed badly in older browsers.

By carefully planning your layout you can create an alternate stylesheet that will display correctly in older browsers and still be able to do an advanced CSS layout for the rest. http://www.edgeofmyseat.com/showarticle.do?AID=5

22. Use CSS to Color Your Forms http://www.edevcafe.com/viewdoc.php?id=6

23. CSS-driven tabs http://www.clagnut.com/writings/csstabs/

24. CSS: Mix and match Classes http://catcode.com/csstips/classes.html

25. CSS: Graphic List Bullets http://catcode.com/csstips/graphic_list.html

26. CSS: Centered Tables http://catcode.com/csstips/center_table.html

27. CSS and Netscape 4.xx Issues - The market share of browsers that do not support any CSS is now below 0.5%. Therefore web developers have more freedom to actually separate content (HTML) and presentation (CSS).
The biggest challenges that web developers face when implementing CSS is backwards compatibility and browser support. http://www.mako4css.com/Issues.htm

28. Mark external links on your site (and others!) http://www.sitepoint.com/newsletter/...&format=html#6

29. CSS Positioning Properties http://www.miswebdesign.com/resource...roperties.html

30. CSS Menus - Uberlink CSS Rollovers http://www.projectseven.com/tutorial...t_01/index.htm

31: CSS-TD CSS Table Design http://www.projectseven.com/tutorials/css_t/index.htm

32. Css Iframe Mimics http://www.beforethedog.com/tutoriali/tut1.htm

33. Navigation Menu without Images http://www.bravenet.com/resources/ti...p.php?view=160

34. Dynamic @import CSS files using PHP http://www.1976design.com/blog/archi...p-dynamic-css/

35. max-width in Internet Explorer http://www.svendtofte.com/code/max_width_in_ie/

-------

Tools and Utilities (please report broken links)

1. Build tableless (with CSS) pages with this free online tool http://www.fu2k.org/alex/css/layouts...Absolute.mhtml

2. User Style Sheet Wizzard http://www.techdis.ac.uk/seven/wizards/user-style.html

3. FREE Accessible Forms Creator Desktop Software (for building forms with CSS or tables) http://www.hisoftware.com/access/valueadd9.html

4. Style Master - CSS Web Page layout Editor for Windows and Macintosh http://www.westciv.com/style_master/

[matauri]

External Resources Links

If you have any links that you would like to contribute in this Topic, feel free to PM them to us & we will include them.

__________________________________________________

CSS rollover menus

Here I would like to share with you a nice collection of simple clean CSS rollover menus with lists I recently found: http://www.theimposter.org/examples/rollover/

Webnauts
__________________________________________________

CSS rollover & popup menus

Pure CSS

CSS Menus


Matauri
__________________________________________________

[mikmik]

The two deadliest pages/sites I have ever come across:http://www.thefixor.com/code_css.php#tutor ,
make sure to backtrack and explore here, it is packed with good links.

You want tools? Online, downloads? Color accessability, references? One word. "WOW"
http://www.d.umn.edu/itss/support/Tr...ign/tools.html

[Webnauts]

A great presentation to any prospective, new, or current client you may have that will better help them understand Web Standards and how it can help their business: "The benefits of Web Standards to your visitors, your clients and you!" http://www.maxdesign.com.au/presentation/benefits/

Why use accessible code? See here: http://www.maxdesign.com.au/presenta...ts/index06.htm

You might also like to have a look here:

"Why Web Standards FAQ's" http://www.7nights.com/dkrprod/gwt_eight.php


Worth a look!

[brettgodfrey]

2 excellent sites.

I really liked maxdesign's topic A CSS based site in action http://www.maxdesign.com.au/presenta...ts/index08.htm

I've been out of the picture for a few months but I find it very surprising that, considering the date of the original post, it has had 65 views and this is the first reply!

I then noticed that a lot of the posts under 'Accessibility & Usability' do not enjoy many replies....

I wonder if this means that web site designers / builders / technicians are as complacent about accessibility as many of my customers are.

That thought was in my mind when I read the second site (D. Keith Robinson's Gorilla Web Tips) and scrolled down to Why use Web Standards? (http://www.7nights.com/dkrprod/gwt_eight.php#3) and I had to smile. Time and Money! So that's the reason for making a sight accessible!

[lancillotto]

Hi there,

you wrote:

"I find it very surprising that, considering the date of the original post, it has had 65 views and this is the first reply!

I then noticed that a lot of the posts under 'Accessibility & Usability' do not enjoy many replies....

I wonder if this means that web site designers / builders / technicians are as complacent about accessibility as many of my customers are."

I'm an Italian webdesigner based in South of Brazil, my name is Paolo Dodet.

Well, my personal opinion on that goes well beyond the realm of webdesigning, standards and accessibility.

Rather is based on the fact that:

1. People (including me and, perhaps, yourself) are hardly convinced that in order to change the world they should change firstly, since it actually is THEM, what makes the world as a reality.

2. Once one is on a routine, as far one's working day-by-day is concerned, it is VERY difficult to change it. If not very PAINFUL indeed.

On top of that you should at least suspect, I'm sure, that NOT all people in this trade are doing it following a real ethic code, I mean a professional one or something of that sort.

Then, while reflecting about all of this, I suddenly understood what I think are the why's and the how's of your question and decided to give my contribution.

And this is that coding for disabled people is not a real business, I mean the vast majority of webtraders haven't yet realized what a potentiality lies behind it, in terms of making money I mean; I wouldn't even like to mention the fact that I personally see it as an absurd, the fact that people are actually banned from sites worldwide because of the arrogance of individual from their own species. That has got no excuse!

What I'm talking about is the narrowminded attitude that some people in our trade are showing to the rest of us. I'm talking here about David Emberton's article you can read at this address: http://www.apcmag.com/apc/v3.nsf/0/a...256e5f001a59c5
If you haven't done it yet.

If it weren't tragic, it would be funny!

Even though it sounds ridiculous to most of us, there are, I'm sure, more people out there who would agree with this poor old sod and with his dinosaurs vision of the web, and, albeit the number is decreasing, they are still as many as to make the web no man's land.

Though, what I really believe is that the wheel of life is moving since the biginning of time and no one, I mean, NO ONE would ever be able to stop it, not even, and least of all, David Emberton.

I hope this hasn't bored you

Sincerely

Paolo Dodet
http://www.noblocodenotas.com

[brettgodfrey]

Well said Paolo.

Dave Emberton has had more than his fair share of attention on this forum and others. And it is pleasing to note that most people agree with you and not him.

I think his main point is that standards can stiffle change and creativity. I have a degree of sympathy to that point.

We do need the standards to be reviewed regularly so they are updated to take into account advances in technology. This is done (move from HTML to XTML etc) and should ensure backwards compatibility.

We need to make sure that we continue to build websites that are accessible to all.

[mikmik]

I am so happy for this thread, you folks :O)))

I lost all my links, and here they are!

I just found this one, it is a site that has been updated, there are great generators for CSS menu's and layouts, good resource page full of links, and this wicked, wicked chart for checking what CSS attributes will work in which browsers :
http://www.csscreator.com/attributes/

There is also a stats page for browser/OS/screen res/etc, and a download for the script (PHP) so you can add it to your own site.

HTH :O) (PS Project VII is looking pretty snappy these days also)

[synergytheory]

Originally Posted by lancillotto

What I'm talking about is the narrowminded attitude that some people in our trade are showing to the rest of us. I'm talking here about David Emberton's article you can read at this address: http://www.apcmag.com/apc/v3.nsf/0/a...256e5f001a59c5
If you haven't done it yet.

Wow, is this guy even for real? Never heard anything so stupid...I've noticed all people who bash CSS and web standards, always say "it's too hard to learn" come on now, so was HTML when I first learn, so was flash so was PHP and mySQL. Everything has a learning curve...CSS saves me SO much time, I can do SO much more with CSS than HTML.

And web standards in general, IMO is nothing but good. I think it promots creativity, one glace at csszengarden.com shows that. More and more people will be using PDA's and Phones to surf the web, there is no way they can handle bloated html code.

I really see no argument against Web Standards. I admit I don't use CSS to it's full potential [maybe we will be able to when IE finally gets updated], but I'll continue to use XHTML and CSS, hopefully guys like that tool will get so far left behind he'll have to find a new career.

Ya know, I'd love to watch this guy make a body formatting change to a 3000+ page site.

[Faglork]

Strange that no one mentioned
http://www.alistapart.com

This is more for the advanced coders, but heck, this is webPROworld ...

Alex

[johngroup]

While standards are important, having these updated links is even more so. Thanks!

[bj]

Some of my favorites:

The CSS-Discuss Group wiki
Position is Everything
CSS Play
Ingo Chao's CSS Articles
CSS SledgeHammer

You might also find my online CSS bookmarks helpful:
Kickass WebGeek CSS Resources