Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Catman's CSS Tool

    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.
    Last edited by Catman; 09-24-2002 at 03:21 PM.
    Need more emoticons?
    Visit Catman's Private Stock

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Raleigh, NC
    Posts
    484
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    -WebMark Art
    Programming is 80% thinking and 20% spelling

  • #3
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    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.

  • #4
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72 W. 48' 57" , 41 N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Need more emoticons?
    Visit Catman's Private Stock

  • #6
    New Coder
    Join Date
    Sep 2002
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Another Look at applying CSS

    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

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Location
    Brighton
    Posts
    180
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    New Coder
    Join Date
    Sep 2002
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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......
    a credit card for a newbie from Amex: The Amex Blue card would like to start developing a credit history.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •