Новости Joomla

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

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

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

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

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

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Как отцентрировать меню?
« : 11.03.2012, 16:10:51 »
Ни как не получается в Joomla 2.5 отцентрировать горизонтальное меню.
Т.е. сделать размер кнопок одинаковой длины по горизонтали, даже если слова разной длины.
Если делаю это с помощью CSS, то выходит все криво, потому что:
1. В CSS изменяю расстояние между словами меню, но длина слов-то разная!
2. Кнопки (картинки) встают ровно, а наложение текста поверх кнопок - криво. Из-за разной длины слов, они уползают, вот рисунок:

Можно ли с помощью CSS решить эту проблему и центрировать слова не по расстоянию между ними, а привязать к центру кнопок?
Меню Joomla совершенно обычное без всяких модов.
« Последнее редактирование: 12.03.2012, 09:22:31 от _laila_ »
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #1 : 12.03.2012, 09:24:03 »
немного подправила вопрос, может в CSS для каждого пункта меню расстояние как-то задать?
Блин, уже не знаю что придумать.
« Последнее редактирование: 12.03.2012, 09:38:56 от _laila_ »
*

rembot

  • Захожу иногда
  • 101
  • 2 / 0
  • +++
Re: Как отцентрировать меню?
« Ответ #2 : 12.03.2012, 12:21:13 »
Можно ссылку на сайт?
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #3 : 12.03.2012, 13:37:22 »
ни как, он у меня на локалке. Могу CSS кинуть:
Код
/* CSS Document */

body
{background-color:#170000;}
.style3 {
color: #FAE37D;
font-size: 10px;}
.style4 {
color: #FAE37D;
font-size: 12px;
font-style: italic;}

 ul.menu li {
float: left; /* выравниваем ссылки по горизонтали */
list-style-type: none; /* убираем маркеры списка*/
padding-left:25px; /* внутренний отступ слева */
padding-right:10px; /* внутренний отступ справа */
padding-bottom:11px; /* внутренний отступ снизу */
padding-top:0px; /* внутренний отступ сверху */
background-image: url(../images/menu.png) no-repeat right top; /* разделитель */
position:relative; /* позиционируем в блоке родителя */
background-position: center;
background-repeat: no-repeat;}

 ul.menu a {
display: block; /* делаем кликабельной всю кнопку */
height: 30px; /* высота кнопки*/
width: 80px; /* ширина кнопки*/
padding: 0 1px; /* внутренний отступ справа и слева */
overflow: hidden; /* запрещаем обтекание */
color: #7a7a7a; /* цвет ссылки */
font-family:'Times New Roman' ; /* название шрифта */
font-style:bold; /* жирность шрифта */
font-size: 18px; /* размер шрифта */
text-decoration:none; /* убираем подчеркивание ссылки */
padding-top:3px; /* внутренний отступ сверху */
background: url(../images/12.png);}

ul.menu li a, ul.menu li.active ul li a  {color:#7a7a7a;}
 
ul.menu li ul {
    display:none;
    position:absolute;
    top:2em;
    left:0;
    padding:0px 0x 0px; /* всплывающее окно в ширину */
    margin:0px 0px 7px;  /* всплывающее окно в высоту */
   /* background-color:black; */
background: url(../images/12.png);
    opacity:1;  /* прозрачность всплывающего окна 0,75 */}

ul.menu li:hover ul {display:block;}

ul.menu li:hover ul li a{height:auto;}

 ul.menu {padding:0; margin:0; }
 
 ul.menu li.active a, ul.menu li a:hover {color:#E8A03D; /* цвет ссылки при наведении и активной ссылки */}
ul.menu li a, ul.menu li.active ul li a  {color:#7a7a7a; }
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #4 : 12.03.2012, 13:43:38 »
Я тут немного покумекала,

мне нужно выровнять текст в этих черных кнопках по центру, а там уже кнопки эти подгоню под фоновую картинку меню.
Ну блин как-то так только решила действовать, вверху код как раз от этой картинки
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Как отцентрировать меню?
« Ответ #5 : 12.03.2012, 13:44:45 »
1. Считаем кол-во пунктов меню.
2. Делим 100 на кол-во пунктов меню.
3. Результат это ширина блока в %.
4. Профит!

--------------------------------
Заняться нечем? Вырезать один блок и привязывать к li, а дальше дело за малым - выравнивание текста по центру.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Как отцентрировать меню?
« Ответ #6 : 12.03.2012, 13:57:21 »

Заняться нечем? Вырезать один блок и привязывать к li, а дальше дело за малым - выравнивание текста по центру.
так судя по коду,ссылкам назначены фоновые картинки, и вобще, меню выпадающее. а судя по картинке фон вообще не понять чему назначен но коду не соответсвует
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Как отцентрировать меню?
« Ответ #7 : 12.03.2012, 14:00:50 »
_laila_, не обязательно подымать зеркало сайта. Выложите хотя бы нормальную копию страницы. См. мануал: http://joomlaforum.ru/index.php/topic,162376
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Как отцентрировать меню?
« Ответ #8 : 12.03.2012, 14:08:59 »
danik.html, код не смотрел, написал так, как сделал бы сам, чего лишний раз придумывают ХЗ и CSS что-то большой для вопроса из первого поста.
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Как отцентрировать меню?
« Ответ #9 : 12.03.2012, 14:10:54 »
Как бы сделал я: имея трёхуровневую структуру элементов (<li><a><span>), я бы сделал длинный спрайт из фона, потом назначал бы его всем трём элементам с выравниванием влево/вправо/по-центру и сдвигал бы элементы на ширину бордюра.
*

NightGuard

  • Живу я здесь
  • 2927
  • 378 / 7
  • вжжж-вжжж
Re: Как отцентрировать меню?
« Ответ #10 : 12.03.2012, 14:11:50 »
Так, спокойно! Иначе предлагаю достать линейки! ))))
Идеология сверхпотребления более опасна для человечества, чем идеология гитлеровского тоталитаризма
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Как отцентрировать меню?
« Ответ #11 : 12.03.2012, 14:20:07 »
так ей наоборот нужны кнопки фикс. ширины, зачем спрайты.
_laila_ уберите вообще горизонтальные паддинги у li и a, задайте для a text-aling: center и подбирайте ширину a чтобы ссылки совпали с фоном. А вобще, да. раз у ссылок фон одинаковый, надобыло нарезать картинку-фон ссылки а не делать общий фон.
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #12 : 12.03.2012, 14:37:59 »
сейчас попробую нарезать:) текст отцентрировать вышло посередине кнопки, извините, я раньше делала простенькие сайты на HTML, а с CSS только второй день знакомлюсь. Еще не все функции понятны.
*

GDV

  • Завсегдатай
  • 1898
  • 201 / 5
Re: Как отцентрировать меню?
« Ответ #13 : 12.03.2012, 14:41:13 »
Убедительная просьба не писать в ЛС. Для решения Ваших проблем есть форум.
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #14 : 12.03.2012, 15:45:33 »
У меня уже прогресс  :D


Нарезала картинку меню, теперь каждая кнопка - отдельная картинка,
но фон задний всё равно в градиенте пришлось сделать в полный размер, потому как сбоку у меня бордюр уходит под меню (на картинке снизу слева) сижу думаю вот как без заднего фона оставить этот бордюр.
Спасибо за ссылку, но я на этом сайте уже сидю:)
иногда нужно пня конкретного получить и сразу дело начинает ладиться:)
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #15 : 12.03.2012, 16:09:51 »
Добавила в  ul.menu li {:
   
    line-height:100px;

что бы опустить по вертикали надписи, всё встало на места, а вот в выпадающем меню расстояние вертикально тоже увеличилось, и выглядит теперь это довольно таки забавно:)



Сидю думаю, в выпадающем меню картинка и расстояние нужны другие!



*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Как отцентрировать меню?
« Ответ #16 : 12.03.2012, 17:56:15 »
Код: css
ul.menu > li > a {
background: #f00; /* это правило применится только к ссылкам первого уровня*/
}
ul.menu > li {
line-height:100px; /* это правило применится только к пунктам первого уровня, однако line-height скорее всего унаследуется, так что дописывает следующее:*/
}

ul.menu > li li {
background: #0f0; /* это правило применится к пунктам второго и последующего уровней*/
}
ul.menu > li > ul > li {
background: #00f; /* это правило применится только к пунктам второго уровня*/
}
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Как отцентрировать меню?
« Ответ #17 : 12.03.2012, 18:49:48 »
Дополню предыдущий рецепт...
1. копируем из modules\mod_menu\tmpl\ в templates\название_шаблона\html\mod_menu\ файл default.php
2. добавляем после, например:
Код: php
if ($item->deeper) {
$class .= ' deeper';
}

if ($item->parent) {
$class .= ' parent';
}
/*начало вставки*/
$class .= ' mlev-'.$item->level;
/*конец вставки*/
Теперь можно избавиться от дочерних/сестринских/соседских/дедовских... селекторов и назначать стили отдельным классам, и они не будут наследоваться.
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Как отцентрировать меню?
« Ответ #18 : 12.03.2012, 19:01:18 »
А в чем смысл то, когда все прекрасно, универсально и понятно на CSS, без всякого вмешательства в код ?
Типа, "нафиг мне CSS, когда я php знаю" , да?  ;D
Код: css
ul.menu li a {
color: red;
}
ul.menu li li a{
color: green;
}
ul.menu li li li a{
color: blue;
}

Обычно этого достаточно.
« Последнее редактирование: 12.03.2012, 19:06:38 от danik.html »
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Как отцентрировать меню?
« Ответ #19 : 12.03.2012, 19:15:04 »
А смысл самый обыкновенный. И я его выше написал - наследование. Т.е., если мы объявили правила и они унаслидовались, то для потомков придётся это правило повторять. Кода в разы больше. К примеру, делаем трёхуровневое меню выпадающее. Раз объявили ul {position:absolute; top:50px;}, то придётся писать ul ul {position:relative; left:0;}. А если разные уровни имеют различные margin, padding, float, background, font... то это вообще в головняк превращается. Возьмём ваш же пример. Надо мне сделать ссылку второго ТОЛЬКО уровня красной. Значит придётся писать li a {color:red;} li li a {color:...}. Имея отличительный класс (типа знание php  и знание CSS никак друг другу не мешают ^-^) мне намного проще писать css-ку.
*

Shustry

  • Moderator
  • 6434
  • 745 / 3
Re: Как отцентрировать меню?
« Ответ #20 : 12.03.2012, 19:16:36 »
И это не говоря уже о специфичности. Селектор ul.menu li li li a в х... знает во сколько раз медленней .alev-1
*

_laila_

  • Осваиваюсь на форуме
  • 31
  • 0 / 0
  • Упс
Re: Как отцентрировать меню?
« Ответ #21 : 13.03.2012, 13:17:17 »
Сейчас пока делаю по наставлению danik.html, тупо что бы разобраться что и как работает в CSS,
но уже вижу здравые мысли в рецепте Shustry, потому как нужно для каждого дочернего селектора постоянно повторять значения,
 если я не хочу что бы они наследовались от родительского элемента.
Спасибо вам большое, сильно помогли понять!:)
« Последнее редактирование: 14.03.2012, 14:32:46 от _laila_ »
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
Re: Как отцентрировать меню?
« Ответ #22 : 13.03.2012, 15:17:10 »
Да, пожалуй соглашусь, класс level-x может быть полезен.
Но я один фиг буду делать по-своему :)
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!

Re: Как отцентрировать меню?
« Ответ #23 : 25.04.2012, 21:47:41 »
Народ привет! Кто знает как сделать горизонтальное меню в Joomla 2,5 ? Я новичек в 2.5 делаю новый сайт
Вот ссылка:
http://kupit.um.la
Помогите пожалуйста, уже и модуль какой-то скачал, все бестолку
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Не работает transition для определенных элементов

Автор Bozhkov2

Ответов: 5
Просмотров: 4158
Последний ответ 12.10.2016, 17:07:41
от Bozhkov2
Как сделать такой заголовок модуля?

Автор Ilhom666

Ответов: 9
Просмотров: 1835
Последний ответ 22.03.2016, 11:55:33
от darkghost
Выставить относительно фона пункты меню ?

Автор warlocksp

Ответов: 6
Просмотров: 1501
Последний ответ 01.02.2016, 10:58:26
от warlocksp
Вставка шрифта?

Автор warlocksp

Ответов: 16
Просмотров: 1673
Последний ответ 18.01.2016, 19:04:11
от warlocksp
Удалить маркеры?

Автор warlocksp

Ответов: 4
Просмотров: 2245
Последний ответ 09.01.2016, 17:07:35
от warlocksp