Grid Layout [Archive] - vb.org Archive

View Full Version : Grid Layout

Blade-uk

11-14-2010, 11:09 PM

From finding different bits of information i managed to make a grid that you can see in action at www.eteknix.com

My code is:

Layout Manager UI HTML

<div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

Default Template HTML

<style type="text/css">
.yui-u {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style><div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

My site is using a 78% width and as you can see from my site (linked above) the side columns are a different width, so i need the first column reduced a bit and the last column expanded a bit.

Before i had the new layout (2 colums within the width of 1) which looks like this:

http://img403.imageshack.us/img403/4293/layoutkp.jpg

I was using this code:

<style type="text/css">
.yui-tvb-l25 {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style>

Any ideas on getting this to look right?

I will quite happily upload this grid once it's sorted for other people to use :)

Thanks,

Andy

sneezyyzeens

11-14-2010, 11:25 PM

The .yui-t5 code is specifying a 240px sidebar (on the right), and the .yui-gf code is forcing the other columns to be 1/4, 3/4.

You can find a YUI code cheetsheet at http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
and a simple grid builder at http://developer.yahoo.com/yui/grids/builder/

Hope that helps :)

Blade-uk

11-14-2010, 11:34 PM

Sadly that grid builder doesn't help as you can't tell it to use 2 columns (one each side)

I'm not using a sidebar at all, just columns.

Finding this really hard :(

Andy

gokhansancar

11-15-2010, 12:05 AM

i was looking the same thing like you are looking for but i couldnt find it,
it would really help if somebody show us to do it without sidebar

Lynne

11-15-2010, 02:07 AM

Blade-uk

11-15-2010, 06:58 AM

If you want the right and left columns the same width, why don't you make a grid with No Sidebar and then Columns set to 25/50/25? That makes the left and right columns 25% and then center one 50%? Is that how you want it?

Kind of but then there is a 4th column to go within the 3rd column as you can see from the picture.

Andy

Lynne

11-15-2010, 02:43 PM

So add it after you flatten it. Something like:
<style type="text/css">
.top {width: 100% !important;}
.bottom {clear: both; width: 100% !important;}
</style>

<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">
<div class="yui-g top">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-g bottom">
<div class="yui-u first">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</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>

Blade-uk

11-15-2010, 02:50 PM

That didn't work Lynne :(

Gave me a layout like this (see attachment)

Andy

Blade-uk

11-15-2010, 02:52 PM

My layout works and looks like this:

http://img841.imageshack.us/img841/818/mylayout.jpg

Using this code:

Layout Manager UI HTML
<div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

Default Template HTML
<style type="text/css">
.yui-u {width: 18%;}
.yui-g {width: 60%;}
</style>
<div id="doc3" class="yui-t5">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>
</div>
<div class="yui-g yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
<div class="yui-g">
<div class="yui-u first yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-u yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b yui-panel">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
</div>
</div>

Only problem is that the side columns are different widths from what i can see when you look at www.eteknix.com

Andy

Lynne

11-15-2010, 05:40 PM

Are you using 4.0.8? This is what it looks like for me:

https://vborg.vbsupport.ru/external/2010/11/25.jpg

I put that same code in both boxes for my grid.

Blade-uk

11-15-2010, 05:52 PM

Are you using 4.0.8? This is what it looks like for me:

https://vborg.vbsupport.ru/attachment.php?attachmentid=123649&stc=1&d=1289850234

I put that same code in both boxes for my grid.

I am using 4.0.8 yes :(

Any chance you could take a look Lynne?

Andy

saqiralemarate

11-16-2010, 05:43 AM

Blade-uk

11-16-2010, 07:21 AM

hey looking at your site, got me amazed.....could I ask a question if I wasn't annoying you......looking at your forum I realized you got "New Forum Post" and "Latest Threads" How can I add them with the code and the forum layout? thanks=D

The bit on the right hand side? That's a feature of VB4 called forum blocks. You can find it under the Forums & Moderators section.

Andy

--------------- Added 1289899421 at 1289899421 ---------------

After getting Lynne to take a look at the grid she managed to get it almost the way i needed it with the following code:

The only problem was, that the side panels were too wide at 25, so was informed that i needed to change the CSS from 25% to 12.5% and from 50% to 75% to even it out.

The code i ended up with was:

<style type="text/css">
.top {width: 100% !important;}
.bottom {clear: both; width: 100% !important;}
.yui-tvb-l25 {width: 18%;}
.yui-tvb-l50 {width: 60%;}
</style>

<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">
<div class="yui-g top">
<ul class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>
</div>
<div class="yui-g bottom">
<div class="yui-u first">
<ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>
</div>
<div class="yui-u">
<ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>
</div>
</div>
</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>

You can see the nice even layout at www.eteknix.com

Thanks,

Andy