|
|||||||
помогите плиз с CSSОбсуждение темы помогите плиз с CSS в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Друзъя! Я не большой спец в CSS... поимел шаблон для джумлы и хочу немного исправить верхнее меню. Вот как это выглядит на главной: ... |
![]() |
|
|
Опции темы |
|
|
#1 |
|
|
Друзъя!
Я не большой спец в 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;}
Если кто подскажет, где копать хотябы, чтобы на всех страницах было одинаково... какие конструкции? Заранее спасибо! |
|
|
|
|
#2 |
|
|
что именно "сьезжает"? посмотрел... не заметил ничего...
|
|
|
|
|
#3 |
|
|
самое врехнее меню: Главная Сообщество - выпадающие элементы не выравниваются как надо на разных страницах и пропадают бордюры между пунктами меню... приложил картинку для понятности
Последний раз редактировалось M.C.; 27.03.2009 в 03:00.. |
|
|
![]() |
|
|
| Похожие темы | ||||
| Тема | Автор | Раздел | Ответов | Последнее сообщение |
| Помогите! Плиз! | s_kotsaga | Резюме | 9 | 06.05.2011 14:11 |
| Помогите плиз! | bum | Растровая графика | 2 | 26.03.2008 05:44 |
| Ребята, помогите плиз | Давыд | Векторный арт | 2 | 19.06.2007 13:25 |
| помогите с предзагрузчиком, плиз+ | kot | Технологии Flash | 4 | 07.12.2005 13:49 |
|
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|