Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Generator menu - gdzie umieścić kod?

Błąd   Założony przez  XmaX.

26.01.2011, 21:55
#1
wersja skryptu MyBB: 1.6
adres forum: www.popelscan.2ap.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam!
Zrobiłem menu do forum w generatorze. Niestety nie wiem, gdzie mam to wszystko umieścić :P
Kod do CSS:
ul#menu
{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(images/nav_bg.png) repeat-x top left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

ul#menu li
{
    display:block;
    float:left;
    margin:0;
    padding:0;
}
    
ul#menu li a
{
    display:block;
    float:left;
    color:#999999;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}
    
ul#menu li a:hover
{    
    color:#FFFFFF;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;        
}
    

ul#menu li a.current
{
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;    
    float:left;
    margin:0;
}

I zmieniłem go na:
.menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:30px;
    font-size:12px;
    font-weight:bold;
    background:transparent url(images/BlueRaven2/nav_bg.png) repeat-x top left;
    font-family:Arial, Helvetica, sans-serif;
    border-bottom:1px solid #000000;
    border-top:1px solid #000000;
}

.menu ul a:link {
    display:block;
    float:left;
    margin:0;
    padding:0;
}
    
.menu ul a:visited {

    display:block;
    float:left;
    color:#999999;
    text-decoration:none;
    font-weight:bold;
    padding:8px 20px 0 20px;
}
    
.menu ul a:hover, .menu ul a:active {
    
    color:#FFFFFF;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;        
}
    

.menu img {
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;    
    float:left;
    margin:0;
}

A plik html wygląda tak:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sprite Menu</title>
<link rel="stylesheet" href="menu_style.css" type="text/css" media="all" />

</head>
<body>
        <div>
            <ul id='menu'>
            <li class="button"><a class='current' href='http://' >Home</a></li>
            <li class="button"><a href='http://'  >Products</a></li>
            <li class="button"><a href='http://'  >Support</a></li>
            <li class="button"><a href='http://'  >Contact</a></li>
            </ul>
        </div><!-- End of Nav Div -->        
</body>
</html>

Wytłumaczy mi ktoś to dokładnie, gdzie mam to umieścić i jak powinno to poprawnie wyglądać. Podejrzewam, że błąd leży tu:
.menu img {
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;    
    float:left;
    margin:0;
}
Tylko nie wiem jak poprawnie to anzwać, bo jak widać orygianlnie było to nazwane: ul#menu li a.current


Pozdrawiam!
26.01.2011, 22:12
#2
A powiesz co to dokładnie daje? ;] .. kody css do global.css twojego stylu..
27.01.2011, 09:40
#3
Już mi prawie wszystko działa. Tylko powinno podświetlać nazwę, gdzie aktualnie się znajduję np. strona główna, ale nie podświetla.
Czy za to odpowiada ten kod?
ul#menu li a.current
{
    display:inline;
    height:22px;
    background:transparent url(images/nav_bg.png) 0px -30px no-repeat;    
    float:left;
    margin:0;
}

Jak zostawię oryginalne nazwy np. ul#menu li a.current w stylu, to nie działa. Zamieniłem je tak:
ul#menu - .menu ul
ul#menu li - .menu li
ul#menu li a - .menu ul a
ul#menu li a:hover - .menu ul a:hover
ul#menu li a.current - .menu li a.current

Tak to menu powinno wyglądać:
[Obrazek: menu1qd.jpg]

A tak to menu wygląda:
[Obrazek: menu2z.jpg]

Jak widać, na moim komputerze na niebiesko podświetla miejsce, w którym się aktualnie znajduję (home) i podświetla tam, gdzie mam myszkę (support). A na forum pokazuje tylko, tam, gdzie mam myszkę (Szukaj) i nie pokazuje gdzie się aktualnie znajduję (Użytkownicy).


Pozdrawiam!
27.01.2011, 14:44
#4
Ty chcesz po prostu zrobić aktywne menu ? tak jak na IPB ?? jeśli tak to napisz.. i wytłumaczę Ci wszystko krok po kroku ;p

31.01.2011, 10:55
#5
https://webboard.pl/thread-16305.html



Użytkownicy przeglądający ten wątek:

2 gości