yui noob question - grids/layouts/tables ?

[amackay11]

Hi,

I've spent some time reading about ajax, yui and yui-ext and it all seem very cool. Now I am trying to implement. My current 'home' page uses a <table> to layout items. I've got 4 thumbnail images in a 4x4 layout, some boxes with lists of links etc. All this is stacked nicely in the table kind of like:

1/2 1/2
1/2 1/2
1/3 1/3 1/3
1/1
1/2 1/2

I have tried to create the same layout with yui-g, yui-b, yui-u etc. but it ends up in a mess, with things not lining up. I could start punching in absolute widths in my divs but this does not seem like the 'right' way to do it.

Is there a better way with yui-ext? The yui grid seems too high level and the yui-ext grid seems to be more for data display with constant width columns? Does it make sense to nest with YAHOO.ext.BorderLayout ?

I think I just need to be pointed in the right direction and I hope I can go from there.

THANKS!!
Andy

[tryanDLS]

It's been a while since I looked at the yui layout stuff, but I think it's DIV based. You're probably making your life difficult mixing tables and divs. I personally would scrap the tables and just use the divs with the yui stuff to do either 1/2, 1/3, or 1/4 type layouts.

You could also do a yui-ext BorderLayout, but once again I wouldn't mix it with tables.

[jbowman]

BorderLayout would be the way to go I think, you'd be using nested layouts.
User a nestedlayout in North of your main layout for
1/2 1/2
1/2 1/2
1/3 1/3 1/3

Then use your main layout west, center, east for

1/1

Then use your main layout south for

1/2 1/2


Of course remember, people are going to need javascript enabled to see this display.

[amackay11]

Thanks tryanDLS.....just to be clear, my old page had <table>s and I have started from scratch, trying to reproduce the same (or better) look and feel using exclusively div/css/yui-g.

I've read about the benefits of separating style, content and logic so my goal is to have one css file, one javascript file and one html file that only has divs/grids or non-style/non-logic elements.

[brian.moeskau]

Like jbowman said, border layout should work, but requires javascript, so I'd look at the purpose/audience of your site. If it's going to be an app, or otherwise dependent on javascript anyway, then border layout is a good choice. If it's just a static layout page, then you might be better off sticking with yui grids, which should also work fine (you probably have your div order/nesting wrong I'd imagine if it's not working).

In either case, if you have trouble once you get into it, just post your code here and someone should be able to help you out.