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

wtf555

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

Efanych

  • Глобальный модератор
  • 4684
  • 644 / 0
  • Меняю свою жизнь на 360°!
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 / 0
Re: Горизонтальное меню во всю ширину
« Ответ #2 : 04.07.2012, 11:34:23 »
Не помогло, не первый вариант, не второй...
*

Efanych

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

wtf555

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

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • Winter Is Coming
Re: Горизонтальное меню во всю ширину
« Ответ #5 : 04.07.2012, 16:05:05 »
как-то так?
Спойлер
[свернуть]

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

wtf555

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

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • 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 / 0
Re: Горизонтальное меню во всю ширину
« Ответ #8 : 04.07.2012, 16:44:00 »
Спасибо за помощь!
FireBug есть)) Просто я еще не совсем в CSS разбираюсь, учусь пока)
*

den_caruk

  • Захожу иногда
  • 64
  • 2 / 0
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

  • Осваиваюсь на форуме
  • 16
  • 0 / 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 / 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 / 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 / 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 / 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 »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

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

Автор vasilii.pupkov

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

Автор DrShepard

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

Автор coliandra

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

Автор coliandra

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

Автор kuraev64

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