21 replies [Last post]
ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

If you have any problems with it, contact me here by PM.

Trevor

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 28 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi Trev

Had a very very quick look (will investigate in-depth later on).

Something that immediately struck me was the help pop-ups. They where getting in the way far too much (they kept inadvertedly showing). Perhaps make them clickable rather than mouse over?

Apart from that, looks great! Can you select DOCTYPE or is it set to 1.0 Strict? (Forgive me if it's there as an option, as I said, was a quick look! Smile )

The next sentence is true. The previous sentence is false. Discuss...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

co2 wrote:
Something that immediately struck me was the help pop-ups. They where getting in the way far too much (they kept inadvertedly showing). Perhaps make them clickable rather than mouse over?

Done Tongue

co2 wrote:
Can you select DOCTYPE or is it set to 1.0 Strict?

It is set to xhtml1.1, which is only available as strict. No you can't change it, but I may make this an option in the next version.

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi All

Just and update on progress. V2.55 is not uploaded yet Evil

However, just to let you know what is already done:

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

Done and tested. This took longer than expected to test.

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

Done and tested.

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

Partially done, not yet tested.

Quote:
You can now select from a list of doctypes.

Done and tested.

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

Partially done, not yet tested.

Also done:

Fixed a display bug on the tooltips in Opera (the colspanned main tip cell was not colspanned, a DOM object addressing issue).

Added switches to simply switch off an elements color (rather than having to type in 'transparent'). This took ages!

Also to be in this release:

The ability of either sidebar to intrude up or down into header/sub-headers and footer/sub-footers. This is easy to add as a feature and has been requested.

Trevor

thorne
Offline
newbie
VA
Last seen: 16 years 28 weeks ago
VA
Joined: 2004-04-12
Posts: 5
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

I just played a little bit with your app and it seems to do a decent job if your only going to support IE, but the output appears different in modern browsers, ie FireFox, Opera...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

thorne wrote:
I just played a little bit with your app and it seems to do a decent job if your only going to support IE, but the output appears different in modern browsers, ie FireFox, Opera...

Hi

That puzzles me. It is designed to work in all modern browsers. What doesn't work for you?

I have tested the output on IE 5-6 PC, IE 5.x MAC, Safari 1.2, Opera, Mozilla (Netscape and Firefox).

I have had a few problems with the display of the generator form, which I think I have fixed (at least for modern browsers).

Let me know what the problem is, Please Laughing out loud

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi (Again Laughing out loud)

I just went online to check if the tool was broken or something.

Tried it in IE, Opera and Firefox, no probs. So I would like to hear what problems you've had.

Trevor

frobn
Offline
newbie
Last seen: 16 years 27 weeks ago
Joined: 2004-04-19
Posts: 1
Points: 0

problem with side columns in mozilla

Hi

Just tried your generator. The result is fine in ie6 but reverts to the background color in the right and left columns in mozilla 1.7 and firefox .8.

Frank

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi

That sounds like no background image has been loaded.

So, was it when you viewed the sample layout on the web, or when you copied and used the generated code?

If the latter, did you download the image file (small pic under the textarea on the generator form page?

And did you save it to a sub-directory called gdimages (I think that is the default)?

In any event, I have now re-designed the code to work without the background image, and this will be released as v2.55

I am currently slogging my way through thousands of lines of code to check it all before uploading it (may take a day or two as I have missed my gap in work commitments now until Friday, so it is burning the late night oil for me Laughing out loud) )

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi All (and you Mike Laughing out loud)

RE: CSS Page Maker Tool

Features

  • Source Ordered Layout (Content First)
  • Substantial x-browser support in one design.
  • 100% page height design (except MAC IE 5.x, which is fluid height instead)
  • No images used to make layout
  • Fully customisable by user from online form (makes the css for you)
  • Heavily commented css and source code to explain design.
  • User can select from various Doctypes to use.
  • On line Tooltips to explain the form.
  • Uses source code ideas from Paul O'Brien, Big John, and loads of others, plus lots of ideas of my own!
  • Allows multiple header and footer rows
  • Centered fix-width design (fluid width design may come later), user sets the widths of all columns.
  • Top and Bottom margins (shows background color) now possible within the 100% height.
  • It's FREE

And now, V2.55 is online :tup:

I didn't put the sidebar intrusion in, coz I'm out of brain juice right now. :eek:

So, what's v2.55 got that's new:

  • User can select from various Doctypes to use.
  • Removed the 1px jog upwards hack for Safari - found a better solution to the screen re-size not re-positioning those absolute div's without top or left set bug.
  • Removed the background image hack needed for Gecko engined browsers (Mozilla and Opera). Replaced with a simple but effective additional draw of the background columns. Also found yet another bug in Opera which meant it didn't render the rightmost few pixels of a background image. This means that no images are used in the base design. Goal achieved!
  • Added the option of top and bottom margins to the design. These are not made by using the margin setting in the body style, do not attempt to do this (change the body style top or bottom margins from Innocent as the design will break.
  • Added the option of sub-headers and sub-footers. Wow. You can start to see how the 3D design engine will work (when I release it).
  • Fixed numerous bugs with the Tooltips in Mozilla and Opera browsers. They now look roughly the same in each!
  • Used part of Owen Brigg's css files (thenoodleincident.com) to try to offer common font sizing to all browsers. Nice one Owen!

This version has not been thoroughly tested, but it seems to work. No doubt something will go wrong. I would advise opening the layout first (not the tool itself) as this will then open the tool. It seems to cause problems if you open the tool/form first.

Find it all here (shorter opening page? Yes - yippee!):

[edit: new address]

http://209.216.241.33/ctindex.php

Enjoy. Laughing out loud

Trevor

[/][/]
drmaves
Offline
newbie
Last seen: 16 years 24 weeks ago
Joined: 2004-05-11
Posts: 3
Points: 0

Problem with Netscape 6

I just generated a page using your tool and immediately checked it in IE 6, Netscape 6 and Mozilla 1.5b.

IE and Mozilla looked good but Netscape 6 had a problem.

The Right Sidebar text displayed in the center column overlapping the center column text.

Here's a link to the page I created:

http://www.internet-marketing-reference.com/link-directory3.cfm

Is this a known problem?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi

The answer is yes.

There are 2 bugs as far as I know. As the thing is far from ready, I'm not really expectting it to be used much!

You will need an extra </div> before the </body> at the end, AND

IF your right column is a different width to the left column, you will need to edit the margin-left setting of the #mozfudgeright style by the difference in the two widths (can't remember which way, but there are only two alternatives, up or down!)

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Hi All

Just to let you know I've moved server, so the tool is now at this address:

http://209.216.241.33/ctindex.php

It is now at v2.55d and is bug free as far as I know!

Trevor

Ravan
Offline
newbie
Last seen: 15 years 26 weeks ago
Joined: 2005-04-30
Posts: 1
Points: 0

Problem with Generator Form v2.55c ?

Hi ClevaTreva,

Came across your Generator Form v2.55c. As a complete newbie I noticed several things. Please forgive me if my assumptions are wrong, due to complete ignorance...

I noticed there seem to be some duplicate close tags '}' in your css generated by the form above '.bottomtopmargin', '#subheader0', '#subheader1' and '#headergap'. These resulted in the header not being shown in Firefox 1.0.3.

Also the form seems to reset itself when clicking 'Show me' and undo (some of) my customizations so carefully made... I visited with IE 6.0. Am I doing something wrong?

Last but not least: Great work. I'm learning every minute, toying with your three column design!

Regards,
Ravan

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS site maker tool (2/3 Column Page Layouts), check it out?

Golly

Its ages since I last even looked at it, coz I'm really busy doing something more important right now.

The one online is broken, and I forgot to back it up first before uploading this version. The errors are easy to spot once you look hard enough (I can't even remember what they are, but there are a few!).

I will, once I get time, start to rebuild it in a way that is easy for others to follow how it works, and then upload the php code for all to see and use. My server isn't always up, so it isn't always online.

Sorry I can't help any more right now, I will post a reply when I have it fixed, but don't hold your breath!

Trevor

davek7
davek7's picture
Offline
Enthusiast
Portland, Oregon
Last seen: 10 years 48 weeks ago
Portland, Oregon
Timezone: GMT-8
Joined: 2005-11-04
Posts: 172
Points: 1

Hi, Your address doesn't

Hi,

Your address doesn't work. Is there another link to point to your layout page?

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Blimey, this thread's 3

Blimey, this thread's 3 years old!

Good news is Treva is working on a new version of his generator, I think he said it should be ready at the end of Feb. Once that's out we can post the link as a sticky in CSS Layouts Laughing out loud

/edit

p.s.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

Verschwindende wrote:
  • CSS doesn't make pies

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Gosh This thread's corpse

Gosh

This thread's corpse is so dead it's only bones and dust.

TPH is right, it's on its way.

It uses some ideas from the jello mold (but doesn't flex in width like jello mold does) but is IE7 compatible AND has 25% less css + html

The base templates are already on my siteunderconstruction site (but not linked from the home page coz the site itself needs work). Just search a few of my recent posts for some links.

mimbee
Offline
newbie
Australia
Last seen: 13 years 32 weeks ago
Australia
Timezone: GMT+10
Joined: 2006-04-27
Posts: 7
Points: 0

CSS layout generator

I can't find a link to your tool that works. Please can you re state it?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 51 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The last version I published

The last version I published is on the positioniseverything site (just google positioniseverything and clevatreva).

HOWEVER. That version is old now. I have a new version I am tinkering with. But I'm still not happy with it.

The basic idea (of the new code the new version makes) is now discussed in the How To forum on this site (see 100% height).

The old version is NOT IE7 compatible.

CT

mimbee
Offline
newbie
Australia
Last seen: 13 years 32 weeks ago
Australia
Timezone: GMT+10
Joined: 2006-04-27
Posts: 7
Points: 0

Found it!

Thanks Treva, I look forward to the latest IE7-proof version!