vb.org Archive - Grid

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Grid - How-To? (https://vborg.vbsupport.ru/showthread.php?t=278052)

Hello,

i want a special grid.

Its like the standart-grid but with 4 or 5 boxex above the main-box.

I make a little screen (attachmend)

Anyone know, how i solve this?

Regards

Create a grid that has a header in that space, then flatten the grid and edit it to add those five boxes.

Sorry but i dont know exactly how i doe this....

I found this grid:

HTML Code:

<div id="doc3">

        <div id="hd">

                <div class="yui-u yui-header">

                        <ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>

                </div>

        </div>

        <div id="bd">

                <div class="yui-gb">

                        <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 class="yui-u yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>

                        </div>

                </div>

        </div>

        <div id="ft">

                <div class="yui-u yui-footer">

                        <ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>

                </div>

        </div>

</div>

But how i must change the header-part?

You'll need to modify this area to add in five <divs> all with a class that sets the widths to about 19% or so:

<ul class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>

Thank you Lynne.
How i set the widths?

Is this correkt?

HTML Code:

                        <ul style="width:19%" class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>

and this 4 times in div class yui-u yui-header?

Yes, except make sure to always change the id and the $column number (those need to match and be unique - column[1] with widgetlist_column1, column[6] with widgetlist_column6, column[7] with widgetlist_column7, etc)

You may need to add more style like float them left, but you can figure that out afterwards.

Yes. Thanks for your great and fast support/help. I'll try it later and give feedback than.

--------------- Added [DATE]1328386679[/DATE] at [TIME]1328386679[/TIME] ---------------

One Problem now:
The boxes are below of each other but i want them next to the other.

My code:

HTML Code:

<div id="doc3">

        <div id="hd">

                <div class="yui-u yui-header">

                        <ul style="width:24%" class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>        

                        <ul style="width:24%" class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>

                        <ul style="width:24%" class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>

                        <ul style="width:24%" class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>                        

                </div>

        </div>

        <div id="bd">

                <div class="yui-gb">

                        <div class="yui-u first yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>

                        </div>

                        <div class="yui-u yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>

                        </div>

                        <div class="yui-u yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>

                        </div>

                </div>

        </div>

        <div id="ft">

                <div class="yui-u yui-footer">

                        <ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>

                </div>

        </div>

</div>

I tried to give everey ul-tag his own div class="yui-u yui-header"-tag but didnt work too....

Instead of using <ul> tags, try using <div> tags and make sure you float them all to the left. If you have more problems, please post a link so we can see the actual grid in use and see what is going wrong.

Hello Lynne,

I change the code now to this:

HTML Code:

<div id="doc3">

        <div id="hd">

                <div class="yui-u yui-header">

                        <ul style="width:24%;float:left" class="list_no_decoration widget_list" id="widgetlist_column1">$column[1]</ul>        

                        <ul style="width:24%;float:left" class="list_no_decoration widget_list" id="widgetlist_column2">$column[2]</ul>

                        <ul style="width:24%;float:left" class="list_no_decoration widget_list" id="widgetlist_column3">$column[3]</ul>

                        <ul style="width:24%;float:left" class="list_no_decoration widget_list" id="widgetlist_column4">$column[4]</ul>                        

                </div>

        </div>

        <div id="bd">

                <div class="yui-g">

                        <div class="yui-tvb-l25 first yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column5">$column[5]</ul>

                        </div>

                        <div class="yui-tvb-l50 first yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column6">$column[6]</ul>

                        </div>

                        <div class="yui-tvb-l25 first yui-panel">

                                <ul class="list_no_decoration widget_list" id="widgetlist_column7">$column[7]</ul>

                        </div>

                </div>

        </div>

        <div id="ft">

                <div class="yui-u yui-footer">

                        <ul class="list_no_decoration widget_list" id="widgetlist_column8">$column[8]</ul>

                </div>

        </div>

</div>

And it works! :)

One little question:

Is it possible to add space between the boxes?
http://allround-board.net/content/

Look at the right side, there are to many spaces.

--------------- Added [DATE]1328466412[/DATE] at [TIME]1328466412[/TIME] ---------------

Ok, dont work :(

It work for a while but now it didnt work (the left area below the header-parts switched to the right)

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01255 seconds Memory Usage 1,766KB 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 (4)bbcode_html_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: