0 Пользователей и 1 Гость просматривают эту тему.
  • 20 Ответов
  • 13996 Просмотров
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Разделитель меню
« : 20.02.2010, 12:48:12 »
Вобщем столкнулся с маленькой, но довольно нерешаемой проблемой.

Между каждым меню должен стоять разделитель, чтобы пункты меню не смотрелись слитно. Как сделать разделитель, я нашел довольно быстро. Но потом обнаружилась следующая проблема. Разделитель оказывается точно такой же высоты, как и сами буквы. Сколько я там не прописывал параметр height, если размер шрифта 16px, то он хоть убей остается высотой в 16px, а мне нужно 50px. Вот CSS код сепаратора.

span.mainlevel {
height: 50px; !important
background: url(../images/separ.gif) no-repeat left top;
}

вот сам сайт, чтобы понятно было.

хттп://ввв.system - labs (точка) co (точка) il

Разделитель должен идти до конца как на приатаченной картинке, всю голову уже сломал. Не знаю что делать... Подскажите если кто знает плз.


[вложение удалено Администратором]
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #1 : 20.02.2010, 12:50:29 »
а ты делай разделитель не для A а для UL LI, либо подстраивай line-height\padding для спана
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Re: Разделитель меню
« Ответ #2 : 20.02.2010, 13:03:28 »
beliyadm line-height я уже пробовал прописывать, не помогло

попробовал прописать сейчас UL и LI, тоже не помогло. Я примерно вот так их писал, так как не знаю как правильно, а firebug показывает что только через A написать можно.

ul#mainlevel li, ul#mainlevel:link li, ul#mainlevel:visited  li{
background: url(../images/sign.gif) left no-repeat;
}

не помогло совсем, через UL LI - разделитель вобще исчезает куда-то.. может из-за того что я их пишу как-то неправильно или нужно что-нибуть нажать, чтобы они появились там.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #3 : 20.02.2010, 13:06:42 »
у меня такое подозрение, что у тебя в настройках модуля включен горизонтальный\вертикальный легаси вывод (по mainlevel), переключи на плоский список UL LI и с ними работай
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Re: Разделитель меню
« Ответ #4 : 20.02.2010, 13:48:49 »
beliyadm да, ты оказался прав стоял Legacy Horizontal menu, поставил флетлист. Действительно получилось сделать разделительные линии длинной в 50px, но появилась новая проблема. Теперь весь текст вместе с линиями почему-то съзжает вниз :( И линии вылазиют за пределы поля.

Ставил везде где-то только можно, padding: 0; не помогает.

Что делать не знаю вобще.. Все отчего-то смещается вниз, причина вобще неизвестна. Так обидно на такие вот, вроде бы мелокие вещи столько времени уходит.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #5 : 20.02.2010, 13:50:49 »
что значит "уходит вниз"? пункты выстраиваются по вертикали что ли? Ну так добавь для LI либо display: inline; либо display: block; float: left и желательно покажи картинку
Так обидно на такие вот, вроде бы мелокие вещи столько времени уходит.
Это по первости, наработаешь пару готовых болванок на все случаи жизни решений - все будет быстро
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Re: Разделитель меню
« Ответ #6 : 20.02.2010, 14:08:53 »
beliyadm уффф, все разобрался. Мне надо было margin: 0; прописать, теперь вот весь текст почему-то к верху прилип, снова в ступоре. Сейчас пойду покурю, может потом разберусь.
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Re: Разделитель меню
« Ответ #7 : 20.02.2010, 14:28:43 »
вобщем теперь весь текст прилипает к верху, если ставлю padding-top, то вобще разделительные линии уходят, за полосу меню.

[вложение удалено Администратором]
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #8 : 20.02.2010, 14:34:56 »
эх, отправить тебя что ли учить матчасть :) Попробую по пунктам
К примеру мы имеем
Код: css
ul li {display: block; height: 50px;}
Дальше мы делаем
Код: css
ul li {padding-top: 10px;}
и у нас все уползло вниз, то есть высота ul li стала как бы 60 пкс
Для этого нам нужно уменьшать параметры высоты\ширины блока на суммарное значение паддинuов по всем 4-м параметрам:
ширина = ширина - (padding-left + padding-right)
высота = высота - (padding-top + padding-bottom)
И в результате получаем такой стиль
Код: css
ul li {display: block; height: 40px; padding-top: 10px;}
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

nOObMeister

  • Захожу иногда
  • 126
  • 6 / 0
  • хД)))
Re: Разделитель меню
« Ответ #9 : 20.02.2010, 14:41:34 »
beliyadm я немного поколдовал с CSS и у меня получилось, правда пришлось немного понервничать, потом понял, что изначальный.. неправильный вариант был приятнее глазу, после длительных мучений решил вернуть все как было (надеюсь в след. раз пригодятся полученные навыки), но все равно спасибо огромное за помощь :)
*

C_CLuber

  • Новичок
  • 7
  • 0 / 0
Re: Разделитель меню
« Ответ #10 : 05.03.2010, 19:28:48 »
Здравствуйте коллеги..
у меня другая проблема....
Нужно что бы разделители стояли только между кнопками меню!
То есть способ CSS кода:
Код: css
ul#mainlevel li{
background: url(../images/sign.gif) left no-repeat;
}
не подходит.
Т.к. он ставит левый разделитель для всех кнопок.
и мы получаем вот такое меню
< | menyu_item1 | menyu_item2 | menyu_item3 >
а нужно  
< menyu_item1 | menyu_item2 | menyu_item3 >

использую тот же Легаси плоский список

Буду очень благодарен за помощь!
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #11 : 05.03.2010, 19:32:29 »
Цитировать
и мы получаем вот такое меню
< | menyu_item1 | menyu_item2 | menyu_item3 >
а нужно 
< menyu_item1 | menyu_item2 | menyu_item3 >
а для этого у нас у каждого элемента LI есть уникальный класс, берем первый и для него убираем background и получаем то что требуется.
Это мое великое колдунство (да что за слово привязалось то)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

C_CLuber

  • Новичок
  • 7
  • 0 / 0
Re: Разделитель меню
« Ответ #12 : 06.03.2010, 14:11:22 »
хм..... у меня ничего подобного нет...
вот код на выходе
Код: html4strict
<ul id="mainlevel">
   <li>
      <a href="/menyu_item1.html" class="mainlevel" >menyu_item1</a>
   </li>
   <li>
      <a href="/menyu_item2.html" class="mainlevel" id="active_menu">menyu_item2</a>
   </li>
</ul>
*

C_CLuber

  • Новичок
  • 7
  • 0 / 0
Re: Разделитель меню
« Ответ #13 : 06.03.2010, 14:15:33 »
В очередной раз копаний нашел что мояй вопрос [|||баян|||]
вот ссылка на уже имеющуюся тему :))
http://joomlaforum.ru/index.php?topic=67003.0
и кстати там вы подсказали тот способ который мне больше подошел :)
Правда минус его в том что нужно менять код жумлы, а не шаблона....

Посему, подскажите, пожалуйста, по каким причинам у меня могут не прописываться классы к элементам меню в тегах <li>
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #14 : 06.03.2010, 15:23:03 »
Посему, подскажите, пожалуйста, по каким причинам у меня могут не прописываться классы к элементам меню в тегах <li>
может быть у вас версия движка 1.0 )
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Tramontana

  • Захожу иногда
  • 64
  • 0 / 0
Re: Разделитель меню
« Ответ #15 : 27.12.2012, 16:20:14 »
Ситуация такая.

Горизонтальное меню, для которого требуется сепаратор находится в
Код
<div id="menu"></div>
У каждого пункта меню есть свои классы
Код
<li class="item-101">
<li class="item-102">
<li class="item-103">
и т.д.

Сверстал меню вот таким образом.

Код
.moduletable_menu ul{
text-align:center;
}

.moduletable_menu li{
display:inline;
line-height:27px;
}

.moduletable_menu li a{
font-family: Tahoma, Arial, Times New Roman;
font-size: 14px;
font-weight:bold;
color: #FFF;
text-decoration:none;
border-left:2px solid #FFF;
padding: 0 15px;
}

.moduletable_menu li a:hover{
color: #120F6C;
}

Т.е. меню находится по центру и имеет вот такой вид

| Пункт 1 | Пункт 2 | Пункт 3 и т.д.

Т.е. нужно убрать бордер у первого пункта.

Простите за чайниковский вопрос по CSS, но что-то я забыл как это задать.

В общем-то в этом решение данной проблемы. Кто ответит, тот эту тему закроет.
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #16 : 01.01.2013, 04:38:49 »
Код: css
.moduletable_menu .item-101 a {border: 0px !important; }
Либо можно идти через псевдокласс first или через JS, вариации есть
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Tramontana

  • Захожу иногда
  • 64
  • 0 / 0
Re: Разделитель меню
« Ответ #17 : 08.01.2013, 18:18:02 »
Код: css
.moduletable_menu .item-101 a {border: 0px !important; }
Либо можно идти через псевдокласс first или через JS, вариации есть
Спасибо! Работает.
*

Tramontana

  • Захожу иногда
  • 64
  • 0 / 0
Re: Разделитель меню
« Ответ #18 : 09.01.2013, 17:40:34 »
Код: css
.moduletable_menu .item-101 a {border: 0px !important; }
Либо можно идти через псевдокласс first или через JS, вариации есть
Упс! Порадовался, что работает на локалхосте, но на реальном хостинге не работает((((
Возможно такое, что в настройках хостинга стоит запрет на !important?
*

beliyadm

  • Легенда
  • 9758
  • 1664 / 66
  • Севастополь, Россия
Re: Разделитель меню
« Ответ #19 : 16.01.2013, 22:49:05 »
Возможно такое, что в настройках хостинга стоит запрет на !important?
Нет, такого быть не может
Возможно другие стили перебивают этот important ниже
FireBug обычно все показывает
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm
*

Tramontana

  • Захожу иногда
  • 64
  • 0 / 0
Re: Разделитель меню
« Ответ #20 : 17.01.2013, 19:28:05 »
Нет, такого быть не может
Возможно другие стили перебивают этот important ниже
FireBug обычно все показывает
Могу только хлопнуть себя по голове и сказать "Семен Семенович!")) На локалхосте был item-101, а на реальном item-435 ))))
« Последнее редактирование: 17.01.2013, 19:31:09 от Tramontana »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

Ответов: 4
Просмотров: 1546
Последний ответ 29.12.2021, 23:15:38
от v42bis
Выпадающее меню

Автор DrShepard

Ответов: 10
Просмотров: 2119
Последний ответ 20.10.2021, 12:36:16
от DrShepard
Как закруглить края выпадающего меню?

Автор coliandra

Ответов: 1
Просмотров: 814
Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

Ответов: 2
Просмотров: 793
Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

Ответов: 2
Просмотров: 1071
Последний ответ 20.07.2020, 11:18:44
от kuraev64