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



 

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

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

Открыть тему
Тема закрыта
> не могу выровнять высоту горизонтального списка ul/li, через table/table-cell
_shpion_
_shpion_
Topic Starter сообщение 7.2.2011, 18:21; Ответить: _shpion_
Сообщение #1


Здравствуйте!
Результат, который нужен: горизонтальный список из 3х ячеек, разделенный бордерами, бордеры одинаковой высоты. Сейчас - бордер, по высоте равен высоте контента. Т.е. из списка сделать "таблицу" средствами CSS.
Вычитал на форумах/блогах, что можно изменить свойство "display" с block на табличный(table/table-cell). Но чего то не могу подобрать комбинацию из table, table-cell, table-row и т.д.
Прошу помочь разобраться:
<!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" />
<title>-</title>

<style>
ul.category-module {
list-style:none;
margin:0;
padding:0;
width:100%;
display:table;
}
ul.category-module li {
width:33%;
float:left;
border-right:solid #999 1px;;
padding: 0 0;
margin: 10px 0;
display:table-cell;
}
ul.category-module li:last-child,
ul.category-module li#lastLi {
border:0;
}
ul.category-module li h4 {
padding:0;
margin:0;
}
a {
color:#f55e00;
padding: 10px;
margin:0;
text-decoration: none;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
}
p {
color:#acacac;
padding: 10px;
padding-top:0;
margin:0;
text-decoration: none;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.75em;
}
</style>

</head>

<body>

<table>
<tr valign="top">
<td>
<ul class="category-module">
<li>
<h4><a href="#">Новости медиа</a></h4>
<p>
Если пренебречь малыми величинами, то видно, что ось ротора представляет собой резонансный параметр Родинга-Гамильтона, изменяя направление движения.</p>
</li>
<li>
<h4><a href="#">Новости медиа</a></h4>
<p>
Устойчивость по Ляпунову вертикальна. Гироскопическая рамка не входит своими составляющими, что очевидно, в силы нормальных реакций связей, так же как и экваториальный момент, что обусловлено малыми углами карданового подвеса.</p>
</li>
<li>
<h4><a href="#">Новости медиа</a></h4>
<p>
Момент сил неустойчив. Точность гироскопа, в силу третьего закона Ньютона, косвенно проецирует крен, учитывая смещения центра масс системы по оси ротора. Угол тангажа вертикально искажает гироскопический стабилизатоор в соответствии с системой уравнений. Векторная форма, в соответствии с основным законом динамики, преобразует волчок, что при любом переменном вращении в горизонтальной плоскости будет направлено вдоль оси.</p>
</li>

</ul>
</td>
</tr>
</table>
</body>
</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 7.2.2011, 19:02; Ответить: vasvas7775
Сообщение #2


<!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" />
<title>-</title>

<style>
li{
display:block;
height:200px;
background-color:;

}
ul.category-module {
list-style:none;
margin:0;
padding:0;
width:100%;
display:table;
}
ul.category-module li {
width:33%;
float:left;
border-right:solid #999 1px;;
padding: 0 0;
margin: 10px 0;
display:table-cell;
}
ul.category-module li:last-child,
ul.category-module li#lastLi {
border:0;
}
ul.category-module li h4 {
padding:0;
margin:0;
}
a {
color:#f55e00;
padding: 10px;
margin:0;
text-decoration: none;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
}
p {
color:#acacac;
padding: 10px;
padding-top:0;
margin:0;
text-decoration: none;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.75em;
}
#v{
border:none;
}

</style>

</head>

<body>

<table>
<tr valign="top">
<td>
<ul class="category-module">
<li id="a">
<h4><a href="#">Новости медиа</a></h4>
<p>
Если пренебречь малыми величинами, то видно, что ось ротора представляет собой резонансный параметр Родинга-Гамильтона, изменяя направление движения.</p>
</li>
<li id="b">
<h4><a href="#">Новости медиа</a></h4>
<p>
Устойчивость по Ляпунову вертикальна. Гироскопическая рамка не входит своими составляющими, что очевидно, в силы нормальных реакций связей, так же как и экваториальный момент, что обусловлено малыми углами карданового подвеса.</p>
</li>
<li id="v">
<h4><a href="#">Новости медиа</a></h4>
<p>
Момент сил неустойчив. Точность гироскопа, в силу третьего закона Ньютона, косвенно проецирует крен, учитывая смещения центра масс системы по оси ротора. Угол тангажа вертикально искажает гироскопический стабилизатоор в соответствии с системой уравнений. Векторная форма, в соответствии с основным законом динамики, преобразует волчок, что при любом переменном вращении в горизонтальной плоскости будет направлено вдоль оси.</p>
</li>

</ul>
</td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
_shpion_
_shpion_
Topic Starter сообщение 7.2.2011, 19:32; Ответить: _shpion_
Сообщение #3


Спасибо, но есть одно но:
li { height:200px;}

Дело в том, что контент динамический + сайт резиновый, и будет постоянно менятся.
Можно как-то прописать высоту "100%" (на прямую height:100% не работает) ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 7.2.2011, 19:35; Ответить: vasvas7775
Сообщение #4


Я могу посоветовать твой список вставить не в див, а в таблицу, Таблица будет растягиваться в зависимости от контента.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
_shpion_
_shpion_
Topic Starter сообщение 7.2.2011, 19:48; Ответить: _shpion_
Сообщение #5


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

Спасибо!

Вот, нашел пример, который адаптируется с div на ul/li, вроде работает (нижние границы/бордеры мне не нужны)
http://www.ejeliot.com/samples/equal-heigh.../example-6.html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 9.2.2011, 5:53; Ответить: Malganus
Сообщение #6


Мм, а можно разжевать мне, смысл в этом? Т.е. зачем переводить списки в таблицы?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
_shpion_
_shpion_
Topic Starter сообщение 9.2.2011, 9:57; Ответить: _shpion_
Сообщение #7


Все очень просто, в настройках модуля нет вывода в режиме "таблица" =)
либо <ul><li><li>...<li><ul>
либо <table><tr><td><ul><li><li>...<li><ul></td></tr></table>

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыBropush - Твой бро в монетизации через Push-уведомления
28 bropush 11194 27.3.2024, 12:52
автор: bropush
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1933 23.3.2024, 7:41
автор: Room
Открытая тема (нет новых ответов) XMLSeo - поисковая выдача Яндекс, Wordstat, Google, Bing, DuckDuckGo через API
0 Malpertu36 1537 25.12.2023, 19:34
автор: Malpertu36
Открытая тема (нет новых ответов) Продвижение сайта через краудинг с поддержкой
Полный комплекс мер по продвижению сайта
0 alexey 987 22.8.2023, 16:33
автор: alexey
Открытая тема (нет новых ответов) Куплю группы ВК - только через гаранта
1 robot_yaga2 865 30.5.2023, 16:51
автор: GlazAlmaz


 



RSS Текстовая версия Сейчас: 29.3.2024, 0:38
Дизайн