Новости Joomla

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!

Quantum Manager нужен сообществу, а автору нужна ваша поддержка!Файловый менеджер Quantum — одно...

Файловый менеджер Quantum — одно из самых популярных решений для Joomla, созданное разработчиком из сообщества Joomla, Дмитрием Цымбалом (@tsymbalmitia). Он делает Quantum удобным, безопасным и современным, обновляет его, исправляет уязвимости и отвечает пользователям — всё это в свободное от основной работы время.

Теперь настал момент для следующего шага: развитие проекта требует больше времени и ресурсов.

Русский язык для плагина N3T Cookie consent

Вставка VK VIDEO v.1.2.4 - плагин для Joomla

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

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Кнопки с закругленными концами
« : 30.06.2011, 14:50:05 »
Добрый день!
Подскажите, пожалуйста, как сделать так, что бы кнопки у верхнего меню были резиновые и закругленные?
Записан
*

Space Monkey

  • Захожу иногда
  • 108
  • 16 / 0
  • in vino veritas
Re: Кнопки с закругленными концами
« Ответ #1 : 30.06.2011, 15:05:36 »
через картинки
либо через border-radius
минус первого варианта в том что лишняя нагрузка в виде 2х изображений.И если у пользователя отключены изображения то кнопки не будут просто в виде текста.
минус второго варианта в том что не все браузеры воспринимают это свойство.Точнее сказать только новые его воспринимают.
Надежнее через картинки делать,но я предпочитаю border-radius
« Последнее редактирование: 30.06.2011, 15:09:08 от Space Monkey »
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #2 : 30.06.2011, 15:07:44 »
Спасибо!
Записан
*

VaiZerD

  • Осваиваюсь на форуме
  • 28
  • 0 / 0
Re: Кнопки с закругленными концами
« Ответ #3 : 30.06.2011, 17:05:30 »
  -moz-border-radius:
  -webkit-border-radius:
 ^-^ про эти свойства для других браузеров,тоже не стоит забывать.
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #4 : 30.06.2011, 17:07:35 »
ОК, учтем
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #5 : 01.07.2011, 15:56:12 »
и pie для осла:)
Записан
*

Efanych

  • Глобальный модератор
  • 4683
  • 644 / 0
  • Меняю свою жизнь на 360°!
Re: Кнопки с закругленными концами
« Ответ #6 : 01.07.2011, 16:03:48 »
Записан
Создание сайтов, шаблонов, помощь в решении проблем.
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #7 : 01.07.2011, 17:26:17 »
Всем спасибо за помощь. Буду практиковаться :)
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #8 : 04.10.2011, 16:08:19 »
Понравился способ, который привел Space Monkey (через картинки), но никак не получается его применить к своему горизонтальному меню. Помогите, пожалуйста, что я делаю не так? Вот сам мой код:
Код
ul#mainlevel-nav {
	text-decoration: none;
	list-style: none;
	padding: 0;
	margin: 0 0px;
	float:left;
	color:#E7A038;
	}
ul#mainlevel-nav li {
	width:130px;
	float:left;
	font-size:0.9em;
	height:29px;
	line-height:29px;

	display:inline;
	}
	
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
background: transparent url('/templates/homiks/images/2.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
	}
	
ul#mainlevel-nav li a:link span {
background: transparent url('/templates/homiks/images/1.png') no-repeat;
        display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
	}



ul#mainlevel-nav #active_menu-nav {
	white-space:nowrap;
	margin:0;
	padding:0;
	color: #ffffff;

	}

ul#mainlevel-nav li a:hover {
	white-space:nowrap;
	margin:0;
	padding:0;
	color: #ffffff;

	}
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #9 : 04.10.2011, 17:26:05 »
ссылку на сайт дайте.
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #10 : 04.10.2011, 17:26:48 »
Пока на локале
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #11 : 04.10.2011, 17:27:48 »
а что именно не получается, как отображается меню на данный момент?
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #12 : 04.10.2011, 17:31:07 »
Отображаются кнопки с этой картинкой 2.png
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #13 : 04.10.2011, 17:33:56 »
а скрин нельзя сделать?
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #14 : 04.10.2011, 17:37:57 »
Прикрепил

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

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #15 : 04.10.2011, 17:56:49 »
а 1.png - существует по указанному пути?
дай лучше хтмл архив:)
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #16 : 05.10.2011, 12:24:38 »
Опубликовал недоделку: snwm.xclan.ru
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #17 : 05.10.2011, 15:36:29 »
вся беда в том что у тебя меню состоит так:

Код
<ul><li><a href="#">ссылка</a></li></ul>

а в CSS учитывается еще тег span,которого у тебя в HTML нету
т.е. код нужен такой:
Код
<ul><li><a href="#"><span>ссылка</span></a></li></ul>

причина - может быть в том что переделан модуль вывода меню, или переделан способ, которым он выводится.

Решить можно примерно так:
Код
ul#mainlevel-nav {
	text-decoration: none;
	list-style: none;
	padding: 0;
	margin: 0 0px;
	float:left;
	color:#E7A038;
	}

	
ul#mainlevel-nav li {
background: transparent url('/templates/homiks/images/2.png') no-repeat scroll top right;
    width:130px;
    
    line-height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
   float:left;
   list-style:none;
    
	}
	
ul#mainlevel-nav li a {
background: transparent url('/templates/homiks/images/1.png') no-repeat;
        display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    color: #444;
    text-decoration: none;
 font: normal 12px arial, sans-serif;
	}



ul#mainlevel-nav #active_menu-nav {
	white-space:nowrap;
	margin:0;
	padding:0;
	color: #ffffff;

	}

ul#mainlevel-nav li a:hover {
	white-space:nowrap;
	margin:0;
	padding:0;
	color: #ffffff;

	}

в твоём коде -- фон применялся к ссылке и тегу span, в моем варианте  фон применяется к ссылке и тегу li
« Последнее редактирование: 05.10.2011, 15:48:35 от kolu4iy »
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #18 : 05.10.2011, 15:42:22 »
Получилось вертикальное меню: snwm.xclan.ru
Записан
*

kolu4iy

  • Захожу иногда
  • 162
  • 22 / 4
Re: Кнопки с закругленными концами
« Ответ #19 : 05.10.2011, 15:48:54 »
обновил код
Записан
*

qwe88

  • Захожу иногда
  • 367
  • 3 / 1
Re: Кнопки с закругленными концами
« Ответ #20 : 05.10.2011, 15:54:10 »
Супер!
kolu4iy, огромное вам СПАИБО!
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Выравнить кнопки на карточке товара

Автор DrShepard

 Ответов: 10
Просмотров: 3486 		Последний ответ 21.02.2022, 10:56:18
от DrShepard
Как добавить сторонние кнопки CSS в модули и плагины Joomla?

Автор bayersoff

 Ответов: 12
Просмотров: 6186 		Последний ответ 23.12.2018, 17:42:46
от effrit
Убрать рамки у кнопки

Автор leha111

 Ответов: 1
Просмотров: 3986 		Последний ответ 08.06.2018, 12:56:25
от draff
Автоматическое добавление кнопки подробнее

Автор lexxbry

 Ответов: 3
Просмотров: 1850 		Последний ответ 27.02.2018, 18:40:58
от beliyadm
Социальные кнопки Яндекса - Блок «Поделиться» - асинхронно

Автор leo78

 Ответов: 2
Просмотров: 3476 		Последний ответ 17.10.2017, 00:09:07
от leo78