SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 60
  1. #1
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink New css equalising columns layout tool needs testing

    Hi

    I launched (less than an hour ago) a css site creation tool that makes the css page layout for you, if you want a 2 or 3 column design with header and footer.

    It was made with considerable help from Big John, Paul O'Brien and Allan Smith (thanks guys).

    Find the link toward the bottom of this page (but please read the notes first):

    [edit: new address]

    http://209.216.241.33/ctindex.php

    It needs some serious testing!!

    If you have any problems with it, post them here so I can fix them (if I can).





    Trevor
    Last edited by ClevaTreva; May 19, 2004 at 02:51.

  2. #2
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I have been playing with it for a while and everything seems fined. I didn't notice any bugs in the generation of what I tried (size and colors). However I didn't look at the code generated. I just tested the generator. It is definitly a great tool. Hopefully you'll have no bugs.


  3. #3
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for testing it. Glad to hear no bugs found, yet.

  4. #4
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might maybe just add a few field testing before submiting. I was surprised to see that the maxlength of a field allowed to type something like 'qweqweqweqweqwe'. Just a suggestion tho

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by duuudie
    You might maybe just add a few field testing before submiting. I was surprised to see that the maxlength of a field allowed to type something like 'qweqweqweqweqwe'. Just a suggestion tho
    Hi

    All the fields do have maxlengths. The longest is 20 chars for the color fields to allow a color name rather than hex or rgb code.

    There is substantial validation in the php to stop what you typed getting anywhere near the generator tool. If you typed what you did and submitted it, the form would set that field to its default value.





    Trevor

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Trevor,

    Great to see you've finished this at last as I know you've been working on it for a while now .

    I've only done some quick tests but it seems to be working fine.

    I'm sure you will get a lot of interest in this tool and also help a lot of people out at the same time.

    I'll have a play around with it later (time permitting) and let you know if I spot anything.

    Good Work

    Paul

  7. #7
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, what a great tool! Must have a taken quite a bit of work. Kudos!

  8. #8
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by furryyuri
    Wow, what a great tool! Must have a taken quite a bit of work. Kudos!
    It did take a long time. I know I didn't have much hair (always cut to grade 2) but now I have less

    As an aside, I have noticed some bugs with the tooltips.

    In Mozilla, the doctype breaks the formatting. I think this is because the tooltip script is old and uses uppercase in its java and tags, and it isn't valid xhtml.

    In IE, the position:relatives in the style stop the tip from positioning next to the cursor.

    If I remove the position:absolutes, IE still seems to behave, and the tips are in the right place. HOWEVER, I noticed a really daft 'feature' of IE. Selects are drawn on top of the screen, with ALL content under them (equivalent to a z-index of infinite), so if a tooltip hovers over a select in IE, the select shows through!

    I will look at a DOM version where I can search and avoid the selects by either making the selects invisible whilst the tip is up, or by some avoidance positioning.





    Trevor

  9. #9
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Well, I know that I will get use of this. Impressed by the Safari nod.

  10. #10
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by furryyuri
    Impressed by the Safari nod.
    Safari was a pain.

    On my earlier attempt, the page loaded OK, but resize the page and the footer didn't move!

    In the code, you will notice a 'clearing div' above the footer. By all rights this shouldn't work, as you ought to put it before the end of the div that isn't closing. But it DOES work. BUT, it adds 1pixel to the height, so the page became 100% plus 1 pixel!

    So, I lifted the container up one pixel so it disappears of the top of the screen, then dropped the header down one pixel to compensate. I then hid the clearing div's from IE. And all browsers were happy. Also, in Safari, putting height 100% too far in to the design broke it, so I had to be careful as to where these were.

    ... and as to Mac IE. Nuts to it. It needs to be in quirks mode for full 100% height when with minimal content, and for that it can go whistle dixie.





    Trevor

  11. #11
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    As an aside, I have noticed some bugs with the tooltips.
    Hi All

    Changed the code and java to DOM Tooltips. Hacked Dan's code around a bit and nearly duplicated the previous script, but this one works!





    Trevor

  12. #12
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Arizona
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Woohoo!

    Trevor, you are my new role model. This must have taken
    ten times as long as my contribution did. I'm just beginning
    to use PHP, and I hope one day to approach the level
    displayed here. I shall now rush to the Piefecta page and
    place a backlit neon link to your tool.

    BTW, I think you ought to mention the source ordered
    nature of the design. I didn't see it mentioned anywhere,
    and to my thinking it's a major feature that will draw
    in the search-engine-savvy crowd, not to mention the
    accessibility folks.

    Dare we dream of a tool producing the liquid version
    some day? I feel like a heel for asking, considering
    the amount of work you just did. Still, one may hope...
    Big John

    PS--Could I get your last name for the link?
    I don't want to put just 'Trevor'...
    Perennial student + Impractical joker + CSS junkie = Big John
    <http://www.positioniseverything.net>

  13. #13
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi John

    I didn't make this tool to publicise me, hence I keep my name away from the glare. However, the css-discuss forum already has it:

    http://css-discuss.incutio.com/?page=AnyColumnLongest

    BUT, I would prefer you kept it to ClevaTreva.





    Trevor
    PS nice to see you here at sitepoint

  14. #14
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you ever find a fix for putting an image in a column which is too wide to fit in?

    Say <img src="#" width="200" height="100" alt="" />?

    Later,
    Douglas
    Hello World

  15. #15
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add comments about comments...

    Trevor,

    Kudos on the tool. I did notice one thing, you cannot enter a header or footer greater than 99px. Not a major issue, but I know i needed one about 100px.

    Also, I am with Big John on the fluid center. Again, great job. The amount of comments in the code is amazing.

    Thanks....Mike

  16. #16
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Hi

    All the fields do have maxlengths. The longest is 20 chars for the color fields to allow a color name rather than hex or rgb code.

    There is substantial validation in the php to stop what you typed getting anywhere near the generator tool. If you typed what you did and submitted it, the form would set that field to its default value.





    Trevor
    clever.

    I am so used to define colors not using names that I forgot about it

  17. #17
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DougBTX
    Did you ever find a fix for putting an image in a column which is too wide to fit in?

    Say <img src="#" width="200" height="100" alt="" />?

    Later,
    Douglas
    Hi Doug

    I've got an awful memory. what was this about?



    Trevor

  18. #18
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike
    Trevor,

    Kudos on the tool. I did notice one thing, you cannot enter a header or footer greater than 99px. Not a major issue, but I know i needed one about 100px.

    Also, I am with Big John on the fluid center. Again, great job. The amount of comments in the code is amazing.

    Thanks....Mike
    Hi Mike

    The upper limit for the header is 150px and the NEW upper limit on the footer is 125px.

    The issue with the fluid center is that Mozilla and Opera need a fixed background image, which won't work so easily, but I do know how to do it, but it isn't a priority for me (yet). The problem comes because the last container that goes full height all the time is the wrapper, which contains all three columns. An image behind any container further in won't go full height.





    Trevor

  19. #19
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    I've got an awful memory. what was this about?
    When you have content which is wider than the column, then you get nasty wrapping of the divs in IE. I just had a better look at your code, nice line on the IE wordrap problems (where a non-broken word willbe wider than the column div) but checking, if you put a wide image in any of the columns it still falls to bits. Oh well.

    Nice interface though. Planning a standalone version? (For people doing WYSIWYG)

    Douglas
    Hello World

  20. #20
    SitePoint Member
    Join Date
    Feb 2004
    Location
    Arizona
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trevor wrote:
    BUT, I would prefer you kept it to ClevaTreva.

    You got it buddy.
    Perennial student + Impractical joker + CSS junkie = Big John
    <http://www.positioniseverything.net>

  21. #21
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cssjunkie
    Trevor wrote:
    BUT, I would prefer you kept it to ClevaTreva.

    You got it buddy.
    Hey

    But not Trevor 'ClevaTreva'

    Just ClevaTreva.

    But thanks for the mention.

    Update 1: I've written the code to allow top and bottom 'margins', and am now halfway through adding this to the generator (will be v2.55)

    Update 2: I've also done sub-headers and sub-footers in v2.55

    I expect v2.55 to be up by the end of the weekend.

    I've also had an idea how to make the center fluid width, I'll play with it over the weekend.




    Trevor
    Last edited by ClevaTreva; Apr 17, 2004 at 13:17.

  22. #22
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi All

    I have had a few brainwaves today and v2.55 will be up v soon.

    It will remove the need for a background image (figured how to get Mozilla and Opera to behave using a sort of hack).

    It removes a hack for a Safari bug that was a bit of a kludge and replaces it with a much neater solution.

    It adds the option to have margin top and bottom (which the current design cannot do).

    You can now select from a list of doctypes.

    And it introduces sub-headers and sub-footers (all ready for 3D graphics)




    Trevor

  23. #23
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ClevaTreva
    Hi All

    It will remove the need for a background image (figured how to get Mozilla and Opera to behave using a sort of hack).

    It adds the option to have margin top and bottom (which the current design cannot do).

    You can now select from a list of doctypes.

    And it introduces sub-headers and sub-footers (all ready for 3D graphics)

    Trevor

    WOW.....I can't wait....its like christmas....

    Mike

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Good work Trevor

  25. #25
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EvM-Mike
    WOW.....I can't wait....its like christmas....
    Hi

    Does that make me one of Santa's little green elves ?

    Hey, on reflection, I might not look so bad in one fo those outfits




    Trevor
    PS Loads of testing on the Moz/Opera imageless design confirms it works fine, just coding it in right now.

    Paul: The css notes now have 'thanks to you' and a copyright acknowledgment in them for you.


Bookmarks

Posting Permissions

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