need help Multi row tabs

[RadioD]

I am using DD Color Tabs inside a table with width of 500, the problem is when the number of tabs exceed this width there is a second row generated, but the second row overlaps the first row. All i need is a way to control the second row so there is a spacing between the rows. I am using php. I cannot use fixed number of tabs as all the pages have different number of tabs with different number of words generated by the php based on number of categories. Is there a way to find the width of tabs or li so that whe it exceeds 500, I can insert a small space or start an new ul tag. Any help is appreciated.

[codeexploiter]

hmmm as you mentioned in your post you don't want to exceed your data display in the form of tabs the total width of your table which is 500px. Then i don't think there is any automated mechanism using which you can display the contents. Either you need to specify the width of the table column, in this case each field will have the same width (You can have any number of columns) or you need to specify the exact width for each column while displaying it (this needs more calculation as you need to find the length of the data you are going to display in a column and based on that you create the table column).

Say for example assuming that you are retrieving the Tab content items from a database and display it according to the number of tabs that you got for a particular data retrieval operation.

1. Using the first approach you can accomadate maximum 8 fields with the width of 62px (One thing you need to check the length of the items you are going to retrieve from the DB. If the length exceeds the maximum allowed width for a tab the layout will spoil).
2. Then you are using some counter to make sure that in a single line you are only displaying 8 tabs. After the 8 tabs you are inserting a new row and then displaying the remaining tabs in the next line and this will go maximu upto 8.

A. Using the second approach you are retrieving the data checking the length and based on the length of the data you are constructing a table. In other words you are inserting columns upto the total width of the columns in the first row is <= 500 px.

B. Now once you complete the first row you'll insert a blank line or display a spacer image just to make sure that there is enough space to disinguish between the items.

This kind of formatting things can be done using your server-side coding which is PHP. I dont' think without programming help it is possible.

[RadioD]

Thank you for your insight. Below are the code I changed, they are both inside a table. Can you give me which php function will help. I am new to php and not very good in programming.

Original:

while ($categories = tep_db_fetch_array($categories_query)) {
$rows++;
$cPath_new = tep_get_path($categories['categories_id']);
$width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
echo ' <td align="center" class="smallText" width="' . $width . '" valign="top"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "\n";
if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories)) {
echo ' </tr>' . "\n";
echo ' <tr>' . "\n";
}
}

Modified:

echo ' <td align="left" width="100%" valign="bottom">' . "\n";
echo ' <div id="ddcolortabs"><ul>' . "\n";
while ($categories = tep_db_fetch_array($categories_query)) {
$rows++;
$cPath_new = tep_get_path($categories['categories_id']);
$width = (int)(100 / MAX_DISPLAY_CATEGORIES_PER_ROW) . '%';
echo ' <li style="margin-left: 1px"><a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" title="'. $categories['categories_name'] . '"><span>'. $categories['categories_name'] . '</span></a></li>' . "\n";
}
echo ' </ul></div><div id="ddcolortabsline">&nbsp;</div></td>' . "\n";