Jump to content
  • 0

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


BPOTHOCOK
 Share

Question

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

Готовый 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 в свой контейнер забирает и предыдущий список ссылок почему то.

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

Прямо явственно слышу их плач, когда они пытаются понять, что же имел в виду горе-верстальщик, вкладывая например <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, не задавая явно размеров. Тогда он подстроит свои размеры таким образом, чтобы его содержимое помещалось на странице в прямоугольном виде, поскольку скрывать содержимое элементов без надобности браузеры ну очень не любят.

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Edited by BPOTHOCOK
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy