Помогите - CSS глюк?

BPOTHOCOK · September 3, 2010

Наткнулся при коде на несколько проблем, кроме того я чайник.

Готовый htm файл залил здесь http://rapidshare.com/files/416737094/TEMPO.htm.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" xml:lang="en" lang="en">

<head>
  <title>Что то тут не то</title>
  <style type="text/css">
  ul {
  border: solid 1px;
  float: left;
  list-style: none;
  margin: 10% 0 0 1em; padding: 0 1em 0 0.5em;
}
li {
  background: #00FFCC;
}
ul div {
  background: #CCCCFF;
  margin-left: -0.5em;
}
a:hover {
  text-decoration: none;
  background: #CCCC99;
  display: block;
}

table {
  margin: 0 auto;
}
th.ftable {
  border: dotted 1px;
}
table table {
  border-collapse: collapse;
  margin: 1em auto;
}
th,td {
  border: solid 1px;
  padding: 0.2em;
}
  </style>
</head>

<body>

<ul>
<div>Пункт 1</div>
<li><a href="scilko.html">Ссылка</a></li>
<li><a href="scilko.html">Ссылка</a></li>
<div>Пункт 2</div>
<li><a href="scilko.html">Ссылка</a></li>
<div>Пункт П</div>
<li><a href="scilko.html">Ссылка</a></li>
</ul>

<table><tr><th class="ftable">
<table>
<caption>ЗАГОЛОВОК</caption>
<tr><th>Н</th><th>что то интересное</th></tr>
<tr><td>1</td><td>AAA</td></tr>
<tr><td>2</td><td>BBB</td></tr>
<tr><td>3</td><td>CCC</td></tr>
<tr><td>4</td><td>DDD</td></tr>
<tr><td>5</td><td>EEE</td></tr>
<tr><td>6</td><td>FFF</td></tr>
<tr><td>7</td><td>GGG</td></tr>
<tr><td>8</td><td>HHH</td></tr>
<tr><td>9</td><td>III</td></tr>
<tr><td>10</td><td>JJJ</td></tr>
<tr><td>11</td><td>KKK</td></tr>
<tr><td>12</td><td>LLL</td></tr>
</table>

<table>
<tr><th>Н</th><th>что то интересное</th></tr>
<tr><td colspan=2>ПОДЗАГОЛОВОК</td></tr>
<tr><td>1</td><td>MMMMM</td></tr>
<tr><td>2</td><td>NNNNN</td></tr>
<tr><td>3</td><td>OOOOO</td></tr>
<tr><td>4</td><td>PPPPP</td></tr>
<tr><td>5</td><td>QQQQQ</td></tr>
<tr><td>6</td><td>RRRRR</td></tr>
<tr><td>7</td><td>SSSSS</td></tr>
<tr><td>8</td><td>TTTTT</td></tr>
<tr><td>9</td><td>UUUUU</td></tr>
<tr><td>10</td><td>VVVVV</td></tr>
<tr><td>11</td><td>WWWWWWWWWW</td></tr>
<tr><td>12</td><td>XXXXX</td></tr>
<tr><td>13</td><td>YYYYY</td></tr>
<tr><td>14</td><td>ZZZZZ</td></tr>
</table>
</th></tr></table>

</body>

</html>

Собственно проблем с этим кодом несколько.

1. При наведении на ссылки из списка, вторая и последняя раскрываются (IE6 XPsp2). В Opera всё хорошо.

2. Заметьте что две таблицы вложены в таблицу. Это я сделал потому что если эти таблицы закрыть в блок DIV то таблицы не получается выстроить одна под другой, из за того что DIV в свой контейнер забирает и предыдущий список ссылок почему то.

swetlana · September 3, 2010

Ой как браузеры стонут из своей квирксмоды!

Прямо явственно слышу их плач, когда они пытаются понять, что же имел в виду горе-верстальщик, вкладывая например <div> внутрь <ul>, не завернув в <li>, или указывая display: block для a:hover, когда a:link — нормальная инлайновая

2. Заметьте что две таблицы вложены в таблицу. Это я сделал потому что если эти таблицы закрыть в блок DIV то таблицы не получается выстроить одна под другой, из за того что DIV в свой контейнер забирает и предыдущий список ссылок почему то.

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

Если завернуть таблицы в <div>, то они будут обтекать список ссылок справа, так как списку задано свойство float: left.

Вот список из-за этого свойства прибился слева, а все остальные его обтекают. На момент, пока поток занят прибитым слева списком, ширина его сужается на ширину списка. Таким образом, та таблица, которая оказалась в потоке напротив списка, руководствуясь правилом margin: 0 auto старается держать равные отступы с обеих сторон — слева до списка, а справа — до правого края body.

Следующая таблица уже оказывается ниже, там, где списка нет. Руководствуясь тем же правилом, она держит равное расстояние до правого и левого края body (это если никаких специальных свойств для оборачивающего таблицы div'а не задавать).

В результате получается, что при равной ширине таблиц нижняя оказывается левее, чем верхняя. И Вам это не нравится. Логично.

Решить проблему Вы пытаетесь завернув таблицы в ещё одну таблицу. Результат получается как бы похожим на правду потому как таблица — жёсткий элемент, и если она обтекает список, то сохраняет свою ширину и дальше, а вложенные таблицы считают отступы до ровных краёв оборачивающей таблицы.

Но это решение до безумия криво с точки зрения семантики кода. div и то лучше.

И с оборачивающим div'ом можно проделать тот же фокус как минимум двумя способами:

— если известна ширина списка со ссылками, то можно задать левый маргин такой же ширины. Тогда список ссылок прибьётся слева в зоне действия этого маргина и никак не повлияет на доступную для div'а ширину;

— задать div'у overflow: hidden, не задавая явно размеров. Тогда он подстроит свои размеры таким образом, чтобы его содержимое помещалось на странице в прямоугольном виде, поскольку скрывать содержимое элементов без надобности браузеры ну очень не любят.

Вот как-то так.

Надеюсь, что правильно поняла Вас.

BPOTHOCOK · September 9, 2010

Отказался от списков. div'ы удобнее. По второй проблеме всё верно, попробую. :9

swetlana · September 10, 2010

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

Посмотрите на свою кашу валидатором хоть разок.

BPOTHOCOK · September 10, 2010

Я всё переделал. CSS прошёл проверку с одной ошибкой "Свойство font-face не существует : monospace monospace"

А html валидатор тоже прошёл с одной ошибкой повторяющейся много раз. Я в таблице выравнивание во всех ячейках поставил одним id идентификатором. оказывается не по правилам. хотя всё логично.

Edited September 10, 2010 by BPOTHOCOK

mishka · September 10, 2010

Отказался от списков. div'ы удобнее. По второй проблеме всё верно, попробую.

От списков отказываться ненужно. Это тоже блочные элементы. От таблиц откажитесь.

Searcher · September 10, 2010

Я всё переделал. CSS прошёл проверку с одной ошибкой "Свойство font-face не существует : monospace monospace"
А html валидатор тоже прошёл с одной ошибкой повторяющейся много раз. Я в таблице выравнивание во всех ячейках поставил одним id идентификатором. оказывается не по правилам. хотя всё логично.

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

Для установки одинаковых свойств нескольким элементам используйте классы.

Sign In

Помогите - CSS глюк?

Question

BPOTHOCOK

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

swetlana

Link to comment

Share on other sites

BPOTHOCOK

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

BPOTHOCOK

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information