CMS Grid help?

[Budget101]

I'm trying to make a grid with the following:

3 Columns 310px 100% 180px

<div id="doc3" class="yui-tvb-r2">
    <div id="bd">
        <div id="yui-main">
            <div class="yui-b">
                <div class="yui-gc">
                    <div class="yui-u first yui-panel">
                        <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
                    </div>
                    <div class="yui-u yui-panel">
                        <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui-b yui-sidebar">
            <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
        </div>
    </div>
</div>

But instead of the 310px code showing on the left hand side, it displays on the right. Anyone know how to fix that?

Here

[Lynne]

Is there some additional code for this? The html you posted is not going to make any column 310px. So, you must have some CSS or something else doing that. Can we get the full code for this grid.

[Budget101]

Originally Posted by Lynne

Is there some additional code for this? The html you posted is not going to make any column 310px. So, you must have some CSS or something else doing that. Can we get the full code for this grid.

 <div id="doc3" class="yui-tvb-r2">

is what makes it the 310px but it still doesn't justify to the left= I'm using the default css in vbcms.css for the grids

[Lynne]

Well, "first" as a class means it is first in the display (aligned left). And "yui-u" means that each of the blocks are 50%. And "yui-gc" means to take 2/3 width. So, I think you are using all the wrong classes. Also, there is nothing in your html to say that one column is 310px and the other is 100%. Both are called out as "<div class="yui-u yui-panel">", so they have the exact same class.

Try something like this:

<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 310px; float:left; margin-right: -320px;}
.col_2 { float:left; margin: 0 190px 0 320px;}
.col_3 {width: 180px; float: right; margin-left: -190px; }

</style>
<div id="doc3" class="yui-tvb-l3">
    <div class="two_columns">
        <div class="col_2">
            <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
        </div>
        <div class="col_3">
            <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
        </div>
    </div>
        <div class="col_1">
            <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
        </div>


</div>

[Budget101]

Originally Posted by Lynne

Well, "first" as a class means it is first in the display (aligned left). And "yui-u" means that each of the blocks are 50%. And "yui-gc" means to take 2/3 width. So, I think you are using all the wrong classes. Also, there is nothing in your html to say that one column is 310px and the other is 100%. Both are called out as "<div class="yui-u yui-panel">", so they have the exact same class.

Try something like this:

<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 310px; float:left; margin-right: -320px;}
.col_2 { float:left; margin: 0 190px 0 320px;}
.col_3 {width: 180px; float: right; margin-left: -190px; }

</style>
<div id="doc3" class="yui-tvb-l3">
    <div class="two_columns">
        <div class="col_2">
            <ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
        </div>
        <div class="col_3">
            <ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
        </div>
    </div>
        <div class="col_1">
            <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
        </div>


</div>

Thanks lynne, but that one returned a completely blank style when I tried it in the grid.

[Lynne]

Hmmmm, I did that exact one in my CMS and it worked fine. :/ Is there anything in your error_logs (if you don't know where they are, ask your host) when you get that blank page?

[Budget101]

Originally Posted by Lynne

Hmmmm, I did that exact one in my CMS and it worked fine. :/ Is there anything in your error_logs (if you don't know where they are, ask your host) when you get that blank page?

Maybe I'm doing it wrong? Here are the steps that I took,

AdminCP> vbCMS> Grid Manager> add new Grid> Paste your supplied code > Save

Then created a layout, which returned a single column, this time no blank page.


Also, if I add the styling to the additional.css instead of directly in the template, that's when it comes up blank (missing)

.two_columns {float: right;} .col_1 {width: 310px; float:left; margin-right: -320px;} .col_2 { float:left; margin: 0 190px 0 320px;} .col_3 {width: 180px; float: right; margin-left: -190px; }

[Lynne]

I would not add the CSS to the additional.css template - that shows up on every page and you don't need that.

You need to go to Grid Manager > create a grid > Flatten Grid > then Edit and paste that code into both boxes, not just one. Did you do that?

[Budget101]

Originally Posted by Lynne

I would not add the CSS to the additional.css template - that shows up on every page and you don't need that.

You need to go to Grid Manager > create a grid > Flatten Grid > then Edit and paste that code into both boxes, not just one. Did you do that?

Yes, that's precisely what I did (on the first try) but it what it creates a blank layout. (I didn't mean page, sorry about that, it creates a blank Layout.)

Screenshot:
http://www.screencast.com/t/zGbo5s9PgK

(also, the div tag is not missing in the top part of the screenshot, there just wasnt room to scroll to show the entire code)

Screenshot of the code in flattened grid:
http://www.screencast.com/t/fdbpeQNOKO

If I go and add the style elements to the additional.css it creates a single box (but no widgets)

[Lynne]

Are you trying this on a default style (that is what I did)?