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

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

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

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

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

Сообщений: 96


« : 19.11.2015, 18:21:45 »

Попал мне в руки сайт. На сайте некий изверг вписал меню вот так
Код:
<div class="top_position">

<?php switch ($_SERVER['REQUEST_URI']) {

case '/gruzoperevozki.html' : $back1='active1';

break;

                                case '/gruzchiki.html' : $back3='active3';

break;

case '/vyvoz-musora.html' : $back2='active2';

break;


case '/zemlyanye-podsobnye-raboty.html' : $back4='active4';

break;

case '/arenda-spetstekhniki.html' : $back5='active5';

break;

                                case '/blagoustrojstvo.html' : $back6='active6';

break;

}?>

<a class="top1 <?php echo $back1;?>" href="/gruzoperevozki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu1.png"></a>

            <a class="top2 <?php echo $back3;?>" href="/gruzchiki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu2.png"></a>

<a class="top3 <?php echo $back2;?>" href="/vyvoz-musora.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu3.png"></a>

<a class="top4 <?php echo $back4;?>" href="/zemlyanye-podsobnye-raboty.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu4.png"></a>

<a class="top5 <?php echo $back5;?>" href="/arenda-spetstekhniki.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu5.png"></a>

            <a class="top6 <?php echo $back6;?>" href="/blagoustrojstvo.html"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/menu6.png"></a>

<div class="clear"></div>

</div>



<div class="center_table">



и соответственно к этому всему есть стили

Код:
.top_position {

width: 99%;

height: 100%;

text-align: center;

margin-bottom: 20px;

}

.top_position a {

   display:inline-block;

   text-align:right;

   width:18%;

   margin-left: -2%;

   padding-bottom: 5px;

   text-decoration:none;

}

.top_position a img {

}

.top_position a:hover {

}

.top_position a.active1 {



}

.top_position a.active2 {



}

.top_position a.active3 {



}

.top_position a.active4 {



}

.top_position a.active5 {



}

.top_position a.active6 {



}

.top_position a img:hover {

opacity: 0.8;

}

И вроде бы даже оно все ровно и красиво стоит. Но нужно как то выделить активный пункт меню. Причем хотелось бы его просто приподнять немного на пару пикселей вверх.

Соответственно я пишу
 
Код:
.top_position a.active1 {

margin-top:2px;

}
но абсолютно ничего не происходит.
в чем ошибка?
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #1 : 19.11.2015, 18:35:20 »

Допишите display: block;
Записан
intedant
Осваиваюсь на форуме
***

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

Сообщений: 96


« Ответ #2 : 19.11.2015, 18:42:52 »

Допишите display: block;
не то у меня просто кнопки разлетелись по всему экрану
Записан
Ilhom666
Живу я здесь
******

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

Сообщений: 1340



« Ответ #3 : 19.11.2015, 19:38:32 »

ссылку на сайт дайте
Записан
intedant
Осваиваюсь на форуме
***

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

Сообщений: 96


« Ответ #4 : 20.11.2015, 12:12:47 »

ссылку на сайт дайте
http://gruzovip.by/ нужно приподнять пункт меню который сейчас активен приподнять на 2-3 px
Записан
umbabaraumba
Практически профи
*******

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

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

если помог можете поставить +


« Ответ #5 : 20.11.2015, 14:40:28 »

http://gruzovip.by/ нужно приподнять пункт меню который сейчас активен приподнять на 2-3 px
.top_position a.active1 {
    position: relative;
    top: -2px;
}
Но придется для каждой ссылки отдельно прописывать, или через запятую сразу для всех .
Записан
intedant
Осваиваюсь на форуме
***

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

Сообщений: 96


« Ответ #6 : 20.11.2015, 14:49:06 »

.top_position a.active1 {
    position: relative;
    top: -2px;
}

ну 2х пикселей оказалосьмало но помогло, спасибо + в карму)
Но придется для каждой ссылки отдельно прописывать, или через запятую сразу для всех .
Записан
Shustry
Moderator
*****

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

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


Рисую дизайны


« Ответ #7 : 20.11.2015, 14:54:36 »

Вот так одним правилом для всех будет:

Код
.top_position a.[class^="active"] {
   position: relative;
   top: -2px;
}
Записан
Страниц: [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