Go Back   vb.org Archive > vBulletin 4 Discussion > vB4 Design and Graphics Discussions
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools Display Modes
  #1  
Old 11-14-2010, 11:09 PM
Blade-uk Blade-uk is offline
 
Join Date: Nov 2003
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default 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:



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
Reply With Quote
  #2  
Old 11-14-2010, 11:25 PM
sneezyyzeens sneezyyzeens is offline
 
Join Date: May 2007
Posts: 16
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #3  
Old 11-14-2010, 11:34 PM
Blade-uk Blade-uk is offline
 
Join Date: Nov 2003
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #4  
Old 11-15-2010, 12:05 AM
gokhansancar gokhansancar is offline
 
Join Date: Oct 2010
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #5  
Old 11-15-2010, 02:07 AM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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?
Reply With Quote
  #6  
Old 11-15-2010, 06:58 AM
Blade-uk Blade-uk is offline
 
Join Date: Nov 2003
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Lynne View Post
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
Reply With Quote
  #7  
Old 11-15-2010, 02:43 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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>
Reply With Quote
  #8  
Old 11-15-2010, 02:50 PM
Blade-uk Blade-uk is offline
 
Join Date: Nov 2003
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

That didn't work Lynne

Gave me a layout like this (see attachment)

Andy
Attached Images
File Type: jpg lynne-layout.jpg (27.5 KB, 0 views)
Reply With Quote
  #9  
Old 11-15-2010, 02:52 PM
Blade-uk Blade-uk is offline
 
Join Date: Nov 2003
Posts: 70
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

My layout works and looks like this:



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
Reply With Quote
  #10  
Old 11-15-2010, 05:40 PM
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Location: California/Idaho
Posts: 41,180
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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




I put that same code in both boxes for my grid.
Attached Images
File Type: png Screen shot 2010-11-15 at 11.40.21 AM.png (27.9 KB, 0 views)
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:20 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04319 seconds
  • Memory Usage 2,297KB
  • Queries Executed 12 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (5)bbcode_code
  • (1)bbcode_html
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (10)post_thanks_box
  • (10)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (10)post_thanks_postbit_info
  • (10)postbit
  • (2)postbit_attachment
  • (10)postbit_onlinestatus
  • (10)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • postbit_attachment
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete