X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Высота элемента dl по содержимому
Andy Superstar
Andy Superstar
Topic Starter сообщение 9.10.2008, 5:42; Ответить: Andy Superstar
Сообщение #1


У меня вопрос: можно ли как-нибудь сделать, чтобы высота элмента dl увеличивалась по высоте?

Смотрите, такая ситуация: элемент dl имеет вложенный элемент dd, в dd присутствует текст, который может перескакивать на новую строку, если его много. Проблема в том, что dl на это никак не реагирует.

Элементов dl в столбец много, выходит, когда текст переходит на новую строку, он уже залазит на нижеидущий dl.

В общем схема такая

<dl><dd>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</dd></dl>

<dl><dd>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</dd></dl>

<dl><dd>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</dd></dl>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 9.10.2008, 10:47; Ответить: Webmaster_hb
Сообщение #2


у меня нормально отображается, растягивается по высоте и ничего не налазит
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 9.10.2008, 15:41; Ответить: Andy Superstar
Сообщение #3


Хм, ясно, посмотрю что, может из тэгов не закрыл.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 9.10.2008, 15:58; Ответить: Andy Superstar
Сообщение #4


Всё ясно, просто dd имел ширину 35%, поэтому всё проваливалось. Задал dt ширину 100% не проваливается вроде бы.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 10.10.2008, 10:55; Ответить: Andy Superstar
Сообщение #5


У вас для <dl> работает padding-bottom, margin-bottom?

margin-top в IE иначе отображается ещё у всех так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 10.10.2008, 11:19; Ответить: Exterior
Сообщение #6


(' post='12616 @ 10.10.2008, 13:55)
У вас для <dl> работает padding-bottom, margin-bottom?

margin-top в IE иначе отображается ещё у всех так?

все параметры (margins -top, -bottom; paddings -top, -bottom) отобразились в Opera, FF, IE, Chrom одинаково, только у IE дефолтные промежутки между dl увеличины на несколько px
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 10.10.2008, 14:59; Ответить: Andy Superstar
Сообщение #7


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

И всё-таки нижние отступы упорно не хотят у меня работать.

Я вот на таком проверял:

<!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=utf-8" />
<meta http-equiv="content-language" content="ru" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="andy superstar!" />
<meta name="robots" content="all" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="test.css"></link>
<title>Test</title>

</head>

<body>

<div id="pools">

<fieldset>

<dl>

<dt>Some Text Some Text Some Text Some Text Some Text</dt>

<dd class="bar">

<div>fghfgfgh</div>

</dd>

<dd class="percent">CF G GHJ GF HJ G FMG FMF GMH GFF G H</dd>

</dl>

<dl>

<dt>Some Text Some Text Some Text Some Text Some Text</dt>

<dd class="bar">

<div>fghfgfgh</div>

</dd>

<dd class="percent">CF G GHJ GF HJ G FMG FMF GMH GFF G H</dd>

</dl>

</fieldset>

</div>

</body>
</html>


Стили

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 1;
}

html {
    font-size:100.01%;
}

body {
    line-height: 1;
    color: #B4B39E;
    background: #292C37;
    /*background: url('metal_transition.jpg');*/
    font: 0.625em sans-serif;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

div#pools {width: 36.7em; padding: 1em; background: black;}

dl {margin: 10px; font-size: 1.4em; background: orange;}

dt {float: left; width: 30%; background: brown;}

dd.bar {float: left; width: 50%; background: purple;}

dd.percent {float: left; width: 19%; background: green;}


Если задать отступ нижний, тогда в браузерах его у меня нет. Где может быть ошибка?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 10.10.2008, 15:25; Ответить: Galen
Сообщение #8


У вас dt и dd имеют свойство float:left. Может попробовать где-нибудь прописать свойство clear:left (я несовсем понимаю, какого эффекта вы хотите добиться).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 10.10.2008, 15:40; Ответить: Andy Superstar
Сообщение #9


Добиться, что бы элменты dt и dd выравнивались водну строку в каждом dl.

Для чего именно прописать clear:left?

Чёрт, такая тупизна настало, не могу понять dl расширить по содержимому.)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 10.10.2008, 16:04; Ответить: Galen
Сообщение #10


Добиться, что бы элменты dt и dd выравнивались водну строку в каждом dl.

Может тогда проще для dt и dd задать display:inline и padding`ами подправить?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Автоматическая высота grid
0 askjust.ru 4518 13.2.2019, 13:32
автор: -askjust.ru-
Открытая тема (нет новых ответов) При удалении одного элемента, перестает работать другой. Помогите исправить!
1 vantusxyz 5572 24.6.2016, 16:08
автор: -Degradator-
Открытая тема (нет новых ответов) Как подстроить 3 разные элемента в один ряд
2 Генрих Арутюнян 5541 19.2.2015, 10:43
автор: -Генрих Арутюнян-
Открытая тема (нет новых ответов) Див не растягивается по высоте содержимомго, его высота - 0. Нужно чтоб растягивался
3 websty 9729 23.10.2011, 6:00
автор: -texno-
Открытая тема (нет новых ответов) Увеличивается высота строк в таблице
2 Rugstad 6402 2.4.2011, 15:14
автор: -Rugstad-


 



RSS Текстовая версия Сейчас: 26.4.2024, 1:31
Дизайн