Форум русской поддержки Joomla!® CMS
09.12.2016, 00:10:30 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Горизонтальное меню во всю ширину

 (Прочитано 8392 раз)
0 Пользователей и 1 Гость смотрят эту тему.
wtf555
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 31


« : 03.07.2012, 21:18:00 »

Вопрос: как сделать горизонтальное меню на всю ширину страницы? И как сделать, что бы пункты меню было на одинаковом расстоянии между собой, а так же со всех сторон. К примеру: оступ 1 пункта меню от левого края 10px, и отступ 6 пункта меню 10px от правого края.
Сайт http://avenuegame.net/
Записан
Efanych
Группа развития
*****

Репутация: +602/-0
Offline Offline

Пол: Мужской
Сообщений: 4320



« Ответ #1 : 04.07.2012, 01:07:17 »

ul {display:table; width:100%}
li {display:table-cell}
или
ul {width:100%; text-align:justify;}
li {display:inline-block}
Записан
wtf555
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 31


« Ответ #2 : 04.07.2012, 11:34:23 »

Не помогло, не первый вариант, не второй...
Записан
Efanych
Группа развития
*****

Репутация: +602/-0
Offline Offline

Пол: Мужской
Сообщений: 4320



« Ответ #3 : 04.07.2012, 11:42:28 »

Это общая схема, а не готовый код.
Записан
wtf555
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 31


« Ответ #4 : 04.07.2012, 12:58:36 »

Это общая схема, а не готовый код.
Да, я попытался добавить это в код, но результаты не те, что нужны
Записан
dynamit
Практически профи
*******

Репутация: +264/-0
Offline Offline

Пол: Мужской
Сообщений: 1748


Winter Is Coming


« Ответ #5 : 04.07.2012, 16:05:05 »

как-то так?
Показать текстовый блок

Показать текстовый блок
Записан
wtf555
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 31


« Ответ #6 : 04.07.2012, 16:18:46 »

Почти, нужно что бы не было красного, и промежутки между пунктами меню заполнялись цветом заливки самих пунктов меню #191919
Записан
dynamit
Практически профи
*******

Репутация: +264/-0
Offline Offline

Пол: Мужской
Сообщений: 1748


Winter Is Coming


« Ответ #7 : 04.07.2012, 16:32:43 »

красная полоса - templates/beez_20/css/personal.css,  строка 482, в ul.menu li уберите из background цвет #800000
в #header ul.menu замените #333333 на #191919
и установите себе FireBug
Записан
wtf555
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 31


« Ответ #8 : 04.07.2012, 16:44:00 »

Спасибо за помощь!
FireBug есть)) Просто я еще не совсем в CSS разбираюсь, учусь пока)
Записан
den_caruk
Осваиваюсь на форуме
***

Репутация: +2/-0
Offline Offline

Пол: Мужской
Сообщений: 64



« Ответ #9 : 01.05.2013, 22:22:06 »

Код:
#nav ul.menu{
        display: table;
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding: 0 10px 0 10px;
list-style-type: none;
font-size: 13px;
background: #eee;
height: 50px;
}


#nav ul.menu :first-child {
padding: 0;
}
#nav ul.menu li  {
margin: 0;
width: auto;
display: table-cell;
text-align: center;
height: 50px;
padding-left: 2px;
vertical-align: bottom;
}
#nav ul.menu li a {
       width: 1000px;
height: 50px;
display: table-cell;
vertical-align: middle;
padding: 0 20px;
line-height: 50px;
color: #666;
text-decoration: none;
}


#nav ul.menu li a:hover, #nav ul.menu li.active {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
Горизонтальное меню на всю ширину для Joomla
« Последнее редактирование: 02.05.2013, 21:50:33 от den_caruk » Записан
73anticrisis
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 17



« Ответ #10 : 05.10.2014, 18:24:30 »

Мой вариант для Joomla:

Код:
#nav {width:100%;}
#nav ul.menu {text-align:justify;overflow:hidden;height:20px;cursor:default;}
#nav ul.menu:after {content:"1";margin-left:100%;height:1px;overflow:hidden;display:inline-block;}
#nav ul.menu li {display:inline;}
#nav ul.menu li a {display:inline-block;color:#1f588e;font:normal 17px/21px Georgia;text-transform:uppercase;text-decoration:none;}
#nav ul.menu li a:hover,  #nav ul.menu li.active a {color:#000;text-decoration:underline;}

Отличие от предыдущего - меню начинается у края div и заканчивается у края. Значит реально во всю ширину выходит. Вдруг кому пригодится.
« Последнее редактирование: 05.10.2014, 18:29:36 от 73anticrisis » Записан
system1024
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 33


« Ответ #11 : 27.06.2016, 14:30:32 »

Никак не могу добиться одинаковой ширины пунктов меню и чтобы само меню было по всей ширине родительского div-а, как тут (нижний вариант). Использую шаблон t3_bs_blank
Никак не реагирует на display:table и т.д.
Может кто-то уже делал на этом шаблоне?
« Последнее редактирование: 27.06.2016, 14:46:04 от system1024 » Записан
system1024
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 33


« Ответ #12 : 28.06.2016, 14:34:27 »

Когда делаю отдельное меню со своей разметкой и стилями, то получается все как надо, то есть корневые пункты меню имеют одинаковую ширину и растягиваются на всю ширину родительского блока. Вот код
Код:
.top-s ul, ol {
margin-bottom:0;
}

.top-line ul{

 display: table;
 width: 100%;
 table-layout: fixed;

}

.top-line li{
 display: table-cell;
 text-align: center;
 padding: 2px 0;
 border-left: 1px solid #D5D5D5;
 border-right: 1px solid #D5D5D5;
 border-collapse:collapse;
 border-left: none;
 vertical-align: middle;

}

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

Репутация: +0/-0
Offline Offline

Сообщений: 33


« Ответ #13 : 28.06.2016, 16:36:35 »

Сделал так

Код:
@media (min-width: 768px) {
 .navbar-nav {
 display: table;
 width: 100%;
}
}

@media (min-width: 768px) {
.navbar-nav > li{
 display: table-cell;
 text-align: center;
 border-left: 1px solid #D5D5D5;
 border-collapse:collapse;
 border-left: none;
 vertical-align: middle;
 float:none;
}
}

Но при таком раскладе ширина пунктов меню разная, подгоняется под размер содержимого, то есть названия меню.
Записан
system1024
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 33


« Ответ #14 : 28.06.2016, 16:57:01 »

Вроде сделал. По крайней мере работает. Хотя вариант наверное кривой.

В шаблоне t3 пользовательские стили прописываются в файле custom.css - он имеет приоритет над другими стилями.
Сделал так:

Код:
@media (min-width: 768px) { /*Это чтобы мобильная версия не поломалась*/
.navbar-nav {
 display: table;
 width: 100%;
 table-layout: fixed;
}
}

@media (min-width: 768px) {
.navbar-nav > li{
 display: table-cell;
 text-align: center;
 border-left: 1px solid #D5D5D5;
 border-collapse:collapse;
 border-left: none;
 vertical-align: middle;
 float:none;
 width: 100%;
}
}
@media (min-width: 768px) {
.navbar-nav > li:first-child {
width: 51px; /*Это для пункта меню с домиком*/
}
« Последнее редактирование: 29.06.2016, 09:09:00 от system1024 » Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet