Custom grid ? how do I ...

[K4GAP]

I want to have three vertical sections on my Articles page. I'm using the grid below ...


<grids>
<grid name="Mine" auxheader="0" auxfooter="0" addcolumn="1" addcolumnsnap="1" addcolumnsize="4" columns="4"><![CDATA[<div id="doc3" class="yui-tvb-r4">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gd">
<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>
]]></grid>
</grids>

Which results in this ....
http://www.livinginkentucky.com/files/graphics/gridscreen.jpg


What I want and need is for the left column to be the same width (300px) as the right side sidebar that I have set at 300px.

Using the code example above, what changes in it have to be made to accomplish what I want?

[Lynne]

Did you try a search? I think your grid has been posted before. There are also a bunch of grids in the modifications area.

[K4GAP]

Lynne I never got it the first time, maybe I should just settle for what I have. I ain't very bright.

[Lynne]

searching "grid*" in all forums/titles only gives me these (and several other threads)....

https://vborg.vbsupport.ru/showthread.php?t=269087&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=268825&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=261395&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=276734&highlight=grid%2A

[K4GAP]

searching "grid*" in all forums/titles only gives me these (and several other threads)....

https://vborg.vbsupport.ru/showthread.php?t=269087&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=268825&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=261395&highlight=grid%2A
https://vborg.vbsupport.ru/showthread.php?t=276734&highlight=grid%2A

I had done that before the post. Seems there are quite a few other users that are as dumb as me.

My next move will be to bum around and find other vb forums that have the layout I want and then hound them for their grid code. It really shouldn't be that hard to do.

[Lynne]

Your own thread that you started here - https://vborg.vbsupport.ru/showthread.php?t=276734&highlight=grid%2A - does what you want except it has the two side columns at 240px instead of 300px. I'm sure you can modify the CSS to change it for you.

[K4GAP]

My left column was 25%. I want a set left column at whatever pixel I choose. The 300px on the right column is the only thing I have control of in pixels.

Or, am I also not understanding what you are trying to tell me?

[Lynne]

In that thread, the second post here - https://vborg.vbsupport.ru/showpost.php?p=2286166&postcount=2 - is a 240px, 100%, 240px grid. Just change the couple of lines at the top that mention 240 and 250 to 300 and 310 and it should work fine.

[K4GAP]

In that thread, the second post here - https://vborg.vbsupport.ru/showpost.php?p=2286166&postcount=2 - is a 240px, 100%, 240px grid. Just change the couple of lines at the top that mention 240 and 250 to 300 and 310 and it should work fine.

I'll give it a try right now, thanks.

* after seeing code*

Does the style portion of that code stay with the code or does it go in additional?

[Lynne]

After you flatten your grid, you will put that full code into each of the textareas on the grid page.

[K4GAP]

After you flatten your grid, you will put that full code into each of the textareas on the grid page.

Progress !!

After using that code I get ...

http://www.livinginkentucky.com/files/graphics/beta.png

Both side columns are as I want them to be. Now all I need is for the center to be 100%.

Looking at the code nothing stands out that I can change. What do you see?

[Lynne]

It shows up like that on my Layout Manager page also, but not on the actual Section page if you use the layout. (You'd have to look into the CSS in the admincp and see what is causing the issue if you want to change what it looks like in the admincp.)

[K4GAP]

I have the two sidebars set to the width I wanted. The center is what I can't get to cooperate.

http://www.livinginkentucky.com/files/graphics/artciles.png

I've tried every combination of code I can come up with on the center's settings. I even tried my zip code and area code but that didn't work :(

Here's the code that i'm presently using .... I ain't doing nothing else until someone has a brain fart :eek:

<style type="text/css">
.two_columns {float: right;}
.col_1 {width: 270px; float: left; margin-right: -250px;}
.col_2 {float:left; margin: 0 500px;}
.col_3 {width: 270px; float: right; margin-left: -250px;}
</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>

Here it is live on my TEST SITE (http://www.livinginkentucky.com/forumz) .

[snakes1100]

It needs a width & smaller margin.


.col_2 {
float: left;
margin: 0 270px;
width: 530px;
}

[K4GAP]

It needs a width & smaller margin.


.col_2 {
float: left;
margin: 0 270px;
width: 530px;
}

I just tried this and it would work but using a pixel width will not allow the center to collapse or expand to fit different widths of the users monitors. Here it is (http://www.livinginkentucky.com/forumz) set at 900px.

[snakes1100]

Yea, it seems to have more that just the missing width issue for that css layout, but i dont have one to test with, i was just playing around with the element in chrome.

[K4GAP]

Yea, it seems to have more that just the missing width issue for that css layout, but i dont have one to test with, i was just playing around with the element in chrome.

Thanks for trying. This is starting to get really aggravating. Oh well.

[snakes1100]

Looking a bit more, it looks like column 1 is in a separate div than the center & right columns.

[K4GAP]

Looking a bit more, it looks like column 1 is in a separate div than the center & right columns.

Can you tell anything from the code?

[snakes1100]

Not really, as i dont have a cms to test, i couldnt really say, but i do think the div's are screwed up.

[K4GAP]

Not really, as i dont have a cms to test, i couldnt really say, but i do think the div's are screwed up.

I'll concentrate on the div's for a solution.

Thanks

[Lynne]

When I go here - http://www.livinginkentucky.com/forumz , the center section is at 100%. It gets larger/smaller as I expand/contract my browser. Isn't that what you want?

[K4GAP]

When I go here - http://www.livinginkentucky.com/forumz , the center section is at 100%. It gets larger/smaller as I expand/contract my browser. Isn't that what you want?

That's a grid I downloaded it's not what I want, the sides are to wide. I put it there because after working on trying to get what I want allllll night, I gave up and got tired of looking at crapola :)

[K4GAP]

DISREGARD: It's ok now. I just wish I knew how I fixed it :)

I found something on vb.com that ALMOST works!!

The code below is described as, "Secondary Header,Fixed Sidebar,Fluid Center,Fixed Sidebar,Secondary Footer".

The problem I have with that code is the center portion has what appears to be really wide padding on the right side, more so than the left. I don't see anything obvious in the code.

<grids>
<grid name="Secondary Header,Fixed Sidebar,Fluid Center,Fixed Sidebar,Secondary Footer" auxheader="1" auxfooter="1" addcolumn="1" addcolumnsnap="1" addcolumnsize="4" columns="8"><![CDATA[<div id="doc3">
<div id="hd">
<div class="yui-u yui-header" style="padding:0 0 15px 0;">
<ul class="list_no_decoration" id="widgetlist_column1">$column[1]</ul>
</div>
</div>
<div id="DefaultWrapper">
<div id="DefaultMainCol">
<div class="leftcol yui-sidebar" style="width:200px; float:left;">
<ul class="list_no_decoration" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="rightcol yui-sidebar" style="width:302px; float:right;">
<ul class="list_no_decoration" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="centercol yui-panel" style="padding:0 10px 10px 10px; align:right; overflow:hidden;">
<ul class="list_no_decoration" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
<div id="ft">
<div class="yui-u yui-footer" style="padding: 15px 0 0 0;">
<ul class="list_no_decoration" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>]]></grid>
</grids>Anyone have a clue as to why the center would not fully expand?

Note*
It would be nice to not have the additional head and footer areas as well.

[snakes1100]

Looks to expand for me in Chrome, i only see one header & footer as well....

Looks good.

[K4GAP]

Looks to expand for me in Chrome, i only see one header & footer as well....

Looks good.

It's good to go now. I must have accidentally fixed it :)

[snakes1100]

Admitting is half the battle....