Built with tables?
 

Note by Flynn: This thread started 2010.
ThemeFrame does NOT use tables for layout (or for anything else).



I'm very interested in the idea of ThemeFrame, but my big question is: are the generated themes - like Atahualpa - laid out with tables to create the 2/3 column layout?

That's the big issue that stops me using Atahualpa more. As web designers, I beleive we should just not be using tables to create layout any more, no matter how convenient that might be. It's neither semantically correct nor is it accessible - and so could not be used for public sector type clients who have to follow policies on these matters.

If you've found a way around that, great, I'm in! If not I'll have to sit it out until there's an option for this (I remember you mentioned this as a possibility for Atahualpa).

I'll be very interested to hear the answer!

Thanks.

Martin

TF creates the columns with a table because you cannot build flexible layouts that work well in IE 6. If any item (image, table, form select field, long words) in any of the columns is too wide by IE6's measurement (which is different from other browsers, so everything still looks fine in other browsers) the whole right column will drop way down below the layout and move to the left.

Nonetheless a DIV-only option is coming, because for static width Layouts there isn't that dropping sidebar issue. That option won't come within the next few weeks, but it is high on my to-do list. The reason I started with the table-colgroup-div technique is that it can do both static and flexible width reliably

On a side note, this is a bit more than just "using a table", the layout technique in Atahualpa/Themeframe works with the colgroup element to set the column widths, and a DIV wrapped around everything. Simply using a table would cause other issues, for instance while no sidebar would drop, the table would expand beyond the desired width causing vert. scrollbars whenever it encountered too-wide-elements.

This does not happen with the way I am using both a table AND CSS Div's, which in my opinion combines the best of a DIV and a table

But as mentioned DIV-only will come, was even planned from the beginning...

I'm looking forward to that option. I noticed that Facebook dropped support for IE6 this week, so the dinosaur will soon become extinct.

And what about some kind of grid-based layout? That would make magazine-style layouts a lot easier.

I will probably integrate the 960 grid system. It is fairly established and the license fits also

That's exactly the one I was thinking about. Thanks!

Flynn, will you fold this idea into Atahualpa at some point as well? I want to use the theme for a client, but it's a municipal site and they have a no-tables rule.

That would be cool, too, Paula. BFA seems to be all about versatility. I just donated last night (still waiting for forum access to download and can't wait to spend the rest of the day playing with it while I set up a site for a volunteer organization) and am champing at the bit to see how Themeframe is set up. But I've been running a site for a year on Atahualpa, and were it not for my husband's need to gently move from visual design into web design, I would have continued to design sites for others using it. The grid system is something a number of frameworks use. It makes it simpler to do a magazine-style site.

I will most likely add this to Atahualpa but only after it's done in ThemeFrame. And it might be a new theme with a similar backend if it requires too many changes in Atahualpa. It's a relatively big change as it affects many HTML elements etc...

For what it's worth, the key thing I'm looking for is a magazine-style layout capability. In case of terminology differences, what I mean is that is has a set of sections, for the top-most few post categories, each say section divided into thirds, each third is the most recent post of a sub-category. I don't think current beta of Themeframe will provide that layout functionality, but this 960 grid thing seems pretty nifty.

Reading through this post, I was excited to hear that the 960 Grid system will be implemented into Atahualpa. Then I saw the date of the thread: 2008!

I have a Photoshopped design (or see link below) that I really need to convert to a website, and I'd like to continue using Atahualpa. One thing that I have been wishing for in my current Atahualpa theme (see www.timothychambers.com) is more flexibility in the middle section. A Google search led me to the 960 Grid System. That sounded great! However, being a newbie, I need the security blanket that the bytesforall forum provides. :)

So...when and how will the 960 grid work? Any suggestions for turning my design into a working site?

my design: http://forum.bytesforall.com/attachm...4&d=1298857369

Here is a screencast of a quickly thrown together idea of how you could break the theme into sections. This idea uses no sidebars. Does this give you any thoughts?

Hmmm...thanks, Larry. Okay, so the widgets can be made to a full-page width with a certain height. I can imagine setting that in ATO. That leaves me with two questions off the bat:
1. how can I subdivide the widgets to have the different (individual) sections within it; in this example there's one box that's full width, and then three boxes below each approximately of 1/3 width.
2. can I have more than two widgets? E.g., if I had three rows of 'boxes', then I'd have three widgets with three boxes each?

In 2008, Flynn was thinking of integrating the 960 grid system. That system seems like it's made for dividing up the page like I'm talking about here. Is this what you're thinking?

Larry- thanks for your attention and help!

You would put one single sell widget area in and after that have a three celled widget area. If you use no demensions they will default to 1/3 of the width.

and the single-celled widget defaults to the page width? Or do I set that? As for the number of cells, I determine that, right, but the number of things I put in the widget?

Any widget areas default to full width. To shave items side by side I generally use multiple celled widget areas as the CSS can get "interesting". To populate the widget areas I would take a look at Spectacu.la page widget. This allows you to put any page in a widget area which gives you the functionality of uploading images or whatever. The left sidebar on this site uses that plugin.

Thanks. I checked out the two links and I think I see what you're saying.

One question that popped in my head: Do all the pages on the site carry the same layout (of widgets) as the home page? Or can they be different, having the traditional layout?

Hi Larry- I just watched the video for ThemeFrame (at http://themeframe.com/video/) and saw how easy it was to create the look of four widgets running horizontally across the top. It looked a little confusing at first, but at the same time it seemed really intuitive because of the WYSIWYG method.

Is this the theme you're suggesting I use, or is it the Atahualpa theme?

I was talking about Atahualpa but Themeframe would work as well and may be more intuitive.

I'll mess around using Atahualpa. If that doesn't work, I'm sure you'll know about it! :) Thanks for your time and helpful advice. I'll be adding a contribution as soon as I can.

This is most timely! :)

With thanks

Hi Imilesw,

Would this be the best way of creating columns in the Footer, applying the Add New Widget Area.... I have done this and have tried to add more than one Widget - and failed - I have one very wide Widget displaying Pages Menu - spread across the wide of the site ... and that's it.

I hope to be able to display Site Map and other bullet point information appearing as 3 columns within the Footer Box.

You would create a 3 cell widget area. This will put the areas side by side. As you found when you put several widgets in one area they go under on another.

Thank you, Imilesw, could you please let me know how to create a 3 cell widget area, so that I have 3 areas side by side, as I seem to have failed (more than once) in doing this - I would like, be more than happy, to donate/pay you for your time and effort.

If you look at ATO>Add New Widget Areas you will see the following example code.
One configuration to get a three celled area with a text alignment of left top and auto width of the cells would be.
You can change the name to something more useful to you and put widths and alignments as explained in the text.

Thank you, Imilesw,

I had applied the ATO example (more than once!) and the widgets simply, as you described, went under each other.

And so, now, I have deleted my last - feeble - attempt, and refreshed session, cleared cached, and applied your marvellous three celled new widget area ... and all is well ... except that each widget goes down - within the Footer Box - in a row ... whereas, I need them side-by-side in the Footer Box.

You should have three new widget areas. You put one widget in each area.

Imilesw,

Red-faced ... I realized soon after posting ... don't I just like to make life difficult! :o

Thank you, truly, very much appreciated.

(donation on it's way, grateful - to have someone to discuss this with - for the help provided).

Berean.

<?php bfa_widget_area('name=My widget area&cells=4&align=9&before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>'); ?>


I've just checked my W3C Validation and the Code for Add New Widget Area creates an Error

<div id="my_new_widget_area" class="bfa_widget_area"></div>

Error Line xxx, Column xx: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

:confused:

What code did you use for creating the new widget area? You could also try the following although in my experience some of the W3C validation errors don't mean that much.

Hi Imilesw,

I applied the Code(s)...as per ATO > Add New Widget Area and tried, and tested, the Code(s) as suggested above, here, in this thread i.e......

PREVIOUSLY....

W3C Validation XHTML PASSED successfully checked as XHTML 1.0 Transitional!

THEN....

Add New Widget Area in Footer = FAILED with 1 Error as described above in previous Post #28.

And so...

If I remove My New Widget Area from Footer .......... than all is restored as previously PASSED.

Consequently...

There is something amiss with regard to Add New Widget Area in Footer.

With all due respect, I consider it important that, at the very least, one is able to display ones site as XHTML PASSED XHTML 1.0 Transitional - as recommended by W3Schools.com

Could this be looked at, please.

Many thanks.

I am checking into this.

I have looked into this and still don't put a lot of weight on validation. As an example I ran one of my sites through and it passed. I then set the theme options to not compress the CSS and it didn't validate as the validator sees comments in CSS as errors. This tells me the validators has errors.

This is why I gave up running sites through a validator years ago. Too many variables and it takes to long to figure out fixes. I open my sites in various browsers and if all looks good I am happey.

Hi Imilesw,

Ah, but, I was not referring to CSS Validation (which has never passed, plug-in variables being one reason as to why CSS validation fails).

I consider it important that, at the very least, one is able to display ones site as XHTML PASSED XHTML 1.0 Transitional - as recommended by W3Schools.com

I have always, up till this point, had XHTML Passed of which is after all a standard - as is recommended by the much mentioned here at BFA W3Schools.com

As I said, there is something amiss with the ADD NEW WIDGET Area to the Footer resulting in one Error and FAIL XHTML.

ATO > Add New Widget Area.

Have you tested Add New Widget Area - Footer

if you want to get rid of the 'error', edit footer.php and remove line 99 and line 101 (version 3.6.4)

This is helpful, Larry. My next question is this: do all the pages on the site have to have this layout then? Or can just the homepage be divided up into the 'horizontal' widgets and the sub pages not?

This is where various methods can be used. You can wrap the New Widget Area code in a conditional that will only show (or not show) on certain pages. The easier way for most people is to use the Display Widgets plugin which lets you chose which page they will show. If they are set to not show you won't see the widget areas.

That's good to know. I presume, then, that I can't have horizontal sidebars (aka widgets?) on the front page, but then have a vertical sidebar on the left side of all other pages? I'm wondering if you're always limited to four sidebars (two on each side), and if so, then if I use three horizontals on the front page, then I'd one to use elsewhere? And if I used four horizontals on the front page, none to use elsewhere?

You can do any and all of what you mentioned. It's a matter of understanding the new widget areas and Atahualpa enough to pull it off. It's kind of hard even to describe as some of these ideas require the use of code, plugins, and special CSS.

For example you can put a widget area inside a widget area so if you put a single cell widget area in a php aware widget you could then put a 2 cell widget area right below it. Or you could put a 4 celled widget area in a php aware widget to give you four sidebars.

It can get a little nuts.

Thank you. :)

Is there an update on when the grid system may make its way into Atahualpa or ThemeFrame? In Atahualpa 4.0 perhaps? Flynn mentions here that he is working on a "completely new backend for Atahualpa 4.0".