Как связать низ колонок

KEKC · December 28, 2008

Всем доброго времени суток.

Я опять со своей проблемой!

Никак не пойму, как работать с высотой при вёрстке таблиц, и не важно в чём они построены. У меня прям руки опускаются, что не понимаю я как надо написать алгоритм, чтобы всё отображалось как надо. У меня есть несколько вариантов вёрстки, но у каждого какие-либо отклонения от желаемого результата. Причём если в одном шапка получилась,то с телом проблемк, а где тело в норме, то шапка ведёт себя как попало! Пытаюсь сделать по аналогии удачного примера, но получается ерунда какая-то.

Пожалуйста, подскажите, как быть с высотой? Потому что в некоторых примерах, подсмотренных с нэта,вроде вообще нет никаких указаний на величину высоты. А она есть! Смотрю по форуму,а также разные статьи, но ещё больше в дебри влажу.

В примере первом сделал таблицей. Не могу центральную часть шапки (она не должна растягиваться) по центру закрепить. И по совету корефеев сделал фоновые картинки бэкграундом в 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, т.к. они очень часто по разному отображают суть и можно уже здесь что-то подправить, но по сути не всегда это оправданно. Но в данном случае, окно с контентом в браузерах остаётся неподвижно, хотя в обоих редакторах тянется.

Помогите,пожалуйста, разобраться вот ссылка на эскиз с бэкграундами ссылка на эскиз

Edited December 28, 2008 by KEKC

Yulia · December 28, 2008

если б вы выложили это в интернет, чтоб посмотреть вместе с графикой и иметь возможность в firebug'е все помучить на горячую, думаю, быстрее бы помощь получили

KEKC · December 28, 2008

если б вы выложили это в интернет, чтоб посмотреть вместе с графикой и иметь возможность в firebug'е все помучить на горячую, думаю, быстрее бы помощь получили

понял. а просто, как файл на депозите, можно?

а что такое "firebug"

Edited December 28, 2008 by KEKC

Victor Ananiev · December 28, 2008

firebug - аддон к мазилле, аналог firebug'a в опере dragonfly менюшка типу с валидацией и т.д. лучше все таки выкладывать на хостинг) но если нет другого выбора, то не на депозит) никто полторы минуты ждать небудет)

Yulia · December 28, 2008

Это дополнение к браузеру Firefox

https://addons.mozilla.org/ru/firefox/addon/1843

с его помощью можно смотреть где какие дивы по факту оказались, вообще полностью можно проанализировать верстку и мало того, можно ее исправлять, блокировать и добавлять свойства в css и смотреть, как оно станет после этого (в реальном файле ничего не меняется).

Ну это только десятая часть того, что может Файербаг. Это очень нужный инструмент для верстальщика.

понял. а просто, как файл на депозите, можно?

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

KEKC · December 28, 2008

нет у меня пока хостинга. Я даже как-то пока и не думал про это. А разве с таким объёмом файла долго качать?

Yulia · December 28, 2008

вырезано неаккуратно, даже если сверстать правильно, нормально это выглядеть не будет.

Совет автору: если это какая-то разовая работа, которую может сделать кто-то другой, просто откажитесь. Если вы решили разобраться в верстке и научиться верстать так, чтоб везде выглядело одинаково и так, как вам хочется, съезжайте с автоматических генераторов хтмл и пишите руками в каком-нить простеньком редакторе с подсветкой тегов и подсказками.

Edited December 28, 2008 by Yulia

Victor Ananiev · December 28, 2008

на депозите надо ждать перед скачкой!!!

Yulia · December 28, 2008

я скачала сразу, но там пути у картинок абсолютные и папки названы с пробелами и по-русски. Так что графика не отображается, а сидеть исправлять не вижу смысла.

KEKC · December 29, 2008

Это моя работа,хочу научиться верстать сайты. Но столько нюансов,что толком не могу разобраться. Пожалуйста, укажите на серьёзные ошибки! В чём они заключаются?

Yulia "вырезано неаккуратно, даже если сверстать правильно, нормально это выглядеть не будет."

Не понял,в чём заключается неаккуратность? Резал-то,вроде, по направляющим?

И ещё, в чём посоветуете писать код сайта? И чем плохи автоматические генераторы на ночальном этапе, не считая большого нагромождения лишнего кода при обширном сайте. До которых мне ещё рановато.

Edited December 29, 2008 by KEKC

Yulia · December 29, 2008

Что ж, если вы решили учиться верстать, то тем более можете забыть про дримвеверы и прочее. Почему? Ну наверное потому что если хотите чему-то научиться, надо пробовать делать это самому.

Я начинала в программе Macromedia Homesite 5. Сейчас я больше программирую, чем верстаю, поэтому пользуюсь Zend'ом. Тут где-то есть тема кто в чем верстает..

Разрезать надо так, чтобы при отображении сверстанного не было видно стыков. А у вас видно. Причем если делаете резиновый сайт, надо подобрать так, чтоб растягивалась какая-то серединчатая часть, не ответственная за внешний вид стыка.

В деле верстки htmlbook.ru вам в помощь.

Sign In

Как связать низ колонок

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information