Вопрос для Джомловедов и Css-водов

A
На сайте с 29.10.2006
Offline
73
479

Сломал себе мозг, а также обыскал поиск. Прошу помощи у знающих людей.

На Джомле 1.015 необходимо сделать вертикальное меню, так чтобы каждая кнопка была заключена в прямоугольник с закругленными углами как на рисунке.

вот так сделать я могу.

a.mainlevel:link, a.mainlevel:visited {

font-size: 14px;

font-weight: normal;

background-image: url('images/menu1.gif');

background-position: left;

background-repeat: no-repeat;

color: #DEDEDC;

text-align: left;

text-transform: uppercase;

font-family: tahoma, Arial, Helvetica, sans-serif;

}

Но ведь пункт меню он разный по ширине. Соответственно надо присоединить начало рисунка прописать фон цветом (ибо неградиент) и присоединить завершение рисунка. А вот как это сделать я не знаю. Видел некоторые решения на Ява, но хотелось бы узнать возможно ли сделать это стандартными методами.

Заранее спасибо.

Собственная пивная не роскошь... (http://pivnaja.ru)
viКing
На сайте с 20.03.2008
Offline
124
#1

Разрезаете картинку на три части - центр и 2 закругленных угла. Центральную часть делаем "резиновую". Прописываем стили. Всё.

A
На сайте с 29.10.2006
Offline
73
#2
viКing:
Разрезаете картинку на три части - центр и 2 закругленных угла. Центральную часть делаем "резиновую". Прописываем стили. Всё.

Вы меня простите великодушно, но знал бы как я не создавал бы эту тему. В данной конструкции (смотрите первое сообщение), как это реализовать?

PS. Как порезать картинку я знаю.

viКing
На сайте с 20.03.2008
Offline
124
#3

а HTML-код у меню какой?

A
На сайте с 29.10.2006
Offline
73
#4
viКing:
а HTML-код у меню какой?

Вообще-то это джомла. Стандартный модуль "главного меню". в css описывается с помощью тега a.mainlevel

ZI
На сайте с 26.06.2006
Offline
153
ZSI
#5

идем сюда - http://www.cssmenumaker.com/ либо http://13styles.com/

выбираем близкий стиль, скачиваем сорсы на комп и меняем стиль под то что хотим получить :)

Ну а далее уже в joomla меняем стили

viКing
На сайте с 20.03.2008
Offline
124
#6

да я понимаю что Джумла, а про html-код спрашивал.

короче посмотрел у себя...

<li>
<a class="mainlevel-nav" title="Главная" href="index.php">Главная</a>
</li>

пункт меню выглядит так.

самый простой, хотя может совсем и не красивый, способ, это вставить таблицу. Если конечно нет особых требований по чистоте кода.

<li>
<table>
<tr>
<td>Здесь прописываете класс для стилей левого уголка </td>
<td class="Стили для середины меню"><a class="mainlevel-nav" title="Главная" href="index.php">Главная</a>
<td>Здесь прописываете класс для стилей правого уголка</td>
</tr>
<table>
</li>

Если не лень, то можно это всё реализовать при помощи div-ов.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий