[Снова CSS] Горизонтальное меню для Joomla! 1.5 + ещё вопросы.

pprtwh

Доброго времени суток.
Пытаюсь реализовать горизонтальное меню для шаблона Joomla! 1.5 примерно такого вида:

При наведении мыши, свитки подсвечиваются.
Проблема в том, что размер свитков у меня фиксированный, т.е. при изменении пунктов меню или размера шрифта, получится "бяка". Хотелось бы, чтобы ширина свитка менялась в зависимости от длины пункта меню.
Вариант создания такого меню я разобрал:

Но тут другая "система", и мне нужны именно свитки.
Всё это я реализую через списки.
Что можно придумать в данном случае?
Спасибо за любую помощь.
С уважением,
Олег Е.

hwh2010

Что можно придумать в данном случае?

ну я бы сделал ту часть, что между рулонами, замощённой нешироким кусочком бересты. А ширину этого куска задавал бы для каждого пункта меню явно, так чтобы она была кратной ширине этого кусочка

PooH

надо "свиток" разбить на края и фон
и соответственно, фоном мостить заголовок, а по краям заголовка ставить концы рулончика
это правильный метод
можно сделать разные картинки для разной ширины (через 10px) и яваскриптом подсовывать нужные, но это глупо, неэффективно и вредно.
т.к. следует минимизировать яваскрипты на странице, на случай посетителей с отключенными скриптами, а также заботиться о более-менее корректном отображении со включенными скриптами и с отключенными

pprtwh

яваскриптом подсовывать нужные, но это глупо, неэффективно и вредно.

+1
Потому и ковыряю CSS.
Только есть проблема с методом, описанным тобой.
Я делаю так (не на примере со свитками, но суть та же):

Фон списка <ul> делаю золотым. Затем стыки кнопок ставлю в элемент списка <li> с "no-repeat". И тут возникает проблема - либо надо убрать первый разделитель (в первом элементе либо добавить разделитель в конце, к последней ссылке. И в этом проблема. Если бы я сам составлял список, то прописал бы класс для первого элемента, но меню генерируется jooml'ой...
Это не тот код, что у меня, но я брал этот за основу (свой выложу завтра):

#topmenu {
position:absolute;
bottom:0;
left:0;
width:980px;
height:30px;
overflow:hid;
background: transparent url(../images/t_menu_bg.png) repeat-x top left; Фон для всего списка
}
#topmenu ul {
padding:0;
margin:0;
list-style: none;
}
#topmenu li {
float: left;
}
#topmenu li a {
float:left;
color: #fff;
text-decoration: none;
font-weight: 700;
height:30px;
line-height:29px;
padding: 0 10px;
margin:0;
cursor:pointer;
background: transparent url(../images/t_menu_divider.png) no-repeat right center; Разделитель
}
#topmenu li a:hover {
color:#7dacf4;
background: transparent url(../images/t_menu_hover.png) no-repeat right center; Фон при наведении мыши
}

Вот тут и надо как-то убрать первый разделитель. Или добавить его после пункта "Фотогалерея"

PooH

не понял
у тебя есть список
сделай так: заголовок1, разделитель, заголовок2, разделитель и т.д.
или нет возможности?
наверняка есть
посмотри в пхп нутро генерилки меню

PooH

сделай ul с бортиком в начале
потом li с разделителем в конце
вот у тебя и получится все норм

pprtwh

Реализовал такое меню:

#menucenter ul {
left : -50%;
position: relative;
margin : 0;
padding : 0;
list-style-type : none;
height : 45px;
line-height : 40px;
font-size : 22px;
font-family : Verdana, Tahoma;
float : left;
}
#menucenter li {
float : left;
height : 45px;
background : transparent url("../images/lbut.jpg") left no-repeat;
padding-left : 12px;
}
#menucenter li a {
display : block;
float : left;
color : #000000;
text-decoration : none;
padding : 0 25px 0 13px;
height : 45px;
background : transparent url("../images/rbut.jpg") right no-repeat;
}
#menucenter li a:hover {
color : #FFFFFF;
background : transparent url("../images/hover.jpg") right no-repeat;
}

,
где lbut.jpg - левый завиток без тела, rbut.jpg - правый завиток с телом свитка, hover.jpg - аналогично предыдущему, только с подсветкой.

pprtwh

Ещё вопрос.
Такая ситуация:

Если контента мало, то футер "висит". Хотелось бы растянуть блок "контейнер для content" (можно и вместе с "content") на всю свободную высоту экрана.
В принципе, нашел кучу инфы по данной проблеме в инете, но это немного не то... К тому же у меня всё это заключено в блок-контейнер общий. И не все найденные мной решения являются кроссбраузерными.
Если кто-то сталкивался с аналогичным и знает решения, буду весьма благодарен за помощь

pprtwh

Нашел полезную ссылку, но что-то запутался ещё больше

Alena_08_11

вот ещё что то :
http://zvirec.com/view_post.php?id=50

pprtwh

вот ещё что то :http://zvirec.com/view_post.php?id=50

Это я пробовал. Не получилось. Попробую ещё раз, внимательней, но смущает вот это:

Если высота блока "content" больше 1 экрана, фоотер остается на месте.

hwh2010

Если кто-то сталкивался с аналогичным и знает решения, буду весьма благодарен за помощь

насколько я помню, решения кривые, некроссбраузерные
веб — это вам не презентации, ещё бы звук на сайт поставили до кучи :mad:

pprtwh

веб — это вам не презентации, ещё бы звук на сайт поставили до кучи

Ну зачем же так резко?

Музыка - это перебор

Оставить комментарий