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

wtf555

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

Efanych

  • Группа развития
  • 4317
  • 605
Re: Горизонтальное меню во всю ширину
« Ответ #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

  • Осваиваюсь на форуме
  • 31
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #2 : 04.07.2012, 11:34:23 »
Не помогло, не первый вариант, не второй...
*

Efanych

  • Группа развития
  • 4317
  • 605
Re: Горизонтальное меню во всю ширину
« Ответ #3 : 04.07.2012, 11:42:28 »
Это общая схема, а не готовый код.
Создание сайтов, шаблонов, помощь в решении проблем.
*

wtf555

  • Осваиваюсь на форуме
  • 31
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #4 : 04.07.2012, 12:58:36 »
Это общая схема, а не готовый код.
Да, я попытался добавить это в код, но результаты не те, что нужны
*

dynamit

  • Практически профи
  • 1748
  • 264
  • Winter Is Coming
Re: Горизонтальное меню во всю ширину
« Ответ #5 : 04.07.2012, 16:05:05 »
как-то так?
Спойлер
[свернуть]

Спойлер
[свернуть]
==================================================
  ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5
*

wtf555

  • Осваиваюсь на форуме
  • 31
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #6 : 04.07.2012, 16:18:46 »
Почти, нужно что бы не было красного, и промежутки между пунктами меню заполнялись цветом заливки самих пунктов меню #191919
*

dynamit

  • Практически профи
  • 1748
  • 264
  • Winter Is Coming
Re: Горизонтальное меню во всю ширину
« Ответ #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
==================================================
  ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5
*

wtf555

  • Осваиваюсь на форуме
  • 31
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #8 : 04.07.2012, 16:44:00 »
Спасибо за помощь!
FireBug есть)) Просто я еще не совсем в CSS разбираюсь, учусь пока)
*

den_caruk

  • Осваиваюсь на форуме
  • 64
  • 2
Re: Горизонтальное меню во всю ширину
« Ответ #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

  • Захожу иногда
  • 17
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #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

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

system1024

  • Осваиваюсь на форуме
  • 33
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #12 : 28.06.2016, 13: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

  • Осваиваюсь на форуме
  • 33
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #13 : 28.06.2016, 15: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

  • Осваиваюсь на форуме
  • 33
  • 0
Re: Горизонтальное меню во всю ширину
« Ответ #14 : 28.06.2016, 15: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, 08:09:00 от system1024 »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

"Прыгает" меню при загрузке

Автор Svlad

Ответов: 0
Просмотров: 77
Последний ответ 15.09.2017, 01:09:01
от Svlad
Изменить высоту модуля меню

Автор kunsaid

Ответов: 4
Просмотров: 549
Последний ответ 24.04.2017, 21:45:05
от kunsaid
Выпадающее меню не выпадает при наведении

Автор serg450453

Ответов: 3
Просмотров: 701
Последний ответ 13.04.2017, 18:14:09
от TyronNIKO
Верхнее меню мерцает

Автор slepoy

Ответов: 1
Просмотров: 432
Последний ответ 23.02.2017, 01:06:36
от dmitry_stas
Как выровнять меню по центру? [перемещено]

Автор Tigrubiyca

Ответов: 20
Просмотров: 13578
Последний ответ 05.02.2017, 11:49:11
от Shustry