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

<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 [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)

[Kraxell]

Push.....