-
Друзъя!
Я не большой спец в CSS... поимел шаблон для джумлы и хочу немного исправить верхнее меню.
Вот как это выглядит на главной: hxxp://limerick.su/ (вроде все красиво)
Но если пойти по страницам (например вот тут: hххp://limerick.su/index.php?option=com_community&view=frontpage&Item id=53) то стили съежжают...
Еще больше они съежают вот тут (hххp://limerick.su/index.php?option=com_content&view=article&id=43&It emid=43)
Вот как выглядит css для этого меню
Код:
#tp-cssmenu {
****margin: 0; /* all lists */
****padding: 0;
****float: left;
****background:url(../images/style1/bgactivemenu_b.png) no-repeat top right;
}
#tp-cssmenu ul {
****margin: 0; /* all lists */
****padding: 0;
}
#tp-cssmenu li {
****margin: 0; /* all list items */
****padding: 0 0 0 0;
****float: left;
****display: block;
****background: none;
****cursor: pointer;
****position: relative;
****z-index:100000;
****/*background:url(../images/style1/bgactivemenu_c.png) no-repeat top left;*/
}
#tp-cssmenu li ul {
****width: 14em;
****position: absolute; /* second-level lists */
****z-index: 9999999;
****height: auto;
****/* width: 15.9em; */
****margin-top:0;
****margin-left:-2px;
****padding:0 0 0 0;
****
****border-right:1px solid #30316a;
****border-bottom:1px solid #30316a;
****border-left:1px solid #30316a;
}
#tp-cssmenu ul ul {
****margin: -2.3em 0 0 14em; /* third-and-above-level lists */
****padding-bottom:0;
****background-image:none;
****padding:0 0 0 0;
}
#tp-cssmenu li li {
****padding: 0 0 0 0;
****margin: 0;
****width: 14em;
}
#tp-cssmenu ul a {
}
#tp-cssmenu li ul {
****left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#tp-cssmenu li:hover ul ul, #tp-cssmenu li:hover ul ul ul, #tp-cssmenu li:hover ul ul ul ul,
#tp-cssmenu li.sfhover ul ul, #tp-cssmenu li.havechildsfhover ul ul, #tp-cssmenu li.havechild-activesfhover ul ul, #tp-cssmenu li.activesfhover ul ul,
#tp-cssmenu li.sfhover ul ul ul, #tp-cssmenu li.havechildsfhover ul ul ul, #tp-cssmenu li.havechild-activesfhover ul ul ul, #tp-cssmenu li.activesfhover ul ul ul,
#tp-cssmenu li.sfhover ul ul ul ul, #tp-cssmenu li.havechildsfhover ul ul ul ul, #tp-cssmenu li.havechild-activesfhover ul ul ul ul, #tp-cssmenu li.activesfhover ul ul ul ul
{
****left: -999em;
}
/* This "unhides" the sub-menus (left: -999em is what hides them) */
#tp-cssmenu li:hover ul, #tp-cssmenu li li:hover ul, #tp-cssmenu li li li:hover ul,**#tp-cssmenu li li li li:hover ul,
#tp-cssmenu li.sfhover ul, #tp-cssmenu li.havechildsfhover ul, #tp-cssmenu li.havechild-activesfhover ul, #tp-cssmenu li.activesfhover ul,
#tp-cssmenu li li.sfhover ul, #tp-cssmenu li li.havesubchildsfhover ul, #tp-cssmenu li li.havesubchild-activesfhover ul, #tp-cssmenu li li.activesfhover ul,
#tp-cssmenu li li li.sfhover ul, #tp-cssmenu li li li.havesubchildsfhover ul, #tp-cssmenu li li li.havesubchild-activesfhover ul, #tp-cssmenu li li li.activesfhover ul,
#tp-cssmenu li li li li.sfhover ul, #tp-cssmenu li li li li.havesubchildsfhover ul, #tp-cssmenu li li li li.havesubchild-activesfhover ul, #tp-cssmenu li li li li.activesfhover ul {
****left: auto;
}
/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#tp-cssmenu li a {
****margin: 0;
****padding: 0 10px 0 10px;
****display: block;
****font-weight:700;
****text-decoration: none;
****text-align:left;
****font-family:arial;
****font-size:14px;
****height:68px;
****line-height:30px;
****text-transform:uppercase;
****letter-spacing:-1px;
****color:#FFFFFF;
}
#tp-cssmenu li.active a {
****background:url(../images/style1/bgactivemenu_a.png) no-repeat top right;
****line-height:30px;
****height:68px;
****display: block;
****color:#fd2904;
****}
#tp-cssmenu li li a {
****letter-spacing:0;
****line-height:24px;}
#tp-cssmenu li ul li a {
****height: auto;
****line-height: 24px;
****padding-left:15px;
****font-size:11px;
****font-weight:400;
****}
#tp-cssmenu li ul li li a {
****line-height: 24px;
****padding-left:15px;
****font-weight:400;
****}
#tp-cssmenu li li a {
****border-right:none;
****color:#fd2904;
****font-weight:700;
}
#tp-cssmenu li a:hover,
#tp-cssmenu li a:active,
#tp-cssmenu li a:focus,
#tp-cssmenu li li a:hover {
****background:url(../images/style1/bgactivemenu_a.png) no-repeat top right;
****color: #fd2904;
}
#tp-cssmenu li.active a,
#tp-cssmenu li.active a:hover,
#tp-cssmenu li a.active:active,
#tp-cssmenu li a.active:focus {
****color: #fd2904;}
#tp-cssmenu li li a:hover,
#tp-cssmenu li li a:active,
#tp-cssmenu li li a:focus,
#tp-cssmenu li li li a:hover,
#tp-cssmenu li li a.active,
#tp-cssmenu li li a.active:hover,
#tp-cssmenu li li a.active:active,
#tp-cssmenu li li a.active:focus {
****color: #fff;
}
#tp-cssmenu li.fulltpmenuimages img,
#tp-cssmenu li.fulltpmenuimagessfhover img,
#tp-cssmenu li a.fulltpmenuimages,
#tp-cssmenu li.fulltpmenuimages a,
#tp-cssmenu li.fulltpmenuimagessfhover a,
#tp-cssmenu li.tpmenutextandimage**a,
#tp-cssmenu li.tpmenutextandimagesfhover**a
{
****padding:0 10px 0 10px;
****margin:0;
****line-height:24px;
****border-right:none;
****
****}
#tp-cssmenu li.tpmenutextandimage li**a {
****padding-left:10px;
****padding-right:0;
****color:#fff;}
#tp-cssmenu li.tpmenutextandimagesfhover**li a:hover {
****padding-left:10px;
****padding-right:0;
****color:#fff;
****}
#tp-cssmenu li.tpmenutextandimage li,
#tp-cssmenu li.tpmenutextandimagesfhover li {
padding:0;
****}
#tp-cssmenu li.tpmenutextandimage img,
#tp-cssmenu li.tpmenutextandimagesfhover img {
****vertical-align:middle;
}
#tp-cssmenu li.fulltpmenuimages ul li a,
#tp-cssmenu li.fulltpmenuimagessfhover ul li a {
****padding-left:10px;}
#tp-cssmenu li.fulltpmenuimages a {
****padding:0;
****margin:0;}
.tpmenutextandimage img,
.tpmenutextandimagesfhover img{
****display: block;
****padding-top:10px;}
.fulltpmenuimageschild {}
.tpmenutextandimagechild {}
#tp-cssmenu li a.fulltpmenuimages {
****padding:0;
****margin:0;}
#tp-cssmenu li ul li.active {}
#tp-cssmenu li.parent a{}
#tp-cssmenu li.parent a:active {
****color: #fff;
****}
#tp-cssmenu li ul li.parent a.haschild ,
#tp-cssmenu li ul li.parentsfhover a.haschild,
#tp-cssmenu li ul li.parent li.parent a.haschild ,
#tp-cssmenu li ul li.parentsfhover li.parentsfhover li a.haschild,
#tp-cssmenu li ul li.parent li.parent li.parent a.haschild ,
#tp-cssmenu li ul li.parentsfhover li.parentsfhover li.parentsfhover li a.haschild{
****background: url(../images/tpmenuright.gif) right top no-repeat;
******** color: #fff;
****}
#tp-cssmenu li.parentsfhover li,
#tp-cssmenu li.active**li.parentsfhover,
#tp-cssmenu li.parent li ,
#tp-cssmenu li.active li ,
#tp-cssmenu li.active li li {
****background:#0e1039;
****/*border-top:1px solid #DDDBDB;*/
******** color: #fff;
****height:24px;
****line-height:24px;
****}
#tp-cssmenu li ul li.parentsfhover,
#tp-cssmenu li.active ul li.parentsfhover ,
#tp-cssmenu li.parent li.parent:hover**{
****background:url(../images/bgmenuhover.gif);
****
}
#tp-cssmenu li.active {
****background:url(../images/style1/bgactivemenu.png) no-repeat top left;
****padding-left:2px;
****}****
#tp-cssmenu li li.active {
****padding-left:0;}
#tp-cssmenu li.activesfhover:hover {
****background:#13144d;
****color:#fff;}
#tp-cssmenu li.activesfhover:hover span,
#tp-cssmenu li.activesfhover:hover a {
****color:#fff;}
#tp-cssmenu li li.activesfhover a {
****background:none;}
#tp-cssmenu li.active li a {
****line-height: 24px;
****background:none;}
#tp-cssmenu li:hover,
#tp-cssmenu li.sfhover,
#tp-cssmenu li.havechildsfhover,
#tp-cssmenu li.havechild-activesfhover {
****color: #877D7D;
}
#tp-cssmenu li:hover a {
}
/* 2nd level and above */
#tp-cssmenu li ul a {
****margin: 0;
****text-transform: none;
}
#tp-cssmenu li.havesubchild,
#tp-cssmenu li.havesubchild-active {
}
#tp-cssmenu li ul a:hover,
#tp-cssmenu li ul a:active,
#tp-cssmenu li ul a:focus,
#tp-cssmenu li.parent li ul a:hover,
#tp-cssmenu li.parent li ul a:active,
#tp-cssmenu li.parent li ul a:focus {
****color: #fff;
****background: /*url(../images/bgmenuhover.gif)*/ #13144d repeat-x;
}
/*#tp-cssmenu ul li.active,
#tp-cssmenu ul li li.active,
#tp-cssmenu ul li li li.active,
#tp-cssmenu ul li li li li.active {
****color: #fff;
****background: /*url(../images/bgmenuhover.gif)*/ #13144d repeat-x;
}
#tp-cssmenu ul li a.active ,
#tp-cssmenu ul li li a.active ,
#tp-cssmenu ul li li li a.active ,
#tp-cssmenu ul li li li li a.active
{
****color:#ccc;}*/
#tp-cssmenu li.active ul li a:hover
{****color:#fff;
}
.tpsubtitle {
****display:block;
****font-size:9px;
****margin:0;
****padding:0;
****font-weight:400;
****height:11px;
****line-height:9px;
****margin-top:-5px;
****color:#fff;
****text-transform:uppercase;
****font-family:Verdana, Arial, Helvetica, sans-serif;
****letter-spacing:-1px;
}
#tp-cssmenu li.active li a {
****height:24px;
****line-height:24px;
****}
#tp-cssmenu li.active span.tpsubtitle {
****color:#fff;}
я уже и так и этак, со словами и без слов (с) но пока только дрова....
Если кто подскажет, где копать хотябы, чтобы на всех страницах было одинаково... какие конструкции?
Заранее спасибо!
-
Цитата:
где копать хотябы
Копайте везде, рано или поздно искомое обнаружится. Отключайте поочередно те или иные стилевые инструкции, смотрите на результат. Когда проблема более-менее локализуется, приводите здесь примеры кода. Только не километровые.
