Grid - How-To?
 

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:

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?

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:

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:

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)

Push.....

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.

Hello Lynne,

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

I post the link than.

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

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

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.

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 [DATE]1328562673[/DATE] at [TIME]1328562673[/TIME] ---------------

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?

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

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

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