Новости Joomla

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

zeus07

  • Давно я тут
  • 723
  • 9 / 0
Здравствуйте!

У меня такая проблема. Использую Joomla 2.5.6, шаблон верстал свой, меню на сайте состоит из картинок, делал при помощи CSS. Но меню так сделано, что картинка каждого следующего пункта меню должна ложиться частично под картинку предыдущего пункта меню. Прописываю для каждого пункта меню z-index, но картинки почему-то ложатся наоборот.

Сайт http://molbert.um.la/

Ниже привожу код CSS шаблона сайта:

Код
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
header, nav, section, article, aside, footer {
display: block;
}
body {
font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
width: 100%;
height: 100%;
}
a {
color: blue;
outline: none;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
p {
margin: 0 0 18px
}
img {
border: none;
}
input {
vertical-align: middle;
}
#wrapper {
width: 1250px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

div.moduletable-main {
    height: 54px;

padding-left: 70px;
margin-top: -19px;
        padding-left: -30px;
position: relative;
}

/* Header
-----------------------------------------------------------------------------*/
#header {
height: 350px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
}
#logo {
    height: 337px;
background-image: url(../images/logo.png);
background-repeat: no-repeat;
margin-left: 100px;
z-index: 1;
}
#menu {
    height: 54px;

padding-left: 20px;
margin-top: -19px;
position: relative;
}
#panel {
       height: 48px;
       background-image: url(../images/panel.png);
       background-repeat: no-repeat; 
       
       margin-top: -67px;
}
ul.menu-gormenu {
    position:relative;
   
}
ul.menu-gormenu li {
                display: inline-block;
height: 54px;
margin-top: -30px;
                margin-left: -30px;
float: left;
}

ul.menu-gormenu li.item468 a{
           background-image: url(../images/menu_5.png);
   background-repeat: no-repeat;
   z-index: 6;
}

ul.menu-gormenu li.item469 a{
           background-image: url(../images/menu_4.png);
   background-repeat: no-repeat;
   z-index: 7;
}

ul.menu-gormenu li.item470 a{
           background-image: url(../images/menu_3.png);
   background-repeat: no-repeat;
   z-index: 8;
}


ul.menu-gormenu li.item471 a{
           background-image: url(../images/menu_2.png);
   background-repeat: no-repeat;
   z-index: 9;
}

ul.menu-gormenu li.item472 a{
           background-image: url(../images/menu_1.png);
   background-repeat: no-repeat;
   z-index: 10;
}
/* Middle
-----------------------------------------------------------------------------*/
#content {
    width: 1250px;
height: 634px;
    background-image: url(../images/fon.jpg);
background-repeat: no-repeat;
background-position: fixed;   
padding: 0 0 100px;

}




/* Footer
-----------------------------------------------------------------------------*/
#footer {
width: 1069px;
margin: -100px auto 0;
height: 48px;
background-image: url(../images/footer.png);
    background-repeat: no-repeat;
position: relative;
text-align: center;
}

Помогите пожалуйста понять, почему именно так меню отображается, а не так как нужно. Заранее благодарен
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
Код
ul.menu-gormenu li {
...
                margin-left: -30px;
...
}

ul.menu-gormenu li.item468 a{
...
  z-index: 6;
}

сдвигаете li,
а z-index прописываете для а
*

zeus07

  • Давно я тут
  • 723
  • 9 / 0
Ну если видите, то у меня также и прописано
*

umbabaraumba

  • Живу я здесь
  • 2415
  • 153 / 1
  • если помог можете поставить +
z-index: 10;
position: relative;

z-index

Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно
*

zeus07

  • Давно я тут
  • 723
  • 9 / 0
Прописал для каждого пункта меню position: relative; и всё равно не отображается так как нужно
*

umbabaraumba

  • Живу я здесь
  • 2415
  • 153 / 1
  • если помог можете поставить +
.item471 img {
    position: relative;
    z-index: 9;
}

style.css (строка 93)

.item472 img {
    position: relative;
    z-index: 10;
}


style.css (строка 90)
Errare humanum est
Ubuntu по-русски
Пишу не сложные модули и компоненты, не дорого но не срочно
*

dynamit

  • Завсегдатай
  • 1744
  • 265 / 0
  • Winter Is Coming
все должно работать. пишите для li
li.item-472 {
    z-index:7;
}
li.item-471 {
    z-index:6;
}
и т.д. по убыванию
Спойлер
[свернуть]
« Последнее редактирование: 03.07.2012, 16:40:07 от dynamit »
ТАМ ГДЕ ТЫ НИЧЕГО НЕ МОЖЕШЬ, ТЫ НЕ ДОЛЖЕН НИЧЕГО ХОТЕТЬ
==========================================================
Сайты на Joomla!. Верстка. Консультации.  ||  Яндекс уже не ищет, он уже продает (с)  ||    Создание шаблона для Joomla 2.5
*

zeus07

  • Давно я тут
  • 723
  • 9 / 0
все должно работать. пишите для li
li.item-472 {
    z-index:7;
}
li.item-471 {
    z-index:6;
}
и т.д. по убыванию
Спойлер
[свернуть]

Спасибо за помощь, именно таким способом всё получилось
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
о чем и говорил :)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

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

Автор vasilii.pupkov

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

Автор DrShepard

Ответов: 10
Просмотров: 2122
Последний ответ 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