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?