[Joomla] помогите плиз с CSS

Тема в разделе "Скины", создана пользователем MCTarakan, 27 мар 2009.

Статус темы:
Закрыта.
  1. MCTarakan

    MCTarakan Постоялец

    Регистр.:
    11 фев 2009
    Сообщения:
    93
    Симпатии:
    4
    Друзъя!
    Я не большой спец в CSS... поимел шаблон "community3" и хочу немного исправить верхнее меню.

    Вот как это выглядит на главной: hxxp://limerick.su/ (вроде все красиво)
    Но если пойти по страницам (например вот тут: hххp://limerick.su/index.php?option=com_community&view=frontpage&Itemid=53) то стили съежжают...
    Еще больше они съежают вот тут (hххp://limerick.su/index.php?option=com_content&view=article&id=43&Itemid=43)

    [​IMG]

    Вот как выглядит 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;}
    
    я уже и так и этак, со словами и без слов (с) но пока только дрова....
    Если кто подскажет, где копать хотябы, чтобы на всех страницах было одинаково... какие конструкции копать?

    Заранее спасибо!
     
  2. sairusflo

    sairusflo Постоялец

    Регистр.:
    19 мар 2009
    Сообщения:
    53
    Симпатии:
    17
    Привет. Сорри что перенаправляю и просьба не считать за рекламу, но лучше данный вопрос задать на портале http://joomlaforum.ru там быстрее ответят. Правда на данный момент он в дауне, но скоро "должон" подняться.
     
  3. shell

    shell Прохожие

    Надо учесть что "бордюр" нарисован на кнопке, а не задается в правилах css.

    И нарисован он на активной кнопке. Когда ты находишься на странице "Сообщество" он есть, а на других страницах его и не должно быть.
    Все логично и правильно. Это не баг.
     
Статус темы:
Закрыта.