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

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

Как выровнять ширину блока с кнопками меню по ширине шапки сайта?

 (Прочитано 351 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Cherish
Захожу иногда
**

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

Сообщений: 21


« : 11.02.2016, 19:12:53 »

Всем привет!
На сайте при редактировании пункта меню в Joomla 2.5 возникла проблема:
блок с кнопками меню отображается не по ширине шапки сайта, смотрится очень некорректно!
Пробовала изменить  ширину этого блока с кнопками меню, не сильна в CSS, ничего не получилось(
Помогите пожалуйста выровнять эти кнопки по ширине шапки сайта, ОЧЕНЬ ГОРИТ ПРОБЛЕМА!

Сайт http://realklass.com.ua
Записан
Ilhom666
Живу я здесь
******

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

Сообщений: 1343



« Ответ #1 : 11.02.2016, 19:32:48 »

Равномерное выравнивание блоков по ширине
Записан
al-teen
Support Team
*****

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

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



« Ответ #2 : 11.02.2016, 19:42:06 »

http://html5.by/blog/flexbox/
Записан
Cherish
Захожу иногда
**

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

Сообщений: 21


« Ответ #3 : 18.02.2016, 15:52:36 »

Спасибо большое, ребята, помогли Grin
Использовала способ выравнивания пунктов меню с псевдоэлементом
Все работает!

Возник другой вопрос:
выпадающее подменю в последнем пункте меню дергается и не отображается!
Что нужно исправить, чтоб отображение было нормальным ?!
Сайт http://realklass.com.ua/

Вот CSS, не судите строго:
Код:
/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

@import url(../warp/css/menus.css);


/* Mega Drop-Down Menu
----------------------------------------------------------------------------------------------------*/

/* Level 1 */
.menu-dropdown {
margin-bottom: -10px;
margin-left:0px;
font: 14px Verdana, Geneva, sans-serif;
line-height: 0;
font-size: 1px;
text-justify: newspaper;
zoom:1;
text-align-last: left;
 }

.menu-dropdown:after {
width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}


.menu-dropdown li.level1 {
  margin-right: 5px;
  padding-bottom: 1px;
  /*background:url("../images/menu/knopki3.png") repeat scroll center/100%;*/
  background:url("/templates/realklass/images/shapka.jpg") no-repeat scroll center center / 123% auto #a52d2d;
 
  border:1px solid red;
  /*background-position:0px 30px;*/
  width:108px;
  height:23px;
display: inline-block;
line-height: normal;
font-size: 14px;
vertical-align: top;

 
}


.menu-dropdown li.level1:hover{
  margin-right: 5px;
  padding-bottom: 1px;
  /*background:url("../images/menu/knopki5.png") repeat scroll center/100%;*/
  background:url("../images/shapka_.png") repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
  border:1px solid yellow;
  }
  .menu-dropdown li.level1.active.current{
  /*margin-right: 2px;*/
  padding-bottom: 1px;
  /*background:url("../images/menu/knopki5.png") repeat scroll center/100%;*/
  background:url("../images/shapka_.png") repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
  border:1px solid yellow;
  }
 
  .level1.active.current > span
  {color:red;}

.menu-dropdown a.level1,
.menu-dropdown span.level1 {
  border: none;
  color: #fff;
}

.menu-dropdown a.level1 > span,
.menu-dropdown span.level1 > span {
  /*height: 30px;*/
  line-height: 22px;
  font-weight:bold;
  color:yellow;
  text-transform:lowercase;
    font-size: 16px;
  /*margin-top:-5px;*/
}
.menu-dropdown a.level1 > span:hover
{
color:red;
}


.menu-dropdown li.level1.item123 { width: 203px; }
.menu-dropdown li.level1.item123 active current { width: 203px; }

.menu-dropdown li.level1.item116,
.menu-dropdown li.level1.item116.active current { width: 157px; }


.menu-dropdown li.level1.item117,
.menu-dropdown li.level1 item117.active current { width: 130px; }

.menu-dropdown li.level1.item118.parent,
.menu-dropdown li.level1.item118.parent.active current { width: 163px; }

.menu-dropdown li.level1.item119,
.menu-dropdown li.level1.item119.active current { width: 175px; }

.menu-dropdown li.level1.item120.parent,
.menu-dropdown li.level1.item120.parent.active current { width: 103px; }

.menu-dropdown li.level1.item121.parent,
.menu-dropdown li.level1.item121.parent.active current { width: 109px; }


/* Set Active */
.menu-dropdown li.active .level1 { color: #48b; }

/* Set Hover */
.menu-dropdown li.level1:hover .level1,
.menu-dropdown li.remain .level1 { color: #d50; }

/* Drop-Down */
.menu-dropdown .dropdown {
    top: 24px;
  border-top: 1px solid transparent;
  width: 163px !important;
}

.menu-dropdown .dropdown-bg > div {
  padding: 5px;
  border: 1px solid transparent;
  border-top: none;
/*  background:#252525 url(../images/menugradient.png) repeat-x;*/
    background: #B22222;
}

/* Level 2 */
.menu-dropdown li.level2 {
  margin: 0 5px;
  border-top: 1px solid #FF8C00;/* #404040;*/
}

.menu-dropdown li.level2:first-child { border: none; }

.menu-dropdown a.level2,
.menu-dropdown span.level2 { color: #fff; }

/* Set Hover */
.menu-dropdown a.level2:hover { color: yellow; text-decoration:underline;} /* #d50; */

/* Set Current */
.menu-dropdown a.current.level2 { font-weight: bold; }

/* Set Hover */
.menu-dropdown a.level3:hover { color: #d50; text-decoration:underline;}

/* Set Current */
.menu-dropdown a.current.level3 { font-weight: bold; }

/* Icons */
.menu-dropdown .level1 .level1 span.icon {
  width: 30px;
  height: 30px;
  margin-left: -5px;
}
.menu-dropdown .level1 .level1 span.icon + span,
.menu-dropdown .level1 .level1 span.icon + span + span { margin-left: 25px; }

.menu-dropdown li.level2 .level2 span.icon { margin-right: 4px; }

.menu-dropdown li.level2 .level2 span.icon + span,
.menu-dropdown li.level2 .level2 span.icon + span + span { margin-left: 39px; }

/* Subtitles */
.menu-dropdown .level1 .level1 span.title { line-height: 18px; }
.menu-dropdown .level1 .level1 span.subtitle { margin-top: -1px; }


/* Sidebar/Accordion Menu
----------------------------------------------------------------------------------------------------*/

/* Link */
.menu-sidebar a,
.menu-sidebar li > span {

    color: #444;
}

/* Hover */
.menu-sidebar a:hover,
.menu-sidebar li > span:hover {
color: #d50;
}

/* Current */
.menu-sidebar a.current {
font-weight: bold;
}

/* Level 1 */
.menu-sidebar li.level1 {
/*border-top: none;*/
}
.menu-sidebar li.level1:first-child {
border-top: 2px solid #F1902D;
}

.menu-sidebar li.parent .level1 > span {
/*background: url(../images/menu_sidebar_parent.png) 100% 0 no-repeat; */
}
.menu-sidebar li.parent.active .level1 > span {
background-position: 100% -100px;
}

/* Level 2-4 */
.menu-sidebar ul.level2 ul {
padding-left: 10px;
}

/* Icons */
.menu-sidebar span.icon {
margin-right: 4px;
}


/* Line Menu
----------------------------------------------------------------------------------------------------*/

.menu-line li {
  margin-left: 7px;
  padding-left: 8px;
  background: url(../images/menu_line_item.png) 0 50% no-repeat;
}

.menu-line li:first-child {
  margin-left: 0;
  padding-left: 0;
  background: none;
}








/*yaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.left_menu ul{
position:relative;
display:block;
}
.left_menu ul > li ul{
visibility:hidden;
transition:all 0.1s;
}
.left_menu ul > li:hover ul{
visibility:visible;
/*transition:2s;*/
padding:0 !important;
}

/*,.left_menu ul > li ul li*/.menu-sidebar ul.level2{
float:left;
margin-left:260px;
/*transition:all 0.5s;*/
margin-top:-34px;
width:200px;

}

/*
.menu-sidebar li.item112 .level12> span
{
background:url("../images/menu_sidebar_parent.png") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
}*/


.left_menu .level2 {
  /*transition:all 0.5s;*/
  border:2px solid #fbdbaf;
  border-radius:10px;
  background:none no-repeat scroll 0 0 white;
  height:41px;
  text-align:center;
  font-size:10px;
  font-weight:normal!important;
  position:relative;
  top:-3px;
  margin-left:-17px;
  left:2px;
  padding:0px!important;
  margin-top:1px;
}
.level1.active.current > span{color:red;}

.menu-sidebar a.level2 > span, .menu-sidebar span.level2 > span{
line-height:20px;
padding:10px 0;}





.menu-sidebar li.level1{
height:45px!important;
/*margin-top:4px;*/
margin-top:8px;

background-color:white;
}
.item114{
/*margin-top:4px!important;*/
margin-top:0px;
}

.level1.item137{
/*background-image:url(../images/url1.jpg);*/
background:url("../images/ico/1kak_tur.png") no-repeat scroll 21px 0 / 17% auto rgba(0, 0, 0, 0);

}

.level1.item136{
/*background-image:url(../images/url1.jpg);*/
/*background:url("../images/ico/2podarki.png") no-repeat scroll 10px 0px / 18% auto rgba(0, 0, 0, 0);*/
background:url("../images/podarok.png") no-repeat scroll 17px -3px / 19% auto rgba(0, 0, 0, 0);

}

.level1.item110{
/*background-image:url(../images/url1.jpg);*/
/*background:url("../images/ico/3Greece.jpg") no-repeat scroll 10px 5px / 19% auto rgba(0, 0, 0, 0);*/
background:url("../images/greece.png") no-repeat scroll 15px 1px / 19% auto rgba(0, 0, 0, 0);

}

.level1.item107{
/*background-image:url(../images/url1.jpg);*/
/*background:url("../images/ico/4akvapark.jpg") no-repeat scroll 10px 9px / 20% auto rgba(0, 0, 0, 0);*/
background:url("../images/akvapark.png") no-repeat scroll 5px -1px / 31% auto rgba(0, 0, 0, 0);

}

.level1.item109{
/*background-image:url(../images/url1.jpg);*/
background:url("../images/ico/5nova.jpg") no-repeat scroll 10px 1px / 20% auto rgba(0, 0, 0, 0);   

}


.level1.item111{
/*background-image:url(../images/url1.jpg);*/
/*background:url("../images/ico/6strah.jpg") no-repeat scroll 9px 4px / 22% auto rgba(0, 0, 0, 0) ;*/
/*background:url("../images/strahovka.png") no-repeat scroll -138px -1px / 96% auto rgba(0, 0, 0, 0); */
background:url("../images/strahovka.png") no-repeat scroll 14px 0px / 21% auto rgba(0, 0, 0, 0);
}
.menu-sidebar li.level1.item108{
height:60px!important;
}

.level1.item108{
/*background-image:url(../images/url1.jpg);*/
/*background:url("../images/ico/7zagranpasport1.jpg") no-repeat scroll 9px 14px / 23% auto rgba(0, 0, 0, 0);*/
background:url("../images/pasport.png") no-repeat scroll 8px 0 / 25% auto rgba(0, 0, 0, 0);

}

.level1.item141{
/*background:url("../images/pasport.png") no-repeat scroll 8px 0 / 25% auto rgba(0, 0, 0, 0);*/
background:url("../images/35.png") no-repeat scroll 7px 8px/25%;
}


/*
.level1.item109{
/*background-image:url(../images/url1.jpg);*//*
background:url("../images/sale_icon.png") no-repeat scroll center/15%;
background-position:15px -6px;
}*/

.menu-sidebar a.level1 > span, .menu-sidebar span.level1 > span
{
padding:10px 0;
position:relative;
left:60px;
width:185px;

}

.menu-sidebar li.level1.item109{
height:50px!important;
}
.menu-sidebar span.subtitle{font-size:13px;
margin-top:-3px;}

.menu-sidebar li{
/*border:2px solid #fbdbaf;*/
border:2px solid #F1902D;
border-radius:10px;
margin-bottom:2px;
}

.nashi_partneri{
font-family:Arial;
font-size:30px;
text-align:center;
font-style:italic;
margin-left:160px;
}

Записан
Ilhom666
Живу я здесь
******

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

Сообщений: 1343



« Ответ #4 : 18.02.2016, 16:58:24 »

в templates/realklass/css/menus.css
Код
.menu-dropdown li.level1:hover{
 margin-right: 5px;    /*   - убрать*/
 padding-bottom: 1px;
 /*background:url("../images/menu/knopki5.png") repeat scroll center/100%;*/
 background:url("../images/shapka_.png") repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
 border:1px solid yellow;
 }
Записан
Cherish
Захожу иногда
**

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

Сообщений: 21


« Ответ #5 : 18.02.2016, 17:05:35 »

Какой же вы молодец, Ilhom666, спасибо огромное! Wink
Записан
Страниц: [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