New css equalising columns layout tool needs testing

[ClevaTreva]

Hi All

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

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

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.

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.

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

Partially done, not yet tested.

You can now select from a list of doctypes.

Done and tested.

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

[Paul O'B]

My you have been busy

Let us know when it's all uploaded. It's turning into a great tool

[EvM-Mike]

Trevor,

How is the new tool coming along????

Thanks....Mike

[ClevaTreva]

Hi

It's like juggling a dozen balls at once

The good news is it is not far from being done. All the bugs have been removed/fixed (at least those reported to me, and those I spotted!). The doctype selector works. You can now specify the color of the divider between the body and header or footer. Rather than having to type 'transparent' to get an uncolored div, you can now tick a checkbox. The fudge to get mozilla and Opera working without a background image works.

The top margin works. All I have to do (about an hour's coding) is to duplicate the method for the bottom margin.

The subheader code works. I am about a quater of an hour away from getting the display page to show this (it uses different code to the code in the textarea)! At the moment it is coded to allow only one header block, and I am about two hours coding away from allowing five blocks in the header.

Another hour will see this added to the footer.

I was going to see (then) if i could get the sidebar extending up into the sub-headers and down into the sub-footers. When I've got the rest done, I'll see how easy the html looks, that'll give me a handle on how long it'll take me to code the php to make it. BUT, the form page is done with all these variables in as inputs/selects/checkboxes.

So, tonight? Maybe. Before the weekend? Yes.






Trevor

[EvM-Mike]

It's like juggling a dozen balls at once

Trevor

I can only imagine....

So, tonight? Maybe. Before the weekend? Yes.

Trevor

Great. I can keep myself occupied with my menu bar until then.....

Thanks....Mike

[ClevaTreva]

The top margin works. All I have to do (about an hour's coding) is to duplicate the method for the bottom margin.

Half done. Leaving this for tomorrow, it will be easy to do, all the variables and validation now setup, about 30 minutes work left.

The subheader code works. I am about a quarter of an hour away from getting the display page to show this (it uses different code to the code in the textarea)!

Done

At the moment it is coded to allow only one header block, and I am about two hours coding away from allowing five blocks in the header.

Mostly done. Variables working, validation working. Small amount of php to add to get it to make more than one sub-header. Approx 30 minutes work.

Another hour will see this added to the footer.

Some done. Maybe 45 minutes work, maybe a bit more.

So, tonight?

Got to tidy up the kitchen. Got a heavy cold. Need sleeeeeeeeeepppp

Before the weekend?

Yes. Probably by 6pm BST (GMT+1 hour) Friday. The controls are there (in this next version) for the sidebar intrusion, so you can see what it would look like from the examples in the help tooltips.






Trevor

[ClevaTreva]

Hi All (and you Mike )

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

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

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 0) 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 (www.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.





Trevor

[Paul O'B]

Hi Trevor,

Looks great . Well done on a good job, your hard work certainly shows.

I'll have a proper play around with it tomorrow as the sun is shining today and I must get outside

Paul

[EvM-Mike]

Trevor,

Great job.....

Thanks...Mike

[ClevaTreva]

Trevor,

Great job.....

Thanks...Mike

Hi Mike.

Just looked at the sidebar intrusion feature. A doddle to do in css, wonder how long to do in the tool in php? A day I would guess, so I'll do it for end of play on Monday.

I'll then take a look at another feature of Big John's piefecta design, extra content boxes in the sidebars.

Then on to 3D graphics.




Trevor

[ClevaTreva]

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

[carrotflowers]

Hey there,

I'm having a strange thing happen: I se the tool, select all, copy and paste into Notepad and save as html. And I keep getting the weird closing div tag with a slash the wrong way <\div>

Do you know anything about this? I tried it in IE6 then Firefox 0.8 (both PC). I've attached the html file.

[sqbadyvr]

I love this tool, but I just tried to create a left-sidebar only layout. It looks great on the 'show me', but doesn't work once XHMTL code copied and pasted. In IE 6.0, the header and footer appear to be scootched 1 px to the right.

In Mozilla 1.6, it's a complete mess. Don't know how to describe it more than that.

Have attached the XHTML output, in case it can help you.

[ClevaTreva]

Hey there,

I'm having a strange thing happen: I se the tool, select all, copy and paste into Notepad and save as html. And I keep getting the weird closing div tag with a slash the wrong way <\div>

Do you know anything about this? I tried it in IE6 then Firefox 0.8 (both PC). I've attached the html file.

Hi

Whoops, typo in the php, now fixed. This means the container-center div would'nt have closed and all h*ll would have broken out. You can just edit it to the correct </div>

Can't see the attached file coz the moderators have to approve it, which takes a little while.

I'll come back and look at it when it's posted. Try that fix anyway and let me know if I need to look at the attachement (if that HAS fixed it, suggest you edit the post and delete the attachment).



Trevor

[ClevaTreva]

I love this tool, but I just tried to create a left-sidebar only layout. It looks great on the 'show me', but doesn't work once XHMTL code copied and pasted. In IE 6.0, the header and footer appear to be scootched 1 px to the right.

In Mozilla 1.6, it's a complete mess. Don't know how to describe it more than that.

Have attached the XHTML output, in case it can help you.

Hi

Whilst we wait for the moderators to approve the attachment, which can take a while, search for "<\div>" and replace it with "</div>"

Typo in the code, now fixed in the tool.




Trevor

[carrotflowers]

Hi

Whilst we wait for the moderators to approve the attachment, which can take a while, search for "<\div>" and replace it with "</div>"

Typo in the code, now fixed in the tool.




Trevor

Thanks--yeah, I actually made that change but wanted to make you aware of its presence.

Really an awesome tool! Thanks!

[carrotflowers]

one other thing I found--I am modifying the output of the default code to make it 2 column (since I can't seem to figure out how to use the tool to do it- duh..)

Anyway that aside, I was looking in the generated code for the rules for container-center div. Couldn't find any. An oversight? Or I am missing them?

Thanks.

[ClevaTreva]

one other thing I found--I am modifying the output of the default code to make it 2 column (since I can't seem to figure out how to use the tool to do it- duh..)

Anyway that aside, I was looking in the generated code for the rules for container-center div. Couldn't find any. An oversight? Or I am missing them?

Thanks.

Hi

In one of the boxes, there's an option to have right column enabled. And if you uncheck it? No right column!

The version up there right now isn't quite what I wanted. It says version 2.55d (and has that div thing fixed), but it is in fact some way towards v2.60. What's the difference?

Options are missing from the form. Essentially, all horizontally drawn 'borders/dividers' are going to be content-less divs rather than borders. I won't go into the why's and wherefor's, just accept that this is a move forward.
Anyway, the tool doesn't make these borders right now. So, despite what you select for borders and dividers, the tool will not put any horizontal ones in.

I'm about an hour away from finishing the re-coding of the form to allow this, then a few hours work on the php in the tool to make the new div's.

The first beta of v2.60 will be up (hopefully) within 24 hours. Once I have that stable so that you can at least replicate what v2.55c could do, I shall look at trimming the code for the two column design, and allow disabling the left column as well as the right (v1 used to have this option, but the design wasn't stable enough for it to work).

Anyway, thanks for the input




Trevor

[carrotflowers]

Hi
In one of the boxes, there's an option to have right column enabled. And if you uncheck it? No right column!
Trevor

Yes, I saw that, but when I selected it, the output seemed broken, so I figured I was doing something wrong.

About the center-container thing, there's a div called center-container but there are no rules for center-container that I could fine...but I'll wait for 2.6 to check again.

[ClevaTreva]

Yes, I saw that, but when I selected it, the output seemed broken, so I figured I was doing something wrong.

About the center-container thing, there's a div called center-container but there are no rules for center-container that I could fine...but I'll wait for 2.6 to check again.

Hi

I just did the disable right col thing on my local server and it did just that. The center-container div doesn't have any style. It's a virgin waiting for you to do what you will with it!

Anyway, I plowing on with 2.60 right now.




Trevor

[Widow Maker]

Thanks a lot, this is going to help a lot of people, myself included of course

[Luxus]

hmm no update long time...
do you disconnect this project trevor?

i try it out yesterday and it looks not right in firefox
the header dont get yellow .. like in IE

[ClevaTreva]

hmm no update long time...
do you disconnect this project trevor?

i try it out yesterday and it looks not right in firefox
the header dont get yellow .. like in IE

Hi

Not discontinued as such, but my life is a bit hectic right now, so not much time to work on it.

The version online right now is broken (as you can see!).

I was trying to make it work with graphics to make nice(ish) templates, but that doesn't lend itself to the generator idea.

So I am (bit by bit) making a hybrid. The reason it's taking so long is because I had to re-think the way the genrator makes the code into a textarea. The newer version I have puts this code into files for you to download and save, with separate files for different chunks of css and the html.

I can't see me having the time to fix it any time soon.




Trevor

[merlinmedia]

Hi,

Great tool! In the last year I have created several commercial websites with customized versions of Holly 'n John's Piefecta 3 column model (www.aft.org is one example). I recently went back to their site and found the link to your web tool to auto-create the CSS.

I noticed that you talked about working on a version 2.6 with some cool new features. I am specifically interested in the: "Sidebar intrusion into the footer and header".

I totally understand how life can 'get in the way' of endeavors like these. So, I was wondering -while 2.6 waits to be completed- if you had an outline or how-to on the Sidebar intrusion?

A feature for 2.6 that I could use is the ability to toggle off the 100% height of the resulting page (let the page be short if the content is small).

One niggle with the current output I find is that I can 'see' the side bars below the footer (one pixel height across the bottom). I have only tested this on Win IE 6 and Mac Safari, both exhibit the colors of the 3 columns below the footer. I assume that this cold be fixed, or is it an issue with making the page 100% of the browser window height?

Anyway, I think you have done excellect work. I totally understand the days and nights of hair pulling to get it to this point.

Andrew

[ClevaTreva]

Hi Life can indeed get in the way!

I have fixed that one pixel thing on the version I have as a test version on my PC.

BUT, it will be a while before I can put the new version up, that is because it needs a re-work to be more efficient on my server, poor old thing!

And I have doen a version that is not 100% high already, but without a switch on the form, so all I would have to do is enable it!

I will post on the forum when I have done it.




Trevor