Catman's CSS Tool

[Catman]

In preparation for a web design class I'll be teaching next fall, I've thrown together a tool for building style sheets. I've designed it to work with IE 5.0 (both PC and Mac), 6.0, and Netscape 6.2 at a resolution of 1280x1024 -- since I've a captive audience in mind (students who wish to become web designers), extending functionality beyond that strikes me as unnecessary.

I welcome any suggestions regarding arrangement, features, and things I've overlooked: Catman's CSS Tool.

I should note that when developing pages like this, I keep the javascript and style sheet in a single file with the HTML until I've finalized the design.

[webmarkart]

it takes a few minutes to figure out where things are, but seems like a useful tool provided you teach the students how each element behaves. Giving someone a wysiwyg editor doesn't help them as much in the long run.

[Nightfire]

Looks fine, can you change the top drop down though? the screen "blinks" everytime you click the menu.

Unchecking the background colour box tells me to use a foreground colour.

Same with foreground colour

TBH I agree with webmarkart, kinda confusing to start off with to find where everything is, and a WYSIWYG won't teach someone as much as it would them hand coding it. Also build the page to 800 x 600 - 1024 x 768 res, I don't think many people use 1280x1024.

[joh6nn]

couple of things:

you forgot a couple of pseudo-classes: first-line, and first-letter.

also, in Moz 1.1, the radio buttons for border/outline, float and move as you scroll, as does the checkbox for transparency.

i suggest moving the test element to a pop up window, rather than a div on the same page.

also, i don't like the staggered layout of the two divs. i think move them both to the center of the screen

[Catman]

Thanks for the feedback -- you've confirmed some of my own concerns. I agree that a redesign to a different target resolution is in order and that using the side-by-side divs doesn't work as well as I'd hoped.

Nightfire: About the color/background issue: In CSS2, if you specify one, you're supposed to specify the other -- but using the alert box is just too annoying. I'll have to figure out something less intrusive.

[aCcodeMonkey]

CatMan,
I like your tool.

Here is an example that you may like to show your class as to how to apply CSS as a working tool for web site management.

Note: The DOM2 scripting was specifically limited to Internet Explorer.

I developed a WebPortal for multivendor helpdesks a while back. I needed a way to quickly meet the client's business colors and styles standards without having to manually recode the webpages or stylesheets.
The resulting tool allows me to:

• Pick any "company" website hosted by the portal service and quickly make the required changes
• The tool limits what change can be made to the website without having to use Dreamweaver or InterDev's CSS management services.
• Preview the changes before saving.
• Save the new *.css file locally or "applying" the changes by writing the new *.css file on the webserver
• Preview the CSS style code in scrolling region on the form

CSS Management Tool

Let me know what you think.

Dale Mitchell
MindCrafter Web Designs

[dysfunctionGazz]

Catman,

I like it.

I do most of my web editing online (while at work in day job!)through angelfire editor (hand coded) and your tool will serve as invaluable when I can't remember how to apply certain styles.

It will certainly be quicker than looking through tutorials etc which is what i usually do!!!

Well played
G

[aCcodeMonkey]

Catman,

Glad you like it.

Now that NS6/7 are closer to IE's handling of DOM2 I'll be updating the tool for both browsers. Finally came up with a method for error checking radio button collections that works in both. Now if I could just get NS to behave with removing list items......