3 equalizing col layout +header +footer

[EvM-Mike]

With your layout you may be better off loosing the 100% height and then all your headers can have fluid heights instead of being fixed height and overflow:hidden. It all depends what you put in the headers I suppose.

Hope this gives you some ideas anyway.

Paul

Paul,

Thanks for the code....I will have to dedicate a page of my website to you....hehehehe....

I am not too concerned with the 100% height, it would be nice but if I can get everything else working I can live with it. Chances are most of my pages will expand out to 100% anyway.

For the most part my header will always be the Evolution Motorsport jpeg and a menu system, so it will stay constant. The sub header will contain a breadcrumb trail and a page heading, so that should be pretty consistent as well. I may also put a search box there, but that could go in either the left or right column.

Hopefully I can put a few hours into this tonight...This whole day job thing really puts a crimp in my web design. I will have to look up the overflow property as well, I have seen this before. I am reviewing Trevors generated code for some ideas.

This is my first foray into CSS so it can get a tad confusing. I think I got the Doug layout to have content first, but now I am looking into the code generated by trevors program to see if i can massage that.

Eventually I will get this mastered.....

Thanks again....Mike

[EvM-Mike]

Paul,

The sub header will contain a breadcrumb trail and a page heading, so that should be pretty consistent as well. I may also put a search box there, but that could go in either the left or right column.

Thanks again....Mike

One thing I could do for the sub header is make a center column div and a right column div both the same height with a border bottom. This would look like what I want, then maybe I could just put my search box at the top of the right column and leave the bread crumbs and heading in the center div.

Would this work or would there be issues lining up the bottom borders to match?

Mike

[EvM-Mike]

Paul,

After all this wrangling, I looked at my original page:

http://www.evolutionmsport.com/phptest/thurs.php

This seems to work pretty good in IE 6.0, Netscape 7.0 and even IE 5.5.

In 5.5 one of the borders becomes visible and in netscape it may eliminate one of the borders on the left of the subheader.

I figure 95% of the people coming to my site are IE and Netscape.

Is there anything glaringly wrong? This seems to be a little stronger than my more recent attempts...or am I missing something?

Thanks....Mike

[Paul O'B]

Hi Mike,

You can eliminate the border in ie5.5. by shifting the element #bh 1px to the left. You can hide it from other browers if you want but it shouldn't make much difference either way.

.bh { position:relative;height:70px;background-color:#ffffcc;width:100%;z-index: 10;left:1px;}

I'm not sure why you has a negative margin top in there so I took it out and took out the margin:top from here to match.

.center { margin: 0px -8px 0 -2px; }

I coudn't see the problem with netscape/mozilla.

You do realise that the subheader is only as wide as the centre content?

Otherwise it looks fine

Paul

[EvM-Mike]

Hi Mike,

I'm not sure why you has a negative margin top in there so I took it out and took out the margin:top from here to match.

......

You do realise that the subheader is only as wide as the centre content?

Otherwise it looks fine

Paul

I'm not sure why I did that either. I was going to fiddle with that tonight.

Yeah I know the content is just over the center, but I think I can live with it. I am going to clean this page up, then look at the changes you talked about earlier in the day for the other page.

I actually tried to replicate this site:

www.ptc.com

On the secondary pages there is a subheader that is over the two right columns, but if you make the window smaller it appears that it is just the center column.

http://www.ptc.com/appserver/it/icm/...w=y&keyword=34

Also, on the "thurs.php" page of mine, if you look closely you will notice the border under the subheader and above the right column stops short on the right side. It is hard to see with the white, but it appears the PTC site has the same issues.

Basically, I think I am just way to anal.....hehehehehe

Thanks....Mike

[Paul O'B]

Hi Mike,

I thought you might be interested in this version that is simplified and using two background images for the columns so there is no negative floating required.

The header and subheader arefluid and can expand. The only fixed item is the footer and that's only to preserve the 100% height.

This version is very robust (so far) and should work on mosr browsers (except for the 100% height on mac but still should be ok). It may need tweaking here and there but works fine in ie5 - 6 and firefox.

http://www.pmob.co.uk/temp/3colfixed...der_simple.htm

Hope its of some use.

Paul

[EvM-Mike]

Hi Mike,

Hope its of some use.

Paul

Paul,

That layout looks nice. I will go through it tomorrow when I have some time. I am also waiting to see trevors next version of his generator, but it might be hard to beat your latest layout.

Thanks...Mike

[dlucas]

Paul,

I am new to CSS and just want to say thanks for holding our hands while we make the transfer from tables to CSS. Your example pages are very helpful.

Dan

[Paul O'B]

Hi Dan,

Glad the examples are helping

Have a look around the other threads as well as there's a lot to learn here on Sitepoint.

Paul

[WoodiE55]

Paul,

I have to agree with dlucas your example pages are VERY helpful. I'm used to using tables and CSS only for text formatting and so on. Right now I'm using one of your 2 column templates as a starting place to learn CSS for page layout. Along with your example pages, would there be any books you'd recommend an amateur to read to help learn more about CSS and using it for page layout?


Thanks,

-Michael

[Paul O'B]

Hi Michael,

Thanks for your comments

Eric meyer has just released the 2nd edition of Cascading Style Sheets The definitive guide (O'Reilly) and is a useful book to have for reference although it is by no means a tutorial.

I prefer books like these that go through all the elements and tell you what they are supposed to do and how they work.

In the ned you will probably need a number of books if your really going for it or otherwise there are loads of sites and tutorials on the internet. If you look in the helps and tips sticky thread you will find a lot of links in there also.

Paul

[ClevaTreva]

Hi All (and you Paul )

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]

Good work again Trevor I will play around with it tomorrow

Looks excellent

Paul

[Paul O'B]

Hi,

To add to my collection of 3 column layouts I have added a 100% layout that allows the header to be a fluid height and expand as the screen is resized. This is a lot more useful than the previously fixed height header but obviously won't work with the content first version.

I've also added a subheader that is also fluid without ruining the 100% height and spans 2 columns (if needed).

Hasn't been fully tested yet (even though it says it has).

I'm sure Trevor could proabably include the fluid height in his layouts as no hacks are needed. I don't know why I didn't think of it before

Heres the link:

http://www.pmob.co.uk/temp/3colfixed...uidheader1.htm

Paul

[ClevaTreva]

I'm sure Trevor could proabably include the fluid height in his layouts as no hacks are needed. I don't know why I didn't think of it before

Hi Paul

My current design, as you say because it has the content first, won't allow a fluid height header. However, I fixed the width too, which means it isn't fluid width either, because it is the fluidity of the width that gives rise to the need for a fluid height header.

I believe the 2 design concepts are mutually exclusive for this reason.

You wouldn't (or maybe you would ) believe the amount of hours needed to convert a design into a php script that can handle and validate all the possible variable variations. I'm fairly good at keeping code to a minimum, but the tool I have written has become a monster

My project load has to be kept under control due to other commitments.

I fully intend the tool to add a few more features, but, unless someone tells me it is seriously wrong or can suggest better ways of coding the css, it will now move into phase 2, adding 3D designs to it.

It was my intention to have it done and dusted by the end of May (ish), and then I will pick up on the project I have had on stall whilst I did this one, which was a CMS that needed this css code to work (couldn't get it to work cross-browser using tables). That project will take another 2 months to complete.

Then I'll take a step backwards and look at the tool again to see whether a fluid width design can be built into it. It probably can. It may even be easy (only a few weeks to do). But bare in mind how long this tool took to get this far (4-5 months, includng a while to learn css, as I knew nothing about it before).





Trevor

[Paul O'B]

Hi Trevor,

Didn't mean to throw more concepts your way

I just realised what I said didn't make much sense in the concept of fixed with because as you pointed out it doesn't need to expand.

includng a while to learn css, as I knew nothing about it before).

That's quite an achievement you should be proud

Paul

[EvM-Mike]

Paul,

I was waiting for Trevor's tool, but his subheaders won't work for me. So I am back to checking out your latest rendition, which has the images to fill both right and left columns.

Is there a way to generate the gifs automatically for this, or do I just have to create the items using photoshop?

Thanks....Mike

[Paul O'B]

Hi mike,

You just need to make the gif yourself. It only takes a couple of seconds lol.

Just make it the width of the column and about 5px high.

In the latest example there is only one bg gif needed and that's only if you want one column a different colour - otherwise no gifs are need at all if you don't mind both columns being the same colour.

In the previous example I used 2 bg gifs because I didn't use the negative margin technique but that example doesn't allow for fluid headers like the latest one.

This is the latest one:
http://www.pmob.co.uk/temp/3colfixe...luidheader1.htm

Paul

[ClevaTreva]

Paul,

I was waiting for Trevor's tool, but his subheaders won't work for me. So I am back to checking out your latest rendition, which has the images to fill both right and left columns.

Is there a way to generate the gifs automatically for this, or do I just have to create the items using photoshop?

Thanks....Mike

Hi Mike

What was the problem? Is there a technical issue with my tool, or simply the design offered by the tool didn't meet your needs, and if so, why not and is it something I should change?




Trevor

[EvM-Mike]

Hi Mike

What was the problem? Is there a technical issue with my tool, or simply the design offered by the tool didn't meet your needs, and if so, why not and is it something I should change?

Trevor

Trevor,

No your tool is awesome, its just the design. In a perfect world I am looking for the following (in order of importance):

1. 3 column layout, with header and footer.
2. 100% height, with a fluid center column.
3. Content first.
4. Each section of the page to have its own color definition, without gifs if possible.
5. Finally a subheader, but only over the two right columns. In your design the sub header spans the entire page.

Basically like the link paul provided above. That design requires one gif, and I am not sure it can have content first with the way the subheader has been done, but i am hoping to look at that today. Nevertheless, the latest one from paul may do the trick.

Your tool has a fixed width and as mentioned the subheaders are full width. I have been reading the threads and understand that you want the fixed width, as for the subheader, thats just a whim of mine.

Then once I get that figured out I can make a minor change to some column widths for my home page. I may try to add a subheader to paul's 4 column layout, although the subheader would only span the last 3 columns. Something similar to this:

http://www.evolutionmsport.com/phptest/thurs2.php

This design craps out when you make the page smaller, the one div I want for the third column falls below.

Nevertheless, your tool is amazing, in fact I have been using the heavily commented CSS to better learn php and better understand some of the solutions paul has proposed. This is my first foray into css, so I am learing alot.

Again thanks for all of the help....Mike

[EvM-Mike]

Hi mike,

You just need to make the gif yourself. It only takes a couple of seconds lol.

Paul

Paul,

Yeah I can make the gifs....photoshop is my best friend....hehehehehe...I was just hoping to be able to change all the colors on the fly, but if it boils down to changing one gif and getting everything else I want, I may be able to live with that. Having the 2 columns the same color may not be the end of the world either.

Hopefully tonight I can review the link you provided and look at the edits I am trying to do to my one page, then move onto my home page.

Thanks....Mike

[ClevaTreva]

5. Finally a subheader, but only over the two right columns. In your design the sub header spans the entire page.

Hi Mike,

I rushed the tool out on Saturday. I had a feature (disabled on the form) called sidebar intrusion.

How it works is like this.

Set two header rows (I called them subheaders because they are both inside the header).

Set Left Sidebar Intrusion into Header to Level 1.

The top header row sits across all three columns, but the second (lower) row sits over the center and right columns only, because the sidebar has intruded upwards into the header by one row.

I did the html easy peasy.

Making the php generate this dynamically is not so easy. About halfway through it right now.





Trevor

[EvM-Mike]

Hi Mike,


The top header row sits across all three columns, but the second (lower) row sits over the center and right columns only, because the sidebar has intruded upwards into the header by one row.

Trevor

Trevor,

With this sidebar intrusion, can you change the color independently of the header? My header will have a gif banner, followed by the BrainJar drop down menu in the first row, then the second row of the header woul be the "subheader". Am I thinking of this correctly?

Thanks...Mike

[ClevaTreva]

Trevor,

With this sidebar intrusion, can you change the color independently of the header? My header will have a gif banner, followed by the BrainJar drop down menu in the first row, then the second row of the header woul be the "subheader". Am I thinking of this correctly?

Thanks...Mike

Err, not sure what you mean.

The attached gif is a tiny teenie gif (a reduced screenshot mockup) of what I described above (although the borders may be different in the final version). If it isn't showing, it means the moderators haven't approved it yet, come back in a bit




Trevor

[EvM-Mike]

Err, not sure what you mean.

The attached gif is a tiny teenie gif (a reduced screenshot mockup) of what I described above (although the borders may be different in the final version).
Trevor

Yeah that was confusing.

Nevertheless, that is exactly what I am looking for. In your design can the left and right columns (the pink ones in your gif) have different colors? Also, will you have a similar sidebar intrusion for the footer? That is something that would work for what I am envisioning for my home page.

Also, would it be possible to modify your layout to have a fluid center column?

I know your tool won't do it now, but if I used the tool to get the base design, could I get it converted to a fluid design?

Thanks...Mike