[решено] Таблицы в html

stalingrad432006

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

1. Первая таблица - размер 100%х100 (шапка). Во внутрь кладу изображение-шапку размер 1000х100. Требование: "резина" в ширину на все окно браузера. Т.е. как не растягивать/сужать изображение левым краем плотно прилегает к левому краю браузера, а правым - к правому. Так же большая просьба, киньте пожалуйста в меня ссылочку, где доходчиво объяснено, как можно изображение в шапке порезать на три части и в оба шва положить нечто, что будет заполнять пространство при растяжении. Суть такова: левый обрезок всегда прижат к левому краю браузера и всегда статичен, в шов прикручиваем нечто, что при растяжении заполняет пространство одним тоном. Далее идет отрезок изображения с надписью, которая не растягивается ни при каких обстоятельствах. Далее шов, такой же как предыдущий. Ну и правый край изображения железно прижатый к правому окну браузера. Я сам даже нагуглить не в состоянии, так как не знаю, как это безобразие называется и, соответственно, какие слова в поисковик вводить.

2. Вторая таблица (контент) содержит три столбика. Первый/левый (железно прикручен к левому краю окна браузера) с пятью изображениями/кнопками, одна под другой; ширина 200. Третий/правый (железно прикручен к правому краю окна браузера) ; ширина 200. Второй/средний занимает все свободное пространство между правым и левым столбиками.

3. Третья таблица - размер 100%х50 (футер). Целиком и полностью похож на шапку, только высота не 100, а 50.

В приведенном ниже коде все нормально отображает только Opera. Mazilla Firefox занесла два изображения из левой/первой колонки во внутрь/вправо. IE7 ИЕ7 левую/первую оставил в покое, зато правую/третью целиком прижал в лево/центр и никак не хочет прижимать ее к правому краю окна браузера. Safari категорически отказался открывать страницу под предлогом "не является приложением Win32". Насколько я понял, проблема в кроссбраузерности. Так же, было бы не плохо, если бы кто-нибудь подсказал, как убрать все все отступы между таблицами так, что бы изображения плотно прилегали друг к другу.

Сам код:

BODY{margin:0px;}

И на случай, если все-таки кто-то решиться посмотреть, как в этом коде изображения "пляшут", прикрепляю их в архиве.

Заранее благодарен. Никого бы не дергал, но уже сам не могу разобраться, да еще других людей успел замучить.

timon4ik · Сообщение **timon4ik** » 26 июл 2008, 18:21

Немного доработал ваш код, отличия найдите сами:

Код:

Код: Выделить всё

<html>
<head>
	<style type="text/css">
		BODY{margin:0px;}
	</style>
<title></title>
</head>
<body>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="100"><a><img src="шапка_фон.jpg" width="100%" height="100"></a></td>
		</tr>
	</table>
	<table cellspacing="0" cellpadding="0" border="0" width="100%">
		<tr>
			<td align="left" valign="top" width="200"><a><img src="кнопка_фон.jpg"></a><a><img src="кнопка_фон.jpg"></a><a><img src="кнопка_фон.jpg"></a><a><img src="кнопка_фон.jpg"></a><a><img src="кнопка_фон.jpg"></a></td>
			<td align="center" width="100%"></td>
			<td align="right" valign="top" width="200"><a><img src="звонить_фон.jpg"></a></td>
		</tr>
	</table>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td height="50"><a><img src="подвал_фон.jpg" width="100%" height="50"></a></td>
		</tr>
	</table>
</body>
</html>

По поводу отступов между таблицами:

1. Для верхней и нижней таблицы нужно было указать cellspacing="0" cellpadding="0"

2. IE почему-то очень хочет чтоб открывающий и закрывающий теги ... находились в одной строке (там где у вас колонка с кнопками-изображениями - я убрал все переводы строки и коментарии)

Под рукой оказались только Firefox 3.0 и IE6 - в обоих работает правильно

[решено] Таблицы в html

[решено] Таблицы в html

Re: [решено] Таблицы в html