CMS Grid: two horizontal widgets in additional footer?

[ceho]

Hi, I would like to create a grid with one column for the primary content, a sidebar on the right and an additional footer. No problem so far.

However I would like to have two widgets within the additional footer, but they should be placed horizontal and not below each other (example with several horizontal widgets can be found here: http://www.swishzone.de).

I read through various posts here, and found out how to flatten a grid. I also copied and played around with a couple of codes (I found e.g. the one from Lynne where you have two or three horizontal widgets on top of the primary content), but I am perfectly stuck. Could someone please help me finding the right code? I am totally lost with all the YUI orders, and the result I am thinking of is actually looking so simple...

Any help is much appreciated.

[ceho]

No-one able or willing to help me on this?

[Lynne]

You really haven't given enough information on what you want. Each horizontal widget needs it's own div tag. You have not said how many horizontal widgets you need across the bottom and what dimension. The forum you link to has four widgets of equal dimensions. Is that what you want? And what about the sidebar? What is that width? Nobody can make you a grid at all since you haven't specified any dimensions/sizes/specifics about what you want.

[ceho]

Ah OK, thanks a lot. You see, I really don't have much of a clue of creating grids, this is why I need help. Otherwise I would have provided more information on the first place.

What I would like to have are three horizontal widgets. The dimensions indeed should be equal, so that would probably be 33% each, right? Does the height need to be defined as well? If so it should be 250px. I will use a sidebar of 240px on the right and one main column for the primary content. If it is possible at all the three aditional widgets at the bottom should be below the sidebar and the primary content.

Thank you very much!

[Lynne]

I just threw this together and it seems to work:
<div id="doc3" class="yui-tvb-r3">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
</div>
<div class="yui-b yui-sidebar">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
</div>
<div id="ft">
<div class="yui-gb yui-footer">
<div class="yui-u first">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>
</div>

[ceho]

Hey Lynne, this is exactly what I was thinking of. That is awesome! Yay!

Thank you very much! You really rule! Thanks!!

[reddyink]

Great Work!
I am trying to accomplish similar format.

Is it possible to export your grid xml and share it here! Thanks

I am trying to get 1 x 3 (widgets - 25-50-25) on the body top and 1 x 2 (widgets 75-25) on the footer.

Getting incorrect layout

<div id="doc3">
<div id="bd">
<div class="yui-g">
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>

<div class="yui-tvb-l50 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>

<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
<div id="ft">

<div class="yui-gb yui-footer">
<div class="yui-tvb-l75 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>

<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>

</div>
</div>
</div>

[ceho]

Sure, no problem, here it is :).

To get the grid to work I just did what you have to do: I created a new grid, than flattened it and copied the code Lynne provided in both "Layout Manager UI HTML" and "Default Template HTML". That was it, it is working.

Pls. let me know if the xml file is not working correctly. Best success.

[reddyink]

Thanks for sharing. I am trying to get Grid in as attached using header/body/footer.

Any suggestions? Thank you for your time.

here is the code:
<div id="doc3">
<div id="bd">
<div class="yui-g">
<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>

<div class="yui-tvb-l50 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>

<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
<div id="ft">

<div class="yui-gb yui-footer">
<div class="yui-tvb-l75 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>

<div class="yui-tvb-l25 first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>

</div>
</div>
</div>

[Lynne]

And you have pasted the code you posted into *both* of the fields after flattening the grid? And what is the exact error you are getting?

[reddyink]

And you have pasted the code you posted into *both* of the fields after flattening the grid? And what is the exact error you are getting?

Thank you for the reply. Posted in both boxes.
There is no errors but the boxes are displaying everywhere without any pattern.

I tried studying yahoo YUI for tags but couldn't figure out.
Basically what I need to
header with 3 boxes 25 - 50 -25
body with 75 and 25 (sidebar is okay too)

Thanks

[Lynne]

What does "the boxes are displaying everywhere without any pattern" mean? Can we get a link to the section using the layout? If there is no yui css for a 75-25 area, then you will need to write your own css to do it. Unfortunately, I cannot do that right now since I'm stuck on dialup and going r e a l s l o w.

[reddyink]

Thanks for the offer to help when your dial-up is fast.
Basically the boxes are not aligned as shown below. 3rd box shifted below 2 boxes in the header and 75-25 css don't know how to write!

[ ] [ ]
[ ]
[ ] [ ]

What does "the boxes are displaying everywhere without any pattern" mean? Can we get a link to the section using the layout? If there is no yui css for a 75-25 area, then you will need to write your own css to do it. Unfortunately, I cannot do that right now since I'm stuck on dialup and going r e a l s l o w.

[Lynne]

Did you look at all at the yui grids page - http://developer.yahoo.com/yui/grids/ You are using the wrong yui-xxx classes for your footer (maybe header also - I haven't looked). But, the footer wants class yui-ge, not yui-gb http://developer.yahoo.com/yui/examples/grids/grids-ge.html Also, you only use class first for the first column in that row. If I do those corrections for the footer, it works fine.

[reddyink]

Thanks again. Yes, I was using the Yahoo Yui guide before.

I have a header with 3 blocks (25-50-25) and a body (75 and 25 sidebar). NO footer.

Is there a way to fix the height of these boxes? thank you for your time. If it's working, can you please share the xml.

Did you look at all at the yui grids page - http://developer.yahoo.com/yui/grids/ You are using the wrong yui-xxx classes for your footer (maybe header also - I haven't looked). But, the footer wants class yui-ge, not yui-gb http://developer.yahoo.com/yui/examples/grids/grids-ge.html Also, you only use class first for the first column in that row. If I do those corrections for the footer, it works fine.

[Lynne]

You cannot fix a height for a div (unless you get tricky by using a clear image in there).

[ViewMy.biz]

What is the yui class if I want a fixed 250px column

I have a 3 column page (including sidebar)
left: sidebar 120px,
center: whatever is available
right fixed 250px (this is th yui I need)

Is there a doc for future reference?

[Lynne]

<a href="http://developer.yahoo.com/yui/grids/" target="_blank">http://developer.yahoo.com/yui/grids/</a>

[ViewMy.biz]

Do the grids read righ to left?

I flattened a regular grid with a left sidebar and it shows up as colomn 3

[Lynne]

The numbering really doesn't matter as long as each div/column has a unique id.