форум общения русскоязычных пользователей CMS Текстпаттерн
Вы не зашли.
есть полоса для меню - div фиксированной ширины с заливкой
при нахождении в определенном разделе соответствующий пункт меню должен выделяться - я заливаю другим цветом название пункта и с обеих сторон ставлю картинки
В IE - все как я и задумывал,
в Firefox'e и Opere - заливка только вокруг текста (названия пункта), НО снизу и сверху торчит первоначальный бэкграунд (всего div'a)
Как избавиться? Пока что извращаюсь с верхним и нижним padding'om
Неактивен
Да, код увидеть не помешает. Только не "портянку", как многие любят, а куски конкретно по этим элементам
Насчет заливки вообще - Фокс и Опера, по идее, ведут себя правильно, если заливаемые пункты не типа block. Паддинги тут не помогут, нужно попробовать поставить элементу display:block или float: left (часто меню списками делают через float-раскладку).
Неактивен
Меню у меня горизонтальное
вот первый пунктик
<div class="a" align="right">
<span style="background: #fff; padding: 5px 0px 5px 0px;">
<img src="<txp:site_url />images/left.gif" align="absmiddle"> УСЛУГИ <img src="<txp:site_url />images/right.gif" align="absmiddle"></span>
</div>
#header .a
{
position: absolute;
top: 171px;
left: -1px;
width: 218px;
background: #0088cf;
border: 1px solid #0088cf;
font-weight: bold;
}
Заранее всем спасиба!
Неактивен
marazmus написал:
Паддинги тут не помогут, нужно попробовать поставить элементу display:block
Так вообще весь фон одного цвета - и тот который нужен (непосредственно пункт меню) и общая строка меню
Неактивен
Че-то как-то такой страшный код неохота даже обдумывать Последствия долгой верстки табличками?
Обычно верстка не доставляет проблем в случае, когда все делается проще:
Вот само меню (код html):
<ul id="menu"> <li><a href="/section1">Раздел 1</a></li> <li><a href="/section2" class="active">Раздел 2</a></li> <li><a href="/section3">Раздел 3</a></li> <li><a href="/section4">Раздел 4</a></li> </ul>
Как это работает - да очень просто С отключенным CSS мы получим аккуратный список пунктов меню, обычного "списочного"вида. С включенным CSS наше меню отобразится совершенно по-другому:
Вот как оно будет выглядеть (код CSS):
#menu { float: left; list-style-type: none; } #menu li { float: left; } #menu li a { float: left; background: white; color: black; padding: 5px 10px; } #menu li a:hover, #menu li a.active { background: black; color: white; }
Объясню на пальцах:
Увидим два пункта меню, расположенные по горизонтали. "Неактивный" пункт меню выглядит как черный текст на белом фоне. "Активный" пункт меню (отмеченный классом active) выделен - черный фон, белый текст. То же самое - для состояния, когда на пункт меню наведен курсор (псевдосвойство :hover).
За раскладку пунктов меню по горизонтали отвечает инструкция float: left. Заодно, за счет этого, элементы a становятся "блочными", что позволяет заливать фоном не только текст, но и "весь" элемент a, включая паддинги.
Сам элемент UL мы тоже "зафлоатили" налево - за счет этого все внутренние float-элементы уместились внутри UL. Иначе они просто "выпадают" из родительского гнезда, и все это выглядит очень плохо И имейте в виду, что элементу, который в html будет сразу за ul#menu, нужно поставить clear:left
Другой способ борьбы с "вываливаниями" - назначить UL инструкцию overflow:hidden, но в этом случае для IE6 нужно будет добавить конкретную ширину элемента (хотя бы в процентах) - иначе свойство overflow не сработает (такой вот у нас IE ).
Заодно - данный способ позволяет не обращать внимание на высоту и ширину элемента a. Т.е. это 100% "резина". Хотя, если нужен фиксаж, просто добавьте width и height к элементу а
Если нужно пунктам меню добавить графику, к свойству background нужно добавить рисунки:
... #menu li a { float: left; width: 100px; background: white ulr(menu-item-bg.jpg) center left no-repeat; color: black; } ...
Окончательный вариант можно увидеть здесь: http://marazmus.net.ru/temp-works/textp … index.html
Посмотрите CSS и исходный код html. Делайте проще - не нужно таких страшных конструкций с дивами для такого простого меню Пользуйтесь силой свойства background и вообще CSS
Отредактированно marazmus (20-05-2007 19:29:08)
Неактивен
Согласен - наизвращался я сильно
Просто с css столкнулся (вернее пришлось ) совсем недавно
Щас буду разбираться. Спасибо огромное!!!
Неактивен
Ё!
все клева!!
спасибо большущее!!!
Неактивен
marazmus написал:
Результат покажете?
Обязательно. Но пока что сайтец не открыл.
кстати, что-то не могу бэкграундом картинку прикрутить..
Отредактированно advan (21-05-2007 22:27:02)
Неактивен
Скорее всего путь до картинки относительный без первого слэша... Я тоже с этим столкнулся когда переносил с отдельных страниц html+Css на рабочий сайт.
Неактивен
Conwell написал:
Скорее всего путь до картинки относительный без первого слэша... Я тоже с этим столкнулся когда переносил с отдельных страниц html+Css на рабочий сайт.
Да нет вроде, в других местах норамльно все работает.. НО буду смотреть
Неактивен
бааааалин
забыл перед заливкой бэкграунда поставить #
Еще вопросик - можно ли бэкграундом 2 картинки вставить - слева и справа? Как?
Неактивен
Еще вопросик - можно ли бэкграундом 2 картинки вставить - слева и справа? Как?
Средствами CSS2 на данный момент - никак, для _одного_ элемента (тега). В CSS3 обещают такое, но когда это еще будет...
Так что единственный выход - сунуть еще один внутренний тег, к примеру, "безобидный" span, типо так:
<li><a href="/bla-bla/"><span>bla-bla</span></a></li>
Один бекграунд вешаем на a, другой на span. Это обычная практика создания сложных бекграундов. Для создания круглых уголков, к примеру, CSS-маньяки используют четыре вложенных тега (обычно div)
Можно попробовать без span - у нас же есть еще li
Неактивен
Еще раз большое спасибо!
Неактивен