menu się rozjeżdża :(

Odpowiedz Nowy wątek
2011-08-23 21:10
0

Witam od niedawna eksperymentuje z Joomla, dokładniej z wer. 1.7
Stworzyłem sobie menu w joomla 7 pozycji, pola nie są równe. Do diva podpiąłem styl. Problemem jest to że podczas zwiększania i zmniejszania widoku strony przy pomocy suwaka z Opery(są również minimalne różnice między FF i Opera), menu się rozjeżdża, i nie bardzo widać separator. Jak to naprawić? Oczywiście zerkałem na wątki forum i używałem Google. Na tę chwilę użyłem małego oszustwa z tłem, ale wole wiedzieć jak się to robi poprawnie. Dziękuję.
CSS:

#menuGornePolozenie {
position:absolute;
left:148px;
top:170px;
width:1000px;
height:44px;
}
.menu1 ul, ul li {
display: block;
list-style: none;
margin: 0 ;
padding:0;
font-family: Arial;
font-size: 12px;
 
}
 
.menu1 ul {
float: left;
 
}
 
.menu1 ul li {
background-image: url("/dawid.kaleta/j/templates/mojszablon/images/separator2.png");
float: left;
 
}
 
.menu1 ul a:link, ul a:visited {
text-decoration: none;
display: block;
font-weight: bold;
color: #fff;
height: 20px;
padding: 12px 15px ;
background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");
}
 
.menu1 ul a:hover, ul a:active {
 
background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
 
}

i php :

<DIV ID="menuGornePolozenie" class="menu1">
<jdoc:include type="modules" name="menu"/>
</DIV>
edytowany 1x, ostatnio: madmike, 2011-08-23 21:16
TAGUJ wątki... Możesz wstawiać kod w znaczniki np. <code=css>...</code> - madmike 2011-08-23 21:16

Pozostało 580 znaków

2011-08-24 10:35
0

wprowadziłem drobne poprawki i sztuczkę z ciemnym tłem z-index pod spód, nie rozjeżdża się aż tak i są widoczne separatory. A jak zrobić by po kliknięciu na daną pozycję pozostała ona podświetlona np tloCz.png do czasu najechania i kliknięcia na inną, to musi być skrypt czy html wystarczy?

.menu1 ul, ul li {
    display: block;
    list-style: none outside none;
    margin: 0 ;
    padding:0;
    font-family: Arial;
    font-size: 12px;
    font-weight : bold;
}
 
.menu1 ul li {
 
    float: left;
    white-space: nowrap;
    background-repeat: no-repeat;
    padding: 0px 1px;
    background-image: url("/dawid.kaleta/j/templates/mojszablon/images/separator2.png");
}
 
.menu1 ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    color: #fff;
    height: 20;
    padding: 14.5px 14.5px ;
 
    background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");
}
 
.menu1 ul a:hover {
 
    background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
    height: 20;
    padding: 14.5px 14.5px ;
    }
.menu1  ul a:active  {
 
    background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
    height: 20;
    padding: 14.5px 14.5px ;
 
    }
edytowany 1x, ostatnio: madmike, 2011-08-24 14:44

Pozostało 580 znaków

2011-08-24 13:37
0

A jak zrobić by po kliknięciu na daną pozycję pozostała ona podświetlona np tloCz.png do czasu najechania i kliknięcia na inną, to musi być skrypt czy html wystarczy?
Tylko javascript.

Pozostało 580 znaków

2011-08-24 18:51
0

Tak naprawdę to nie, nie tylko JavaScript ;).

Da się w niektórych przypadkach przehackować CSS-em. Czasem nawet wychodzi to całkiem elegancko.

Spróbuj pseudoklasy :active na hiperłączu. Po kliknięciu, link robi się :active do czasu gdy np. kliknie się gdzie indziej.

BTW: czemu masz dopełnienia po 14.5px? Ile to jest czternaście i pół piksela? Zrobiłeś to, bo wiesz co robisz, czy tak na pałę? Jeśli na pałę, to odradzam. Jeśli nawet wydaje Ci się, że wiesz co robisz, to i tak raczej odradzam. Wygląda to dość dziwnie i obawiam się o implementacje w różnych przeglądarkach. W grę wchodzą bowiem zaokrąglenia. Już wolałbym dać np. 14px u góry i 15 px na dole, jeśli chciałbym mieć sumę dopełnień 29px. Jeśli strona będzie oglądana w zwykłych, standardowych warunkach (monitor komputera lub laptopa, brak zoomu), to przeglądarka i tak będzie musiała wybrać, gdzie chce mieć 1px więcej, a gdzie mniej. Lepiej to już wybrać samemu.

Pozostało 580 znaków

2011-08-24 20:44
0

serdeczne dzięki za wszystkie porady, popoprawiałem. A co do pseudo-klasy active jak to zrobić poprawnie? Coś próbowałem ale nie działa.
menu1 ul a:link, ul a:visited {
text-decoration: none;
display: block;
color: #fff;
height: 20;
padding: 14px 13px ;

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCz.png");

}

.menu1 ul a:hover {

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
height: 20;

}

.menu1 li a:active {

background-image: url("/dawid.kaleta/j/templates/mojszablon/images/tloCze.png");
height: 20;

}

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0