ширина столбцов в таблице в % и в px

[ХОЛОДный]

Есть таблица из 21ого столбца, которые разбиты на повторяющиеся тройки

ширина 1ого = 10px

ширина 2ого= x..?

ширина 3его = 43px

и так семь раз

Вопрос:

Надо сделать так, чтобы все x были одинаковые

я пробловал делать так:

<td width=10px backgorund="blabla2.gif"> </td>
<td width="14%" backgorund="blabla2.gif">текстик </td>
<td width=43px backgorund="blabla3.gif > </td>

Т.е. я планирую, что браузер повычитает из ширины экрана семь раз 10 пикселей, затем 7 раз 43 пикселя, оставшееся число разделит на 7 и задаст их вторым колонкам.

Но, видимо, он делает вс? совсем не так.

Ширина вторых колонок равняется по их содержимому.

[YETI]

Помоему если задать нескольким столбцам ширину в пикселях, а остальным не задать вообще то бравзер сам разделит оставшуюся ширину между ними поровну.

[klierik]

ох... задачка не из легких.. делал нечто подобное недавно..

в общем смысл такой

для таблицы: table-layout_fixed; (возможно в вашем случае и не надо будет)

каждая ячейка (td) содержит

с фиксированной шириной

а все ячейки, которые не имеют фиксированной ширины, имеют ширину 100/7

могу скинуть пример если не понятно.. он немного отличаеться от вашего, но в общем схож

[ХОЛОДный]

ох... задачка не из легких.. делал нечто подобное недавно..

в общем смысл такой

для таблицы: table-layout_fixed; (возможно в вашем случае и не надо будет)

каждая ячейка (td) содержит

с фиксированной шириной

а все ячейки, которые не имеют фиксированной ширины, имеют ширину 100/7

могу скинуть пример если не понятно.. он немного отличаеться от вашего, но в общем схож

Дык я так и делаю, только дивы с явным указанием ширины в ячейки с фиксированной шириной не ставил.

Щас попробую, но, боюсь, не прокатит....

Если не затруднит, скиньте, пожалуйста

[ХОЛОДный]

ох... задачка не из легких.. делал нечто подобное недавно..

в общем смысл такой

для таблицы: table-layout_fixed; (возможно в вашем случае и не надо будет)

каждая ячейка (td) содержит

с фиксированной шириной

а все ячейки, которые не имеют фиксированной ширины, имеют ширину 100/7

могу скинуть пример если не понятно.. он немного отличаеться от вашего, но в общем схож

css:

.q, .q td {
 height: 73px; 
 vertical-align: middle;
}
.q div {
 height: 50px; 
 }
.fix12 div{
 width: 12px;
}
.fix41 div{
 width: 41px;
}

html:

<table border="0" cellspacing="0" cellpadding="0" ><tr class="q">
 <td background="img1.gif"><div class="fix12"><div></td> 
 <td background="img3.gif" width="14%" ><div><a href="bb.html"><nobr>  клик ми  </nobr></a></div></td>
 <td background="img3.gif"><div class="fix41"><div></td>

<!--и таких троек-ячеек еще 6 раз, меняется только background и ссылка. Не люблю я Битрикс =(((( -->

</tr>
</table>

вот что получается:

http://img413.imageshack.us/my.php?image=problembf7.jpg

посмотрите картинку, пожалуста

[klierik]

так это меню.... уууууу....

так.. давайте выкладывайте полностью как выглядит меню рисунком

данный путь решения вам не подойдет. тут по другому надо будет делать скорее всего

[ХОЛОДный]

Это Битрикс...Вряд ли это поможет.

Если удастся сверстать так, без пхп, то и через пхп тож пройдет.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<? $sMenu = '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>';
//width="100%"

for($i=0; $i<count($MENU_ITEMS); $i++)
{
 $MENU_ITEM = $MENU_ITEMS[$i];
 extract($MENU_ITEM);
 if($SELECTED)
 $clrtext = 'topmenu';
 else
 $clrtext = 'topmenuact';

 //menu button is the table inside parent table cell
 $sMenu .= '<td>';
 //menu consists of 3 cells: left and right have fixed size, center cell scales for menu text
 $sMenu.='<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr class="q">';
 $sMenu.='<td background="/bitrix/templates/common/images/menuleft'.$i.'.gif"><div class="fix12"><div></td>';
 $sMenu.='<td background="/bitrix/templates/common/images/menucenter'.$i.'.gif" width="100%"><div><a href="'.$LINK.'" class="'.$clrtext.'"><nobr> '.$TEXT.' </nobr></a></div></td>';
 $sMenu.='<td background="/bitrix/templates/common/images/menuright'.$i.'.gif"><div class="fix41"><div></td>';
 //$sMenu .= '</tr><tr height=23px><td> </td></tr></table>';
 $sMenu .= ' </tr></table>';
 $sMenu .= '</td>';
}
$sMenu .= '</tr></table>';
?>

[klierik]

в таком случае я не в силах вам помочь

манал я пхп =)

в общем ето делаеться через флотинг =)

и не надо разбивать на столько ячеек

одна кнопка - одна ячейка, в которой уже сооружаете ее контент

[ХОЛОДный]

так не покатит.

Кнопка состоит из двух частей : одна часть спокойно растягивается, вторая-нет.

Если бы я вс? в одну ячеку пихал, было б все по-другому

[Dimitry Wolotko]

Тема, как мне кажется, совсем не для лягушатника.

В проблемы верстки.

[ХОЛОДный]

<html>
 <body>
 <table border="0" height="73" width="100%" cols="21">
 <tr>
 <td width="12" background="menuleft0.gif"> </td>
 <td width="14%" background="menucenter0.gif"> </td>
 <td width="41" background="menuright0.gif"> </td>

 <td width="12" background="menuleft1.gif"> </td>
 <td width="14%" background="menucenter1.gif"> </td>
 <td width="41" background="menuright1.gif"> </td>

 <td width="12" background="menuleft2.gif"> </td>
 <td width="15%" background="menucenter2.gif"> </td>
 <td width="41" background="menuright2.gif"> </td>

 <td width="12" background="menuleft3.gif"> </td>
 <td width="14%" background="menucenter3.gif"> </td>
 <td width="41" background="menuright3.gif"> </td>

 <td width="12" background="menuleft4.gif"> </td>
 <td width="14%" background="menucenter4.gif"> </td>
 <td width="41" background="menuright4.gif"> </td>

 <td width="12" background="menuleft5.gif"> </td>
 <td width="14%" background="menucenter5.gif"> </td>
 <td width="41" background="menuright5.gif"> </td>

 <td width="12" background="menuleft6.gif"> </td>
 <td width="14%" background="menucenter6.gif"> </td>
 <td width="41" background="menuright6.gif"> </td>
 </tr>
 </table>
 </body>
</html>

В этом случае "средние" ячейки (width="15%") вытягиваются по экрану. А "левая" и "правая" ячейки с указанной шириной в 12 и 41 пиксель соответственно, "обращаются в линию", толщиной в 1 пиксель.

Что ж такое-то.

Насколько я знаю, при указании количества колонок (cols="21"), браузер рассчитывает положение таблицы на экране, а затем грузит содержимое.

Так почему же он не может сделать так:

Ширина экрана - 7*(12+41) = остаток

остаток / 7 = ширина средних колонок.

Или как же он, все-таки работает..?

Хотя, указание в % видимо, приоритетнее указания ширины в пикселях. Сначала он делит экран на 7 частей по 14% от ширины, а в оставшееся пытается вписать ячейки с явным указанием ширины.

[ХОЛОДный]

Решение найдено. Мне друг помог с версткой.

Но проблема осталась, потому что злодей-Битрикс оборачивает таблицу меню еще в несколько таблиц и выравнивания не происходит.

Тему можно закрывать...(

<table width=100% cellpadding=
0 cellspacing=0>
<tr>
<td style ="background:url(' menucenter1.gif');">
<div style="width:41px; float: right; background:url(' menuright1.gif'); height:73px; "> </div><div>menu1</div></td>
<td style="background:url(' menucenter2.gif');">
<div style="width:41px; float: right; background:url(' menuright2.gif'); height:73px; "> </div><div>menu2</div></td>
<td style="background:url(' menucenter3.gif');">
<div style="width:41px; float: right; background:url(' menuright3.gif'); height:73px; "> </div><div>menu3</div></td>
<td style="background:url(' menucenter4.gif');">
<div style="width:41px; float: right; background:url(' menuright4.gif'); height:73px; "> </div><div>menu4</div></td>
<td style="background:url('menucenter5.gif');">
<div style="width:41px; float: right; background:url(' menuright5.gif'); height:73px; "> </div><div>menu5</div></td>
<td style="background:url(' menucenter6.gif');">
<div style="width:41px; float: right; background:url(' menuright6.gif'); height:73px; "> </div><div>menu6</div></td>
</tr>
</table>

[elfuvo]

мож попробуешь сам вычислять ширину экрана через JS? а потом проставлять нужную элементам меню

w=window.document.body.offsetWidth