Всем доброго времени суток. Я опять со своей проблемой! Никак не пойму, как работать с высотой при вёрстке таблиц, и не важно в чём они построены. У меня прям руки опускаются, что не понимаю я как надо написать алгоритм, чтобы всё отображалось как надо. У меня есть несколько вариантов вёрстки, но у каждого какие-либо отклонения от желаемого результата. Причём если в одном шапка получилась,то с телом проблемк, а где тело в норме, то шапка ведёт себя как попало! Пытаюсь сделать по аналогии удачного примера, но получается ерунда какая-то. Пожалуйста, подскажите, как быть с высотой? Потому что в некоторых примерах, подсмотренных с нэта,вроде вообще нет никаких указаний на величину высоты. А она есть! Смотрю по форуму,а также разные статьи, но ещё больше в дебри влажу. В примере первом сделал таблицей. Не могу центральную часть шапки (она не должна растягиваться) по центру закрепить. И по совету корефеев сделал фоновые картинки бэкграундом в CSS, но потом понял, чт это напрасно, т.к. картинки перестали тянуться за ячейкой. Надо было через Z-layer прописать, но позже сделаю <html> <head> <title>Site</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <center> <!-- ImageReady Slices (Site.psd) --> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="12" height="100%" rowspan="7" align="right" valign="middle"> <img src="images/fon01.jpg" width="12" height="100%" alt=""></td> <td colspan="7" width="100%" height="11"> <img src="images/fon02.jpg" width="100%" height="11" alt=""></td> <td width="12" height="100%" rowspan="7" align="right" valign="middle"> <img src="images/fon03.jpg" width="12" height="100%" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="11" alt=""></td> </tr> <tr> <td width="186" height="202" colspan="2" rowspan="4" align="left"> <img src="images/fon04.jpg" width="186" height="202" alt=""></td> <td> <img src="images/fon05.jpg" width="100%" height="81" alt=""></td> <td width="243" height="152" rowspan="3"> <img src="images/fon06.jpg" width="243" height="152" alt=""></td> <td> <img src="images/fon07.jpg" width="100%" height="81" alt=""></td> <td width="188" height="202" colspan="2" rowspan="4" align="right" valign="top"> <img src="images/fon08.jpg" width="188" height="202" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="81" alt=""></td> </tr> <tr> <td> <img src="images/fon09.jpg" width="100%" height="67" alt=""></td> <td> <img src="images/fon10.jpg" width="100%" height="67" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="67" alt=""></td> </tr> <tr> <td> <img src="images/fon11.jpg" width="100%" height="4" alt=""></td> <td> <img src="images/fon12.jpg" width="100%" height="4" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="4" alt=""></td> </tr> <tr> <td width="100%" height="100%" colspan="3" rowspan="3" align="left" valign="top"> <img src="images/fon13.jpg" width="100%" height="100%" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="50" alt=""></td> </tr> <tr> <td width="177" height="100%" align="left" valign="middle"> <img src="images/fon14.jpg" width="177" height="100%" alt=""></td> <td width="9" height="100%" > <img src="images/fon15.jpg" width="9" height="100%" alt=""></td> <td width="10" height="100%"> <img src="images/fon16.jpg" width="10" height="100%" alt=""></td> <td width="178" height="100%" align="right" valign="middle"> <img src="images/fon17.jpg" width="178" height="100%" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="219" alt=""></td> </tr> <tr> <td colspan="2" align="left" valign="bottom"> <img src="images/fon18.jpg" width="186" height="168" alt=""></td> <td colspan="2" align="right" valign="bottom"> <img src="images/fon19.jpg" width="188" height="168" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="168" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> </center> </body> </html> Пример второй сделан комбинированно. Но колонки тела "живут" сами по себе, а должны тянуться вниз все вместе. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Без названия 2</title> <style type="text/css"> body{padding: 0;} #TeloKolonka1{width:198px; height:100%; background:#009999;} #Kolonka11{width:198px; height:50px; margin-top:0; background-image: url('тело%20таблицей/images/Telo-01.jpg')} #Kolonka12{ width:198px; height:100%;background-image:url('тело таблицей/images/Telo-04.jpg');} #TeloKolonka12{ width:198px; height:219px;} #Kolonka13{ width:198px; height:168px; margin-bottom:0; background-image:url('тело таблицей/images/Telo-06.jpg')} #TeloKolonka2{width:100%; height:426px;} #Kolonka21{background-image:url('тело таблицей/images/Telo-02.jpg'); width:100%; height:100%;} #Kolonka22{background-image:url('тело таблицей/images/Telo-08.jpg');width:100%; height:11px;} #Kolonka31{width:200px; height:50px; margin-top:0; background-image:url('тело таблицей/images/Telo-03.jpg')} #Kolonka32{width:200px; height:100%; background-image:url('тело таблицей/images/Telo-05.jpg')} #TeloKolonka32{height:219px; width:200px;} #Kolonka33{width:200px; height:168px; background-image:url('тело таблицей/images/Telo-07.jpg'); margin-bottom:0;} </style> </head> <body> <table width="100%" cellpadding="0" cellspacing="0" border="0"><!-- основная подлжка --> <tr> <td width="198"><!-- левая колонка --> <div id="Kolonka11"></div> <div id="TeloKolonka12"><div id="Kolonka12"></div></div> <div id="Kolonka13"></div> </td><!--END левая колонка --> <td> <table cellpadding="0" cellspacing="0"> <tr> <td width="100%"><!-- центральная колонка --> <div id="TeloKolonka2"><div id="Kolonka21"></div></div> <div id="Kolonka22"></div> </td><!--END центральная колонка --> <td width="200"><!-- правая колонка --> <div id="Kolonka31"></div> <div id="TeloKolonka32"><div id="Kolonka32"></div></div> <div id="Kolonka33"></div> </td><!-- END правая колонка --> </tr> </table> </td> </tr> </table> </body> </html> Для более наглядного для себя восприятия,работаю порой одновременно в Microsoft SharePoint Designer и Adobe Dreamweaver CS3, т.к. они очень часто по разному отображают суть и можно уже здесь что-то подправить, но по сути не всегда это оправданно. Но в данном случае, окно с контентом в браузерах остаётся неподвижно, хотя в обоих редакторах тянется. Помогите,пожалуйста, разобраться вот ссылка на эскиз с бэкграундами ссылка на эскиз
