<div> VS <table> | Форум Mozilla Россия

VS
http://forum.mozilla-russia.org/viewtopic.php?id=5897

princeandrew > 31-10-2005 15:22:44

Привет.
Пару раз натыкался на статьи, в которых написано, что использование TABLE уже устарело давно, что необходимо использовать DIV.
Потом наткнулся на сайт

http://www.csszengarden.com/
http://www.webmascon.com/topics/books/07a.asp

Тоже стало интересно реализовывать свои странички через DIV.
Но сразу же наткнулся на проблему:
Есть у меня таблица. В ней одна строка и пять ячеек. С помощью стилей сделал так, что три средние ячейки выравниваются по центру браузера.
(суть: необходимо расположить три картинки рядом (в строчку) в центре браузера)
Как такое реализовать через DIV?

ПС. Если надо, могу текст своего примера с таблицей написать.

Al_H > 31-10-2005 16:09:26

Вышлите, если не сложно.
Обычно делается через margin-left: auto; margin-right: auto; text-align: center; в контейнере.

princeandrew > 01-11-2005 06:34:32

Ок. Держи.
Файл стиля main.css:

Выделить код

Код:

html, body
{
	height:           100%;
	margin:           0px;
	padding:          0px;
	background-color: white;
    color:            black;
    font:			  normal normal normal 13px/normal Verdana, sans-serif;
}

table
{
	width:          100%;
	height:         100%;
	border-width:   0px;
	padding:        0px;
	border-spacing: 0px;
	text-align:     center;
}

.td_img
{
	border-left:   0px;
	border-right:  0px;
	border-top:    0px;
	border-bottom: 0px;
	text-align:    center;
	height:        360px;
}

a
{
	color:            Black;
	background-color: transparent;
	text-decoration:  none;
	font-weight:      bold;
	border:           0px;
}

a:hover
{
	color:            Red;
	background-color: transparent;
	text-decoration:  none;
	font-weight:      bold;
}

img
{
	border: 0px;
}

Файл содержимого main.htm:

Выделить код

Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" >
<head>
	<title>Главная</title>
	<link rel="Stylesheet" href="styles/main.css" type="text/css" />
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<script type="text/javascript">
	function onMove(el, n)
	{
		eval("document.getElementById('"+el+"').src = \"images/"+el+n+".jpg\"");
	}
	</script>
</head>
<body>
<table>
	<tr valign="middle" align="center">
		<td></td>
		<td class="td_img" style="width:223px;">
			<a href="comics/comics.htm">
				<img id="xmen" src="images/xmen1.jpg" alt="X-Men" onmouseover="onMove('xmen', 2);" onmouseout ="onMove('xmen', 1)" />
			</a>
		</td>
		<td class="td_img" style="width:200px;">
			<a href="anime/anime.htm">
				<img id="anime" src="images/anime1.jpg" alt="Anime" onmouseover="onMove('anime', 2);" onmouseout ="onMove('anime', 1);" />
			</a>
		</td>
		<td class="td_img" style="width:200px;">
			<a href="vampire/vampire.htm">
				<img id="vampires" src="images/vampires1.jpg" alt="Vapmires" onmouseover="onMove('vampires', 2);" onmouseout ="onMove('vampires', 1);" />
			</a>
		</td>
		<td></td>
	</tr>
	<tr height="1px">
		<td colspan="5"><p class="description">Для нормального просмотра страница не используйте Internet Explorer</p></td>
	</tr>
</table>
</body></html>

Соответственно понядобятся три картинки. Высоту и ширину надо будет поправить.

princeandrew > 01-11-2005 06:49:40

А можно немго уточнить?
Я попробовал сделать так:

Выделить код

Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" >
<head>
	<title>Главная</title>
	<link rel="Stylesheet" href="styles/main.css" type="text/css" />
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<script type="text/javascript">
	function onMove(el, n)
	{
		eval("document.getElementById('"+el+"').src = \"images/"+el+n+".jpg\"");
	}
	</script>
</head>
<body>
<div style="margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto; text-align:center; vertical-align:middle;">
	<img id="xmen" src="images/xmen1.jpg" alt="X-Men" onmouseover="onMove('xmen', 2);" onmouseout ="onMove('xmen', 1)" />
</div>
</body></html>

Выравнивается только горизонтально. Firefox 1.0.7

Snik > 01-11-2005 16:05:01

princeandrew

Выравнивается только горизонтально.

А как еще должно выравниваться? RTFM:
'vertical-align'
Value: ...
Initial: ...
Applies to: inline-level and 'table-cell' elements
Вертикальное выравнивание блоков в CSS не предусмотрено.

princeandrew > 02-11-2005 06:40:36

Необходимо, чтобы и центровалось по вертикали тоже.
Я не спорю, что в стандарте CSS такого прямо нет.
Но я же решил задачу с помощью <table>.
Просто думал, что может быть можно её подобно решить и с помощью <div>.
Ну раз нет, остаемся с <table>

Al_H > 02-11-2005 10:59:56

Почитайте http://www.brunildo.org/test/vertmiddle.html - там весело

Snik > 02-11-2005 11:14:21

princeandrew
Да, тогда приходится обходить это дело, делая DIVы CELLами
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html