View Full Version : Catman's CSS Tool

09-24-2002, 04:18 PM
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 (http://www1.iastate.edu/~wsthune/cps/ccss-tool.html).

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.

09-24-2002, 09:39 PM
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.

09-24-2002, 11:37 PM
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.

09-25-2002, 02:02 AM
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

09-25-2002, 06:40 PM
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.

09-25-2002, 09:46 PM
I like your tool. :thumbsup:

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 (http://members.aol.com/_ht_a/mndcrftr/samples/CSS_Admin_Samples.htm)

Let me know what you think.

Dale Mitchell (mndcrftr@aol.com)
MindCrafter Web Designs

09-26-2002, 11:58 AM

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 ;)

09-26-2002, 05:58 PM

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......