PDA

Zobacz pełną wersję : menu css



Delleg
26-02-2011, 18:44
Zrobiłem sobie menu w CSS-ie na podstawie tego co wygrzebałem w internecie. Aktualnie menu zachowuje się w następujący sposób


zrobiłem zaokrąglone rogi
aktywna zakładka ma odmienny kolor tła i czcionki

Jak zmienić poniższy kod tak aby po najechaniu myszką na zakładkę przybrała stan identyczny jak aktywna zakładka




#top{
background-color: #eaeaea;
width: 920px;
height: 42px;


}

#top ul {
list-style: none;
margin: 0px;
padding: 5px 0px 0px 20px;
}

#top li {
padding: 0px;
float: left;
background:url(/test/templates/blue_v2/images/rsbar.gif) no-repeat right top;
margin-right: 15px;
background-color: #464646;

}
#top a {
display: block;
background: url(/test/templates/blue_v2/images/lsbar.gif) no-repeat left top;
padding:7px 38%;

}
#top a:link, #top a:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font: 18px "galette", Geneva, Verdana, Arial, Helvetica, sans-serif;
}

#top a:hover {
color: #00a650;
}

#top li.active {
background:url(/test/templates/blue_v2/images/curentrsbar.gif) no-repeat right top;
background-color: #fff;
color: #464646;
}

#top li.active a {
background: url(/test/templates/blue_v2/images/curentlsbar.gif) no-repeat left top;
}
#top li.active a:link,
#top li.active a:visited {
color: #00a650;
}

Robster
26-02-2011, 19:42
http://www.signs.pl/html/s/hover.php

Słabo szukasz, oj słabo. Btw. to forum J!

Delleg
26-02-2011, 20:26
http://www.signs.pl/html/s/hover.php

Słabo szukasz, oj słabo. Btw. to forum J!

Wiem co to a:hover ale jak widać nie do końca skoro pytam. Wiem że to forum Joomli, widać słabo przeanalizowałeś podany kod oj słabo #top to div z szablonu Joomli.
Ale dokładniej efekt zaokrąglonego górnego lewego prawego rogu uzyskałem dzięki



#top li {
padding: 0px;
float: left;
background:url(/test/templates/blue_v2/images/rsbar.gif) no-repeat right top;
margin-right: 15px;
background-color: #464646;

}
#top a {
display: block;
background: url(/test/templates/blue_v2/images/lsbar.gif) no-repeat left top;
padding:7px 38%;
Za "wciśniętą" zakładkę odpowiada ta część kodu


#top li.active {
background:url(/test/templates/blue_v2/images/curentrsbar.gif) no-repeat right top;
background-color: #fff;
color: #464646;
}

#top li.active a {
background: url(/test/templates/blue_v2/images/curentlsbar.gif) no-repeat left top;
}
#top li.active a:link,
#top li.active a:visited {
color: #00a650;

Chce uzyskać li.active=a:hover, ale dodanie



#top a:hover {
color: #00a650;
background: url(//test/templates/blue_v2/images/curentlsbar.gif) no-repeat left top;
}
rozwiązuje problem prawego rogu, ale nie wystarczy bo nie wiem jak dodać drugi czyli prawy róg (/test/templates/blue_v2/images/curentrsbar.gif
).

Robster
27-02-2011, 01:07
Kolego #top to ja i swojego psa mogę nazwać. Co ma ta nazwa do przynależności do J!?
I dalej uważam, że to problem na forum CSS ewentualnie HTML, a nie tutaj. Druga sprawa ten kod i twoje wyjaśnienia znaczą tyle co nic. W regulaminie wyraźnie jest napisane, że podstawa tematu to link do strony. To, że ty się orientujesz co chcesz wykonać, nie znaczy że my również wiemy. A wyznacznikiem tego jest choćby liczba udzielonych Ci odpowiedzi.

Delleg
27-02-2011, 12:20
Oj widzę że kogoś zdenerwowałem nieświadomie jeśli tak to przepraszam. Co do linku robię stronę na lokalnym komputerze, więc nie mogę podać strony bo to localhost. Napisałem posta w dziale Szablony wygląd i formatowanie jak od tego nie jest CSS i HTML to nie wiem co, ale ok przyznaje rację temat nadaje się na forum dotyczące HTML i CSS. Dodałem do kodu.


#top li:hover {
background:url(/test/templates/blue_v2/images/curentrsbar.gif) no-repeat right top;
background-color: #fff;
color: #464646;
}
#top li:hover a {
background: url(/test/templates/blue_v2/images/curentlsbar.gif) no-repeat left top;
}Rozwiązałem problem połowicznie bo IE tego nie obsługuje. Temat do zamknięcia.

a_m
27-02-2011, 13:02
Delleg, to nie jest aż taki problem > wrzuć w google "ie hover" i na pewno odnajdziesz technikę wymuszającą na ie stan hover dla innych elementów (nie jest utajniona)

Delleg
27-02-2011, 15:03
Delleg, to nie jest aż taki problem > wrzuć w google "ie hover" i na pewno odnajdziesz technikę wymuszającą na ie stan hover dla innych elementów (nie jest utajniona)
oj, oczywiście że szukałem w google póki co nic nie znalazłem co odpowiada akurat mi... póki co.