vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   Grid Layout (https://vborg.vbsupport.ru/showthread.php?t=253700)

Blade-uk 11-14-2010 11:09 PM
Grid Layout
 
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

Code:
<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

Code:
<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:

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
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?

Blade-uk 11-15-2010 06:58 AM
Quote:
Originally Posted by Lynne (Post 2121982)
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:
HTML Code:
<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
1 Attachment(s)
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
Code:
<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
Code:
<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
1 Attachment(s)
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
Quote:
Originally Posted by Lynne (Post 2122176)
Are you using 4.0.8? This is what it looks like for me:

https://vborg.vbsupport.ru/attachmen...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
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

Blade-uk 11-16-2010 07:21 AM
Quote:
Originally Posted by saqiralemarate (Post 2122324)
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 [DATE]1289899421[/DATE] at [TIME]1289899421[/TIME] ---------------

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:

Code:
<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


All times are GMT. The time now is 03:28 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01090 seconds
  • Memory Usage 1,794KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (6)bbcode_code_printable
  • (1)bbcode_html_printable
  • (3)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (13)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete