DjMenu - problem z odpowiednim wyświetlaniem buttona.

[anitaskala]

Witam,
Nie wiedziałam, jak nazwać temat i przypuszczam że jest on dość niejasny, dlatego wytłumaczę wszystko w poniższej wiadomości. Ściągnęłam moduł "DjMenu", aby móc skonfigurować nawigację według swojego mniemania (skorzystałam z gotowego modułu, gdyż aktualny szablon, wyświetla menu w formie linków, więc zmiana według moich wizji nie wchodzi w grę [oczywiście zmiana stylu menu nie pomaga]).

Przejdę może do konkretów, standardowy buton menu aktywnego i podświetlenia wygląda tak:

4465

Natomiast ja chciałabym aby te buttony wyglądały tak:
4466

Oczywiście podmieniłam pliki i są one wyświetlane na stronie, ale ze względu na zaokrąglenie mojego obrazka, button wyświetla się tylko w jednej części, zaokrąglonej z jednej bądź drugiej strony (w zależności od zmian jakich dokonam w pliku .css) Oryginalny plik .css modułu, narzuca jedną stronę i odnośnik top right, bądź right top nie działają. Próbowałam wpisywać top left, top right, right top, left top, ale żadne z poleceń nie działa prawidłowo, gdyż narzuca tylko jedną stronę lub tworzy prostokąt bez zaokrąglenia. Niestety nie mogę podać linku do strony dlatego też korzystam z obrazków, dla konkretniejszego wyjaśnienia:

Menu wygląda tak: 4467 a zależałoby mi aby wyglądało to tak: 4468.


Poniżej podsyłam oryginalną zawartość plików .css odpowiedzialnych za wyświetlanie tego menu, oraz moje edycję plików aby wymusić odpowiednie polecenia (możliwe że wszystko pomyliłam i dlatego to nie działa)

Oryginalne pliki:


djmenu_fx.css




.dj-main {
padding: 0;
margin: 0;
list-style: none;
height: 35px;
background: #fff url(../images/three_0.gif) repeat-x;
position: relative;
z-index: 500;
font-family: arial, verdana, sans-serif;
width: auto;
}


.dj-main li.dj-up {
display: block;
float: left;
}


.dj-main li a.dj-up_a {
display: block;
float: left;
height: 35px;
line-height: 33px;
color: #ccc;
text-decoration: none;
font-size: 11px;
font-weight: bold;
padding: 0 0 0 12px;
cursor: pointer;
background: url(../images/three_0.gif);
}


.dj-main li a.dj-up_a span {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 35px;
background: url(../images/three_0.gif) right top no-repeat;
}


.dj-main li a.dj-up_a span.dj-drop {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 35px;
background: url(../images/three_0a.gif) no-repeat right top;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat right top;
}


.dj-main li.hover a.dj-up_a span.dj-drop, .dj-main li.active a.dj-up_a span.dj-drop {
background: url(../images/three_1a.gif) no-repeat right top;
padding-bottom: 3px;
}


.dj-main li.separator > a {
cursor: default;
}


.dj-main img {
vertical-align: middle;
margin: 0 5px 0 0;
}


/* Default list styling */
.dj-main li.hover {
position: relative;
z-index: 200;
}


.dj-main li.hover ul.dj-submenu {
left: 1px;
top: 35px;
background: #50b5d0;
padding: 3px;
border: 1px solid #0b4d97;
width: 190px;
height: auto;
z-index: 300;
}


.dj-main li.hover ul.dj-submenu li {
display: block;
height: auto;
position: relative;
float: left;
width: 190px;
font-weight: normal;
}


.dj-main li.hover ul.dj-submenu li a {
display: block;
font-size: 11px;
height: auto;
width: 183px;
line-height: 18px;
color: #000;
text-decoration: none;
border: 1px solid #50b5d0;
padding-left: 5px;
}


.dj-main li ul.dj-submenu li a.dj-more {
background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
}


.dj-main li.hover ul.dj-submenu li a:hover, .dj-main li ul.dj-submenu li a.active, .dj-main li ul.dj-submenu li li a.active, .dj-main li ul.dj-submenu li li li a.active {
background: #3f96a9;
color: #fff;
border-color: #fff;
}


.dj-main li.hover ul.dj-submenu li a.dj-more:hover {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
}


.dj-main li.hover ul.dj-submenu li a.dj-more-active {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
}


.dj-main li.hover ul.dj-submenu li a.dj-more-active:hover {
border-color: #fff;
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
}


.dj-main li.hover li.hover ul, .dj-main li.hover li.hover li.hover ul, .dj-main li.hover li.hover li.hover li.hover ul, .dj-main li.hover li.hover li.hover li.hover li.hover ul {
left: 190px;
top: -4px;
background: #50b5d0;
padding: 3px;
border: 1px solid #0b4d97;
white-space: nowrap;
width: 190px;
z-index: 400;
height: auto;
}


.dj-main ul, .dj-main li.hover ul ul, .dj-main li.hover li.hover ul ul, .dj-main li.hover li.hover li.hover ul ul, .dj-main li.hover li.hover li.hover li.hover ul ul {
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}


.dj-main li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover li.hover a.dj-more, .dj-main li.hover li.hover li.hover li.hover li.hover a.dj-more {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
border-color: #fff;
}


.dj-main li.hover li.hover li a.dj-more, .dj-main li.hover li.hover li.hover li a.dj-more, .dj-main li.hover li.hover li.hover li.hover li a.dj-more {
background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
color: #000;
border-color: #50b5d0;
}







djmenu.css




.dj-main {
padding: 0;
margin: 0;
list-style: none;
height: 35px;
background: #fff url(../images/three_0.gif) repeat-x;
position: relative;
z-index: 500;
font-family: arial, verdana, sans-serif;
width: auto;
}


.dj-main li.dj-up {
display: block;
float: left;
}


.dj-main li a.dj-up_a {
display: block;
float: left;
height: 35px;
line-height: 33px;
color: #ccc;
text-decoration: none;
font-size: 11px;
font-weight: bold;
padding: 0 0 0 12px;
cursor: pointer;
background: url(../images/three_0.gif);
}


.dj-main li a.dj-up_a span {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 35px;
background: url(../images/three_0.gif) right top no-repeat;
}


.dj-main li a.dj-up_a span.dj-drop {
float: left;
display: block;
padding: 0 24px 0 12px;
height: 35px;
background: url(../images/three_0a.gif) no-repeat right top;
}


.dj-main li:hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li:hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat right top;
}


.dj-main li:hover a.dj-up_a span.dj-drop, .dj-main li.active a.dj-up_a span.dj-drop {
background: url(../images/three_1a.gif) no-repeat right top;
padding-bottom: 3px;
}


.dj-main li.separator > a {
cursor: default;
}


.dj-main img {
vertical-align: middle;
margin: 0 5px 0 0;
}


/* Default list styling */
.dj-main li:hover {
position: relative;
z-index: 200;
}


.dj-main li:hover ul.dj-submenu {
left: 1px;
top: 35px;
background: #50b5d0;
padding: 3px;
border: 1px solid #0b4d97;
width: 190px;
height: auto;
z-index: 300;
}


.dj-main li:hover ul.dj-submenu li {
display: block;
height: auto;
position: relative;
float: left;
width: 190px;
font-weight: normal;
}


.dj-main li:hover ul.dj-submenu li a {
display: block;
font-size: 11px;
height: auto;
width: 183px;
line-height: 18px;
color: #000;
text-decoration: none;
border: 1px solid #50b5d0;
padding-left: 5px;
}


.dj-main li ul.dj-submenu li a.dj-more {
background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
}


.dj-main li:hover ul.dj-submenu li a:hover, .dj-main li ul.dj-submenu li a.active, .dj-main li ul.dj-submenu li li a.active, .dj-main li ul.dj-submenu li li li a.active {
background: #3f96a9;
color: #fff;
border-color: #fff;
}


.dj-main li:hover ul.dj-submenu li a.dj-more:hover {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
}


.dj-main li:hover ul.dj-submenu li a.dj-more-active {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
}


.dj-main li:hover ul.dj-submenu li a.dj-more-active:hover {
border-color: #fff;
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
}


.dj-main li:hover li:hover ul, .dj-main li:hover li:hover li:hover ul, .dj-main li:hover li:hover li:hover li:hover ul, .dj-main li:hover li:hover li:hover li:hover li:hover ul {
left: 190px;
top: -4px;
background: #50b5d0;
padding: 3px;
border: 1px solid #0b4d97;
white-space: nowrap;
width: 190px;
z-index: 400;
height: auto;
}


.dj-main ul, .dj-main li:hover ul ul, .dj-main li:hover li:hover ul ul, .dj-main li:hover li:hover li:hover ul ul, .dj-main li:hover li:hover li:hover li:hover ul ul {
position: absolute;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
margin: 0;
padding: 0;
list-style: none;
}


.dj-main li:hover li:hover a.dj-more, .dj-main li:hover li:hover li:hover a.dj-more, .dj-main li:hover li:hover li:hover li:hover a.dj-more, .dj-main li:hover li:hover li:hover li:hover li:hover a.dj-more {
background: #3f96a9 url(../images/arrow_over.gif) 180px 6px no-repeat;
color: #fff;
border-color: #fff;
}


.dj-main li:hover li:hover li a.dj-more, .dj-main li:hover li:hover li:hover li a.dj-more, .dj-main li:hover li:hover li:hover li:hover li a.dj-more {
background: #50b5d0 url(../images/arrow.gif) 180px 6px no-repeat;
color: #000;
border-color: #50b5d0;
}




Będę posługiwać się teraz kodem tylko z jednego pliku .css oraz z konkretnej części gdyż wypisywanie całego nie ma najmniejszego sensu. Tak wyglądały próby wymuszenia menu według mojego mniemania:



.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat left top;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat right top;
}



.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat right top;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat left top;
}



.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat top right ;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat top left ;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat top left;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat top right;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat top right;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat ;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat right top;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat ;
}

.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat left top;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat ;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat top left;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat ;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat left top;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat top left;
}



.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat right top;
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
color: #fff;
background: url(../images/three_1.gif) no-repeat;
}


.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span {
background: url(../images/three_1.gif) no-repeat top right;
}

Domyślam się że większość z prób nie ma prawa działać (gdyż jest to po prostu nie prawidłowe, ale przed napisaniem tematu na forum, wolałam sprawdzić wszystko [nawet te absurdalne sposoby] niż mieć odpowiedź na wyciągnięcie ręki). Sądzę również że jest to dość łatwe do wykonania, ale niestety ja nie potrafię znaleźć na nie odpowiedzi.

[a_m]

masz link do strony?

[anitaskala]

Tak jak napisałam w powyższej wiadomości:

Niestety nie mogę podać linku do strony dlatego też korzystam z obrazków

[a_m]

np. na tej stronie (http://www.rockettheme.com/) na tej stronie są zaokrąglenia aktywnych odnośników stworzone z dwóch obrazków - jedno tło dla li drugie dla a; zobacz sobie firebugiem jak to jest zrobione, zwróć uwagę na ujemny lewy margines elementu a, co sprawia, że jego tło nie jest nałożone na tło elementu li

[anitaskala]

Przed napisaniem na forum, sprawdzałam różne strony oparte na Jooml'i aby móc zobaczyć jak funkcjonują owe menu, tylko tak jak napisałem w pierwszej wiadomości, coś musiałam rozwalić i kod odpowiedzialny za nawigację cały się rozsypał i w moim przypadku .css odpowiedzialny za menu odnosi mnie do body a nie do odpowiedniej divy jak w przypadku podanej przez Ciebie strony. Zbyt dużo mam już zrobione aby reinstalować szablon w związku z czym postanowiłam znaleźć jakiś moduł odpowiedzialny za nawigację by móc to jakoś obejść. Przejrzałam tysiące modułów i tylko DjMenu miał możliwość odpowiedniej konfiguracji (która niestety mnie przerosła), żadne moduły nie oferuje zaokrąglonego menu tylko korzystają z standardowego box'a. Dlatego zależałoby mi aby odpowiednio skonfigurować to co podałam wyżej, wiem również że podanie linku strony ułatwiło by pomoc z Waszej strony (ale niestety, nie mam takiej możliwość aby podać link [nie pytajcie czemu]). Pomimo wszystko i tak dziękuję za zainteresowanie i propozycję innego rozwiązania. Jeżeli znajdzie się osoba która pokieruję mnie moim sposobem będę wdzięczna.

[a_m]

zainstalowałem sobie to menu i całą modyfikacja dla aktywnego odnośnika sprowadza się do tego:


.dj-main > li{
margin-left:20px
}

.dj-main li.hover a.dj-up_a span, .dj-main li.active a.dj-up_a span, .dj-main li.hover a.dj-up_a span.dj-drop, .dj-main li.active a.dj-up_a span.dj-drop
{
color:#0c3a6d;
background: url("../images/three_1.png") no-repeat scroll right top transparent;
margin-right:-20px
}


.dj-main li.hover a.dj-up_a, .dj-main li.active a.dj-up_a {
background: url("../images/three_1.png") no-repeat scroll 0 0 transparent;
color: #FFFFFF;
}

na początek możesz sobie dopisać na końcu pliku djmenu_fx.css - wten sposób nadpiszesz wcześniejsze reguły;

ps. - menu opublikowane w szablonie rhuk_milkyway w pozycji breadcrumb; być może w innych szablonach lub w innej pozycji trzeba by coś jeszcze dopisać, no ale sama rozumiesz - bez linka itd ...


4469