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

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

stalingrad432006

Враг народа

Сообщения: 399
Благодарности: 53

Профиль | Отправить PM | Цитировать

Изменения

Автор: stalingrad432006
Дата: 17-10-2008

Понимаю, что не я первый и не последний не может разобраться с классикой. Уже неделю бьюсь над одной страницей. Приведу краткое описание:
1. Первая таблица - размер 100%х100 (шапка). Во внутрь кладу изображение-шапку размер 1000х100. Требование: "резина" в ширину на все окно браузера. Т.е. как не растягивать/сужать изображение левым краем плотно прилегает к левому краю браузера, а правым - к правому. Так же большая просьба, киньте пожалуйста в меня ссылочку, где доходчиво объяснено, как можно изображение в шапке порезать на три части и в оба шва положить нечто, что будет заполнять пространство при растяжении. Суть такова: левый обрезок всегда прижат к левому краю браузера и всегда статичен, в шов прикручиваем нечто, что при растяжении заполняет пространство одним тоном. Далее идет отрезок изображения с надписью, которая не растягивается ни при каких обстоятельствах. Далее шов, такой же как предыдущий. Ну и правый край изображения железно прижатый к правому окну браузера. Я сам даже нагуглить не в состоянии, так как не знаю, как это безобразие называется и, соответственно, какие слова в поисковик вводить.
2. Вторая таблица (контент) содержит три столбика. Первый/левый (железно прикручен к левому краю окна браузера) с пятью изображениями/кнопками, одна под другой; ширина 200. Третий/правый (железно прикручен к правому краю окна браузера) ; ширина 200. Второй/средний занимает все свободное пространство между правым и левым столбиками.
3. Третья таблица - размер 100%х50 (футер). Целиком и полностью похож на шапку, только высота не 100, а 50.
В приведенном ниже коде все нормально отображает только Opera. Mazilla Firefox занесла два изображения из левой/первой колонки во внутрь/вправо. IE7 ИЕ7 левую/первую оставил в покое, зато правую/третью целиком прижал в лево/центр и никак не хочет прижимать ее к правому краю окна браузера. Safari категорически отказался открывать страницу под предлогом "не является приложением Win32". Насколько я понял, проблема в кроссбраузерности. Так же, было бы не плохо, если бы кто-нибудь подсказал, как убрать все все отступы между таблицами так, что бы изображения плотно прилегали друг к другу.
Сам код:

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

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

-------
Своя граната ближе к телу...

Отправлено: 18:21, 26-07-2008

timon4ik

Старожил

Сообщения: 272
Благодарности: 37

Профиль | Отправить PM | Цитировать

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

Код:

<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 почему-то очень хочет чтоб открывающий и закрывающий теги <td>...</td> находились в одной строке (там где у вас колонка с кнопками-изображениями - я убрал все переводы строки и коментарии)

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

Это сообщение посчитали полезным следующие участники:

stalingrad432006, XCodeR

Отправлено: 01:20, 28-07-2008 | #2

Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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