Форум программистов и сисадминов CyberForum.ru
Вернуться   Форум программистов и сисадминов CyberForum.ru > Форум Форум web-программистов > Форум HTML, CSS
Восстановить пароль Регистрация

Ответ Создать новую тему
 
Старый 19.07.2013, 12:10   #1
Sunman
Форумчанин
 
Регистрация: 02.03.2010
Сообщений: 391
Репутация: 53 (53)
Лучшие ответы: 1
Почему не растягивается ul на высоту вложенных элементов / HTML, CSS

Добрый день. Подскажите где косяк: http://jsfiddle.net/nFJ98/5/
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="top_menu">
        <ul>
            <li id="top_el1"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li id="top_el2"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul> 
            
            </li>
            <li id="top_el3"><a href="#">1</a>
                 
            </li>
            <li id="top_el4"><a href="#">1</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">1</a></li>
                </ul>            
            </li>
        </ul>
    </div>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#top_menu ul{
    margin:0;
    padding:0;
    list-style:none;
    text-transform:uppercase;
    font:14px Verdana, Geneva, sans-serif bold ;z-index:10;
}
 
#top_menu ul li {
    float:left;
    display:block;
    width:170px;
    margin:18px -133px 0 149px;
    text-align:center;
}
#top_menu ul li a {
    display:block;
    width:170px;
    padding-top:1px;
    height:24px;
}
 
#top_menu #top_el3{margin:18px -132px 0 211px;}
 
#top_menu ul li a:hover {
    box-shadow: 0 0 5px 6px #F6D82A;
   -moz-box-shadow: 0 0 5px 6px #F6D82A;
   -webkit-box-shadow: 0 0 5px 6px #F6D82A;
    border-radius: 3px;  /* свойство для тех кто его поддерживает */
   -moz-border-radius: 3px;  /* для firefox */
   -webkit-border-radius: 3px;  /* для Safari и Chrome */
}
 
#top_menu ul li ul li a{
    width:170px;
    color:black;
}
#top_menu ul li ul li {margin:0; height:30px;}
#top_menu ul li ul{
    background-color:#FF0;
    border:2px solid black; 
    width:165px;
}
#top_menu ul li ul не реагирует на высоту вложенных элементов li и остается "полосочкой бордера черного цвета" поджатой под родительский li. Если задать ему высоту то он вытягивается вниз как и должно быть, но почему он не реагирует на высоту вложенных?

 Комментарий модератора Taatshi
Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Старый 19.07.2013, 12:42   #2
Forastero
Форумчанин
 
Аватар для Forastero
 
Регистрация: 15.05.2013
Сообщений: 587
Репутация: 467 (249)
Лучшие ответы: 4
Здравствуйте. Внесите небольшие поправки. Добавьте свойство:
Код CSS
1
2
3
#top_menu ul li ul {
    overflow: hidden;
}
Другие темы раздела Форум HTML, CSS. Обсуждение языка разметки HTML и каскадных таблиц стилей CSS. Верстка страниц.
sharepoint: Как правильно создавать горизонтальное выпадающее меню HTML, CSS
Здравствуйте, у меня есть вопрос , как правильно создавать горизонтальное выпадающее меня, с использованием соственного html, css и javascript кода ?
CSS overflow hidden HTML, CSS
проблема в том что на сайте siteкогда ставлю overflow hidden облака исчезают полностью а когда убираю есть прокрутка в права тс как поставить границу что бы Экран не прокручивался { margin: 100px; padding: -100px; } #sky { height: -550px;
Старый 19.07.2013, 13:04  [ТС]   #3
Sunman
Форумчанин
 
Регистрация: 02.03.2010
Сообщений: 391
Репутация: 53 (53)
Лучшие ответы: 1
Помогло,благодарю, но это убило мою логику))
overflow: hidden; - вроде должно скрывать, а тут наоборот появляется, как так?
Старый 19.07.2013, 13:21   #4
Forastero
Форумчанин
 
Аватар для Forastero
 
Регистрация: 15.05.2013
Сообщений: 587
Репутация: 467 (249)
Лучшие ответы: 4
Sunman, если высота элемента не задана, а в данном случае не задана, то элемент оборачивает дочерние элементы.
Старый 19.07.2013, 13:21
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Автор
HTML, CSS Почему div меняет фиксированную высоту при масштабировании?
Добрый день. подскажите в чем тут дело? есть блок, в который вставляется флеш-баннер. причем баннер должен быть 100% по ширине и 60 пикселей в высоту. <div style="width:100%; height:60px; border:1px solid red; min-height:60px; max-height:60px;"> <object...
ariran
HTML, CSS Таблица растягивается в высоту
<html> <title>Моя страница</title> <body> Фильмы <center> <table width="80"border="2"> <tr> <td widht=25%>№</td> <td widht=75%>Название</td> <td widht=75%>Год выпуска</td>
Alek70694
HTML, CSS Почему сайт растягивается?
Как сделать чтобы сайт во всех расширениях монитора был одинаковый не растягивался? Спасибо. Кусочек css body { padding:0; margin:0; min-height:100%; Arial, sans-serif; background: url('images/bgs/body.jpg') top left fixed no-repeat; -o-background-size: 100% 100%; ...
Almaz1
C# под Web, ASP.NET Создание вложенных элементов
Надо динамически создать примерно такое: <ul> <li id="id_1" class="class_1> <a href="url" class="class_2"> <span class="class_3"> Текст </span> </a> </li> </ul>
=Cl@ud=
C++ Builder как уменьшить высоту заголовка окна и высоту главного меню?
Доброй ночи! Может кто нибудь знает (если это возможно), как можно уменьшить высоту заголовка окна и высоту главного меню? Добавлено через 12 часов 4 минуты И еще) Как запретить пользователю менять ширину окна, при этом чтобы высоту он мог менять свободно
Wital
Опции темы

Текущее время: 22:35. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.