Textpattern - на русском языке

форум общения русскоязычных пользователей CMS Текстпаттерн

Вы не зашли.

#1 18-05-2007 22:01:09

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

background в div'ах и span'ах

есть полоса для меню - div фиксированной ширины с заливкой
при нахождении в определенном разделе соответствующий пункт меню должен выделяться - я заливаю другим цветом название пункта и с обеих сторон ставлю картинки

В IE - все как я и задумывал,
в Firefox'e и Opere - заливка только вокруг текста (названия пункта), НО снизу и сверху торчит первоначальный бэкграунд (всего div'a)

Как избавиться? Пока что извращаюсь с верхним и нижним padding'om


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#2 18-05-2007 22:17:54

Nicck
ферт
Откуда: Ижевск
Зарегистрирован: 11-05-2005
Сообщений: 536
Вебсайт

Re: background в div'ах и span'ах

html и сss следует показывать в таких случаях. Лень же нам гадать что там у тебя и как.

Неактивен

 

#3 19-05-2007 00:18:10

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: background в div'ах и span'ах

Да, код увидеть не помешает. Только не "портянку", как многие любят, а куски конкретно по этим элементам smile

Насчет заливки вообще - Фокс и Опера, по идее, ведут себя правильно, если заливаемые пункты не типа block. Паддинги тут не помогут, нужно попробовать поставить элементу display:block или float: left (часто меню списками делают через float-раскладку).

Неактивен

 

#4 19-05-2007 10:53:03

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

Меню у меня горизонтальное

вот первый пунктик

<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;
}

Заранее всем спасиба!


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#5 20-05-2007 12:19:51

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

marazmus написал:

Паддинги тут не помогут, нужно попробовать поставить элементу display:block

Так вообще весь фон одного цвета - и тот который нужен (непосредственно пункт меню) и общая строка меню sad


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#6 20-05-2007 19:24:39

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: background в div'ах и span'ах

Че-то как-то такой страшный код неохота даже обдумывать smile Последствия долгой верстки табличками?

Обычно верстка не доставляет проблем в случае, когда все делается проще:

Вот само меню (код 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>

Как это работает - да очень просто smile С отключенным 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; }

Объясню на пальцах: smile

Увидим два пункта меню, расположенные по горизонтали. "Неактивный" пункт меню выглядит как черный текст на белом фоне. "Активный" пункт меню (отмеченный классом active) выделен - черный фон, белый текст. То же самое - для состояния, когда на пункт меню наведен курсор (псевдосвойство :hover).

За раскладку пунктов меню по горизонтали отвечает инструкция float: left. Заодно, за счет этого, элементы a становятся "блочными", что позволяет заливать фоном не только текст, но и "весь" элемент a, включая паддинги.

Сам элемент UL мы тоже "зафлоатили" налево - за счет этого все внутренние float-элементы уместились внутри UL. Иначе они просто "выпадают" из родительского гнезда, и все это выглядит очень плохо smile И имейте в виду, что элементу, который в html будет сразу за ul#menu, нужно поставить clear:left smile
Другой способ борьбы с "вываливаниями" - назначить UL инструкцию overflow:hidden, но в этом случае для IE6 нужно будет добавить конкретную ширину элемента (хотя бы в процентах) - иначе свойство overflow не сработает (такой вот у нас IE smile ).

Заодно - данный способ позволяет не обращать внимание на высоту и ширину элемента a. Т.е. это 100% "резина". Хотя, если нужен фиксаж, просто добавьте width и height к элементу а smile

Если нужно пунктам меню добавить графику, к свойству 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. Делайте проще - не нужно таких страшных конструкций с дивами для такого простого меню smile Пользуйтесь силой свойства background и вообще CSS smile

Отредактированно marazmus (20-05-2007 19:29:08)

Неактивен

 

#7 20-05-2007 19:33:50

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

Согласен - наизвращался я сильно smile
Просто с css столкнулся (вернее пришлось smile) совсем недавно
Щас буду разбираться. Спасибо огромное!!!


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#8 21-05-2007 19:47:35

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

Ё!
все клева!!
спасибо большущее!!!


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#9 21-05-2007 21:24:11

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: background в div'ах и span'ах

Результат покажете? smile

Неактивен

 

#10 21-05-2007 22:20:40

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

marazmus написал:

Результат покажете? smile

Обязательно. Но пока что сайтец не открыл. smile

кстати, что-то не могу бэкграундом картинку прикрутить.. hmm

Отредактированно advan (21-05-2007 22:27:02)


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#11 22-05-2007 14:41:15

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: background в div'ах и span'ах

кстати, что-то не могу бэкграундом картинку прикрутить..

А в чем проблема?

Неактивен

 

#12 22-05-2007 18:31:43

Conwell
глаголь
Зарегистрирован: 14-05-2007
Сообщений: 36

Re: background в div'ах и span'ах

Скорее всего путь до картинки относительный без первого слэша... Я тоже с этим столкнулся когда переносил с отдельных страниц html+Css на рабочий сайт.

Неактивен

 

#13 22-05-2007 18:57:28

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

Conwell написал:

Скорее всего путь до картинки относительный без первого слэша... Я тоже с этим столкнулся когда переносил с отдельных страниц html+Css на рабочий сайт.

Да нет вроде, в других местах норамльно все работает.. НО буду смотреть


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#14 22-05-2007 19:18:13

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

бааааалин smile
забыл перед заливкой бэкграунда поставить # smile

Еще вопросик - можно ли бэкграундом 2 картинки вставить - слева и справа? Как?


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

#15 22-05-2007 20:11:02

marazmus
наш
Откуда: Россия, Октябрьский
Зарегистрирован: 23-01-2006
Сообщений: 217
Вебсайт

Re: background в div'ах и span'ах

Еще вопросик - можно ли бэкграундом 2 картинки вставить - слева и справа? Как?

Средствами CSS2 на данный момент - никак, для _одного_ элемента (тега). В CSS3 обещают такое, но когда это еще будет... smile

Так что единственный выход - сунуть еще один внутренний тег, к примеру, "безобидный" span, типо так:
<li><a href="/bla-bla/"><span>bla-bla</span></a></li>

Один бекграунд вешаем на a, другой на span. Это обычная практика создания сложных бекграундов. Для создания круглых уголков, к примеру, CSS-маньяки используют четыре вложенных тега (обычно div) smile

Можно попробовать без span -  у нас же есть еще li smile

Неактивен

 

#16 27-05-2007 14:18:17

advan
ю
Откуда: Mk
Зарегистрирован: 05-11-2006
Сообщений: 835
Вебсайт

Re: background в div'ах и span'ах

Еще раз большое спасибо!


Знакомьтесь на здоровье - http://love.kachok.ru  /  Я в PHP ниПХПуя незнаю! :)

Неактивен

 

Board footer

RSS   Rambler's Top100
Powered by PunBB
Textpattern.ru