Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
Помощь Поиск Календарь Почта Войти Регистрация  
 
Страниц: [1]   Вниз
  Печать  
Автор Тема: Один блочный элемент наезжает на другой  (Прочитано 21663 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« : 20-04-2010 15:35 » 

Из названия трудно понять что имею ввиду, вот картинка:


Как сделать так что бы список "<li>" не наезжал на таблицу.

Код HTML:
Код:
<div class="menu">
<ul>
<li>Пользователи</li>
<li>Группы</li>
<li>Закладка</li>
</ul>
</div>

<div class="topic"><table width="100%" cellspacing="0" cellpadding="6" border="0">
<tr>
<td class="tcapt">Пользователь</td>
<td class="tcapt">Полное имя</td>
<td class="tcapt">Группа</td>
</tr>
<tr>
<td class="tbox">admin</td>
<td class="tbox">Admin</td>
<td class="tbox">Users</td>
</tr>
</table></div>

Код CSS:
Код:
div.menu {font-weight: bold; margin: 0; padding: 0;}
div.menu ul {margin: 0; padding: 0;}
div.menu li {
  list-style-type: none; display: inline; background-color: green;
  margin: 0; padding: 4px;
}

div.topic .tcapt {background-color: #435370; color: white; font-weight: bold;}

* img.PNG (2.23 Кб - загружено 4887 раз.)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #1 : 20-04-2010 15:40 » 

Serg79, попробуй в FF в контекстном меню - "Проверить элемент" (он же DOM Inspector). Там посмотри "CSS Rules" и "Computed Style". Во втором можно понять текущее значение стилей, а в первом - откуда оно взялось.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 20-04-2010 15:40 » 

Как раз вот на это значение 'padding: 4px;' и накладывается.
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #3 : 20-04-2010 15:42 » 

Бррр...
А как у тебя li за пределы div вылезает? Из-за inline? Но тогда он должен быть внутри блока div.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #4 : 20-04-2010 15:44 » 

Serg79, попробуй в FF в контекстном меню - "Проверить элемент" (он же DOM Inspector). Там посмотри "CSS Rules" и "Computed Style". Во втором можно понять текущее значение стилей, а в первом - откуда оно взялось.
Вот что показывает FF:

* img.PNG (24.07 Кб - загружено 4784 раз.)
Записан
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #5 : 20-04-2010 15:54 » 

Исправил добавлением 'padding' в 'ul':
Код:
div.menu ul {margin: 0; padding: 4px;}

Получилось вот так:

* img.PNG (1.76 Кб - загружено 4877 раз.)
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 20-04-2010 16:02 » 

Serg79, а если объявить ul { display: block; } ? Это было бы логичнее.
Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #7 : 20-04-2010 16:04 » 

Serg79, а если объявить ul { display: block; } ? Это было бы логичнее.
Пробовал, не помогло.
Записан
RXL
Технический
Администратор

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #8 : 20-04-2010 16:23 » 

А после этого шаманства стоит проверить в ряде браузеров... Ага

Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 20-04-2010 16:35 » 

А после этого шаманства стоит проверить в ряде браузеров... Ага
Проверил в FF,  Chrome и IE8, все отлично работает. И что самое интересное, если сделать обратно 'padding: 0' то все они отображают с наездом блок '<li>' именно на 4px.
Записан
baldr
Команда клуба

cy
Offline Offline
Пол: Мужской
Дорогие россияне


WWW
« Ответ #10 : 22-04-2010 06:35 » 

Вместо padding поставь margin ?
Записан

Приличный компьютер всегда будет стоить дороже 1000 долларов, потому что 500 долларов - это не вполне прилично
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 22-04-2010 06:39 » 

baldr, нельзя, тогда фона не будет, появится дырка
можно совместить margin-bottom и padding (не пробовал)
Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #12 : 22-04-2010 13:14 » 

baldr, нельзя, тогда фона не будет, появится дырка
можно совместить margin-bottom и padding (не пробовал)
А зачем Sla, вводить дополнительные непонятнки. Так мы точно знаем что 'margin: 0' и задаем границы с помощью 'padding'.
Записан
Serg79
Команда клуба

ru
Offline Offline
Пол: Мужской

WWW
« Ответ #13 : 22-04-2010 13:16 » 

А так никакой разницы не должно быть. 'ul' будет расширять себе место с помощью 'margin' а 'li' будет раздвигать свои границы с помощью 'padding'.
Записан
Страниц: [1]   Вверх
  Печать  
 

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines