Помогите реализовать fixed Табличку с помощью <div>-ов

princeandrew · №1

Здравствуйте.
Есть желание сделать на страничке статическую менюшку слева.
Пока делаю так:

Код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
  <title>Коллекция</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251;" />
  <style>
		a
		{
		    display: block;
		    color: #0066FF;
		    background-color: white;
		    text-decoration:  none;
		}
		a:hover
		{
		    display: block;
		    color: #990000;
		    background-color: #99CC00;
		    text-decoration: none;
		}
		#leftMenu
		{
			position: fixed;
			top:  0px;
			left: 0px;
			margin: 5px 0px 0px 0px;
			width: 120px;
			background-color: white;
			color: black;
		}

		#indexList
		{
			position: relative;
			top: 15px;
			width: 120px;
			background-color: white;
			color: black;
		}

		#indexItem
		{
		    position: relative;
			top: 0px;
			width: 20px;
			background-color: white;
			color: black;
		}

		#rightTable
		{
			position: absolute;
			top:  0px;
			left: 125px;
			width: auto;
			margin-right: 5px;
			margin-left:  0px;
			margin-bottom: 10px;
			margin-top: 5px;
			background-color: white;
			color: black;
		}

		#menuNews
		{
			border:        1px solid black;
			border-left:   0px;
			border-right:  0px;
			border-bottom: 1px dotted #0033FF;
			border-top:    1px dotted #0033FF;
			text-align:    center;
			background-color: White;
			color:         black;
		}

		#menuNews:hover
		{
			border:        1px solid black;
			border-left:   1px solid Black;
			border-right:  1px solid Black;
			border-bottom: 1px solid Black;
			border-top:    1px solid Black;
			text-align:    center;
			background-color: black;
			color:         yellow;
		}
  </style>
</head>

<body>
<div id="leftMenu">
	<div id="menuNews"><a href="../news.htm">новости</a></div>
	<div id="indexList">
		<div id="indexItem"><a href="./A.htm">A</a></div>
		<div id="indexItem"><a href="./B.htm">B</a></div>
		<div id="indexItem"><a href="./C.htm">C</a></div>
		<div id="indexItem"><a href="./D.htm">D</a></div>
		<div id="indexItem"><a href="./E.htm">E</a></div>
	</div>
</div>
</body></html>

Вот только необходимо буквы ABCDEF выстроить в один ряд. За ними GHIJKL в другой ряд и т.д.

Как это правильно реализовать?

ПС. Firefox 1.5 rc1.

Snik · №2

princeandrew
1. Исправь ошибки. Конкретно: id должен быть уникальным для каждого элемента. class тебе поможет
2. Для indexItem добавь float: left;

princeandrew · №3

Спасибо. Сделал.

Только вот сейчас хотел сделать справа от этой менюшки табличку из 9 колонок (через дивы). Не могу понять как их надо спозиционировать правильно, чтобы девять ячеек были в одной строке, следующие - в следующей.

Al_H · №4

100%/9?
Или просто 9 div в дополнительный div?

Snik · №5

princeandrew
Первые 9 дивов вкладываем в один общий DIV, вторые 9 - в другой. Эти 2 DIV вложить в 3-й. Для "общих" DIV float не указывать. Но, если честно, уж если тебе действительно нужна таблица, то зачем использовать DIV?

princeandrew · №6

Вообще-то, к данном случае мне нужна таблица.
Но я не могу просто разобраться как реализовывать правильно такие вложения DIV-ов.
Такая схема мне может просто пригодиться в будущем.

Суть такова: есть fixed меню, которое распологается слева страницы (width=120px). Остальную часть страницы (100% - 120px) необходимо заполнить DIV (в данном случаем таблицой, но может понадобиться и просто расположение блоков.). И вот я не могу разобраться как правильно располагать их так. Хотел разобраться просто на примере таблички.

У кого задавать float, у кого нет, у кого - clear, у кого ещё чего.
Задаю 9 div-ов с float: left. Вкладываю в другой, у которого не задаю ни float, ни position. Так он оказывается просто над этими 9-ю DIV-ами, а не окутывает их.
Задаю position: absolute, тогда он их окутывает, но как тогда делать следующую строку? Вот и не могу понять. (при этом это всё ещё должно иметь отступ слева 120px.)
Если есть где-нибудь простой пример, как такое можно сделать, был бы признателен за ссылочку или примерчик.

Al_H · №7

Один вопрос - у Вас слева от основной области есть float-элементы?
http://www.exs.cc/index.php?m=88&a=view
http://www.freeartists.ru/articles_web-technology_3.html
Если их нету, внутрь того контейнера, который определяет строку таблицы, после тэгов-ячеек, нужно поместить чистящий DIV. Стиль у него будет такой примерно

Выделить код

Код:

DIV.clearer {clear: both; font-size: 1px; height: 0;}

в сам DIV может понадобиться вставить неразрывный пробел

Выделить код

Код:

&nbsp;

Обратите внимание - получившуюся верстку в обязательном порядке нужно тестировать в новом Файрфоксе, этак 1.0.5-1.0.6 или новее. Он поддерживает трактовку clear по новому стандарту, результат может быть не такой, как в Internet Explorer 5-6.

Полезная информация

№114-11-2005 11:18:42