Проблема со списком определений

**fenixnt** · 05.12.2007, 18:14

Здравствуйте. Столкнулся со следующей ситуацией. Например, у меня список определений, который состоит из фото (dt) и ссылкой внизу фото - увеличить (dd) общий dl. После чего следует параграф с верхним бордером. Вопрос: Почему параграф становится сверху dl и как этоого избежать?

Пример кода:

Код:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0px; padding:0px;}
#content dl { float:left; margin:0;margin:15px 0 0 19px;}
#content dt {padding:10px; border:4px solid #D2D2D2; }
#content dd { padding:5px; margin:0; font-weight:bold}
#allf {border-top: 1px solid #C1B59C; margin-top:100px; display:block}
</style>
</head>
<body>
<div id="content">
<dl>
****<dt>[img]img/f1.jpg[/img]</dt>
****<dd>[img]img/zoom.gif[/img] увеличить</dd>
</dl>
<p id="allf">Далееееееее</p>
</div>
</body>
</html>

Заранее спасибо.

**Aykroyd** · 05.12.2007, 19:31

Originally posted by fenixnt@Dec 5 2007, 19:14
Почему параграф становится сверху dl
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Потому что для dl задан float.

Originally posted by fenixnt@Dec 5 2007, 19:14
как этоого избежать?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не задавать для dl свойство float.

P.S. У Вас список определений состоит из одного термина и одного описания?

**fenixnt** · 05.12.2007, 19:41

Originally posted by Aykroyd@Dec 5 2007, 20:31
Потому что для dl задан float.
Не задавать для dl свойство float.
P.S. У Вас список определений состоит из одного термина и одного описания?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Для параграфа задал clear:left. Теперь все ок.Спасибо за помощь.
Да, как видите фото и внизу ссылка. Вы намекаете на то, что надо делать через список ul?Хотел сделать через список, но пришлось бы каждому li указывать параметры, так как у фото имеется рамка, а у ссылки нет.

**Aykroyd** · 05.12.2007, 20:16

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

Семантическая верстка – это не «выкинуть из верстки таблицы и заменить их дивами и списками». Это правильное структурирование документа, при котором каждый структурный элемент HTML выбирается не на основе того, как он выглядит в браузере, а на основе его семантического предназначения.

Вот взять хотя бы одно Ваше высказывание:

так как у фото имеется рамка, а у ссылки нет

Что есть рамка? Это оформление, которое к структурной разметке не имеет никакого отношения. Почему тогда Вы считаете наличие или отсутствие рамки критерием для выбора того или иного элемента HTML? Нельзя исходить из того, что и какие параметры придется для чего-то там указывать. В первую очередь [Только зарегистрированные пользователи могут видеть ссылки. ].

Список определений подразумевает наличие нескольких (больше одного) элементов dt и dd внутри <dl>...</dl>. Потому что это список. А один термин и одно его определение – это не список. Если каждый термин и каждое определение заключать в свой собственный <dl>...</dl> – такая верстка мало чем будет отличаться от табличной... Потому что это абсурдно и противоречит логике...

**fenixnt** · 07.12.2007, 22:17

Originally posted by Aykroyd@Dec 5 2007, 21:16
Ни на что я не намекаю. Просто у меня складывается впечатление, что Вы до сих пор не разобрались, что из себя представляют семантические требования стандартов. И при этом стараетесь использовать списки определений везде, где только представляется такая возможность. Наверное, потому что это модно... Иного объяснения этому Вашему феномену я просто не нахожу...

Семантическая верстка – это не «выкинуть из верстки таблицы и заменить их дивами и списками». Это правильное структурирование документа, при котором каждый структурный элемент HTML выбирается не на основе того, как он выглядит в браузере, а на основе его семантического предназначения.

Вот взять хотя бы одно Ваше высказывание:
Что есть рамка? Это оформление, которое к структурной разметке не имеет никакого отношения. Почему тогда Вы считаете наличие или отсутствие рамки критерием для выбора того или иного элемента HTML? Нельзя исходить из того, что и какие параметры придется для чего-то там указывать. В первую очередь [Только зарегистрированные пользователи могут видеть ссылки. ].

Список определений подразумевает наличие нескольких (больше одного) элементов dt и dd внутри <dl>...</dl>. Потому что это список. А один термин и одно его определение – это не список. Если каждый термин и каждое определение заключать в свой собственный <dl>...</dl> – такая верстка мало чем будет отличаться от табличной... Потому что это абсурдно и противоречит логике...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Не потому что модно, а потому что у картинки будут с разными размерами и будут постоянно менятся.

Список определений подразумевает наличие нескольких (больше одного) элементов dt (и, и/или?) dd внутри <dl>...</dl>. Например логично ли использовать в списке определений два dt и один dd или наоборот два dd один dt?

В моем примере получается что для картинки надо будет указать класс, а ссылка это параграф. Как Вы считаете насколько правильно будет отображение информации в таком виде?

Спасибо.

**Aykroyd** · 07.12.2007, 22:26

Originally posted by fenixnt@Dec 7 2007, 23:17
Не потому что модно, а потому что у картинки будут с разными размерами и будут постоянно менятся.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
"...Я предпочитаю забивать гвозди утюгом, потому что они разной длины и толщины..."

Originally posted by fenixnt@Dec 7 2007, 23:17
Список определений подразумевает наличие нескольких (больше одного) элементов dt (и, и/или?) dd внутри <dl>...</dl>. Например логично ли использовать в списке определений два dt* и один dd или наоборот два dd один dt?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Бред какой... Пожалуйста, скажите мне, как Вы понимаете, что есть элемент dt и что есть элемент dd. Какой у них смысл? Что они означают?

**fenixnt** · 07.12.2007, 22:55

Originally posted by Aykroyd@Dec 7 2007, 23:26
"...Я предпочитаю забивать гвозди утюгом, потому что они разной длины и толщины..."
Бред какой... Пожалуйста, скажите мне, как Вы понимаете, что есть элемент dt и что есть элемент dd. Какой у них смысл? Что они означают?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
<DT> это термин. <DD> - описание термина, или определение.
Вы же сами до этого писали.
Есть такой список определений:

Ингредиенты:
- 100 г муки
- 10 г сахара
- 1 стакан воды
- 2 яйца
- соль, перец
Процедура:
- Тщательно смешайте сухие ингредиенты.
- Влейте жидкие ингредиенты.
- Смешивайте 10 минут.
- Выпекайте в течение часа при температуре 300 градусов.
Примечания:
- Можно добавить изюм.

Как например поступать в такой ситуации.
Ингредиенты: - dt,
100 г муки 10 г сахара 1 стакан воды 2 яйца соль, перец - dd

А в последнем случае где примечание, что использовать?
Если в данном примере забыть о заголовках.

вместо этого (-) отступ 3px;

**Aykroyd** · 07.12.2007, 23:13

То что Вы привели – это три неупорядоченных списка. Где Вы там нашли термины и их описания? В каком толковом словаре Вы обнаружили, что слово «примечание» трактуется как «можно добавить изюм»?!

Код:

<dl>
 *<dt>Примечание</dt>
 *<dd>Дополнительное объяснение, заметка позади текста или в сноске под текстом.</dd>
 *<dt>Одурелый</dt>
 *<dd>Дошедший до одури, выражающий одурь.</dd>
</dl>

Один термин – одно определение, два термина – два определения, три термина – три определения... N терминов – N определений...

Код:

<h4>Ингредиенты:</h4>
*
100г муки

 *
10г сахара

 *
1 стакан воды

 *
2 яйца

 *
соль, перец

<h4>Процедура:</h4>
*
Тщательно смешайте сухие ингредиенты.

 *
Влейте жидкие ингредиенты.

 *
Смешивайте 10 минут.

 *
Выпекайте в течение часа при температуре 300 градусов.

<h4>Примечания:</h4>
*
Можно добавить изюм.

**fenixnt** · 08.12.2007, 00:40

Originally posted by Aykroyd@Dec 8 2007, 00:13
То что Вы привели – это три неупорядоченных списка. Где Вы там нашли термины и их описания? В каком толковом словаре Вы обнаружили, что слово «примечание» трактуется как «можно добавить изюм»?!

Код:

<dl> *<dt>Примечание</dt> *<dd>Дополнительное объяснение, заметка позади текста или в сноске под текстом.</dd> *<dt>Одурелый</dt> *<dd>Дошедший до одури, выражающий одурь.</dd> </dl>

Один термин – одно определение, два термина – два определения, три термина – три определения... N терминов – N определений...

Код:

<h4>Ингредиенты:</h4>
*
100г муки *
10г сахара *
1 стакан воды *
2 яйца *
соль, перец
<h4>Процедура:</h4>
*
Тщательно смешайте сухие ингредиенты. *
Влейте жидкие ингредиенты. *
Смешивайте 10 минут. *
Выпекайте в течение часа при температуре 300 градусов.
<h4>Примечания:</h4>
*
Можно добавить изюм.

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Согласен с Вами полностью. Это пример размещен как список определений
[Только зарегистрированные пользователи могут видеть ссылки. ].
Это только одна ссылка с таким примером, таких подобных немеренное количество.

В итоге получается, что список определений должен состоять как минимум из 2 dt и 2 dd.

**Aykroyd** · 08.12.2007, 01:02

Originally posted by fenixnt@Dec 8 2007, 01:40
В итоге получается, что список определений должен состоять как минимум из 2 dt и 2 dd.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вот именно. Только разных dt и разных dd. В противном случае это уже не список, а просто один термин с описанием. Такие конструкции (с одним термином) оформляются обычно следующим образом:

Код:

<dfn>Аутсорсинг</dfn> – привлечение третьих лиц для выполнения определенных работ или оказания определенных услуг.</p>

Тема: Проблема со списком определений

Опции темы

Поиск по теме

Отображение

Похожие темы

Проблема с div под FF

Проблема с div под IE

проблема с EPS

Проблема с UTF-8

Проблемы со списком

Ваши права