Grid - How-To?

[Kraxell]

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

[Lynne]

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

[Kraxell]

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

I found this grid:

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

[Lynne]

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>

[Kraxell]

Thank you Lynne.
How i set the widths?

Is this correkt?

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

[Lynne]

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.

[Kraxell]

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

--------------- Added 1328386679 at 1328386679 ---------------

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

My 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....

[Lynne]

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.

[Kraxell]

Hello Lynne,

I change the code now to this:

<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 1328466412 at 1328466412 ---------------

Ok, dont work :(

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

[Kraxell]

Push.....

[Lynne]

I need a link to see the grid in order to see what is wrong.

Also, I would suggest looking at your site with the browser set at different widths.

[Kraxell]

Hello Lynne,

ok, i'll make a little area with this grid, than u can take a look.

I post the link than.

--------------- Added 1328559259 at 1328559259 ---------------

http://allround-board.net/content/268-grid-test

So, u can take a little look :)

If i use an other browser-width, than it works. But how can i use it on 1024-width?

Browser-Width which dont work:
until 1440x900

[Lynne]

You have a few things wrong... you only use the class first for the first box in a row (in your class bd div). And your header shouldn't use yui-u ,but should use yui-g. So, make those three changes and then see how it is.

[Kraxell]

ehm....dont understand exactly.

i have change header to yui-g but what you mean with the other? (bd div)

/EDIT

Ahhhh xD Sorry, now i understand :)

Ill try it.

--------------- Added 1328562673 at 1328562673 ---------------

Soooo....now the last question :)

How do you think can i make a better look? Because there is a many space on the right side.

Is it possible to change the boxes to 25% (4x25%=100%) or do you have any other idea to solve this problem?

[Lynne]

Actually, see how it is done here - http://developer.yahoo.com/yui/examples/grids/grids-gg.html

[pwhitehead]

Actually, see how it is done here - http://developer.yahoo.com/yui/examples/grids/grids-gg.html

Is there finally a grid making program out? Does Dreamweaver have a grid making system?

[Zachery]

No grid making program that I'm aware of.

[pwhitehead]

No grid making program that I'm aware of.

Zach, any sites or tutorials you can refer me too? I cant find any good tutorials that explains the grid system for vbulletin. I went to the YUI site lynn linked but its not vbulletin friendly. Thanks