Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Menu w formie zakładek (active)
Forum PHP.pl > Forum > Przedszkole
krzysiekj
Witam mam menu zrobione w formie zakładek

  1. <div id="menu2">
  2. <ul>
  3. <li><a href="index.php?page=1">1</a></li>
  4. <li><a href="index.php?page=2">2</a></li>
  5. <li><a href="index.php?page=3">3</a></li>
  6. </ul>
  7. </div>


  1. #menu2 li a:link, #menu2 li a:visited {
  2. background: url("img/zak1.gif") no-repeat;
  3. font-size: 16px;
  4. font-weight: bold;
  5. text-align: center;
  6. color: #3c6a38;
  7. width: 100px;
  8. height: 30px;
  9. float: left;
  10. padding: 5px 0px;
  11. }
  12.  
  13. #menu2 li a:hover {
  14. background: url("img/zak2.gif") no-repeat;
  15. color: #fff;
  16. }


Chciałbym zrobić aby po otwarciu danej strony np. 2 zakładka była aktywna i wyglądała jak po najechaniu myszą.
ktoś podpowie jak to zrobić?
thek
Po pierwsze... Popraw bbcode na właściwy.
A po drugie... Przechwytuj parametr $_GET['page'] i od niego uzależniaj nadanie odpowiedniemu elementowi listy klasy identycznej jak dla hover
krzysiekj
Cytat(thek @ 20.06.2010, 22:02:10 ) *
Po pierwsze... Popraw bbcode na właściwy.
A po drugie... Przechwytuj parametr $_GET['page'] i od niego uzależniaj nadanie odpowiedniemu elementowi listy klasy identycznej jak dla hover


Co mam poprawić?
Mógłbyś kolego rozwinąć bardziej myśl przechwytywania parametru na przykładzie słaby jestem w te klocki.

Kod
<div id="menu2">
<ul>
    <li><a href="index.php?page=1"
    <?php if($_GET['page']=="1"){echo "class=\"activ\"";} ?> >1</a></li>
    <li><a href="index.php?page=2">2</a></li>
    <li><a href="index.php?page=3">3</a></li>
</ul>
</div>


Coś takiego? tylko nie bardzo chce mi to działać.

Kod PHP dobrze dopisuje po kliknięciu class="activ" ale link nie chce się zrobić aktywny, może coś z css i z tym linkiem activ?

Kod
#menu2 li a.activ:link {
background: url("img/zak2.gif") no-repeat;
color: #fff;
}


Czy ktoś pomoże?
gigzorr
#menu2 li a.activ:link {

#menu2 li a.active:link {
krzysiekj
Cytat(gigzorr @ 21.06.2010, 19:33:21 ) *
#menu2 li a.activ:link {

#menu2 li a.active:link {


Nie bardzo rozumiem
IronStark
Kod
<div id="menu2">
<ul>
    <li><a href="index.php?page=1"
    <?php if($_GET['page']=="1"){echo "class=\"activ\"";} ?> >1</a></li>
    <li><a href="index.php?page=2">2</a></li>
    <li><a href="index.php?page=3">3</a></li>
</ul>
</div>


#menu2 li a.activ:link

po co ci to link ? taka pseudoklasa nie istnieje w css.

Kod
#menu2 li a.activ - dla aktywnej zakładki (strony na której jesteś)

#menu2 li a - dla normalnego linku

#menu2 li a:hover - dla linku na który najechałeś
bastard13
a:active faktycznie jest dla aktywnych odnoścników, z tym, że to nie chodzi o stronę, na której aktualnie się znajdujemy. Te style są dla elementu, na którym klikniesz i przytrzymasz wciśnięty przycisk myszy.
Co do aktywnego elementu, to:
  1. .strona_na_ktorej_jestem {//style}
  2. <div id="menu">
  3. <a href="index.php?strona=1" class="<?php echo ($_GET['strona']==1 ? 'strona_na_ktorej_jestem' : ''); ?>">strona1</a>
  4. <a href="index.php?strona=2" class="<?php echo ($_GET['strona']==2 ? 'strona_na_ktorej_jestem' : ''); ?>">strona2</a>
  5. </div>
krzysiekj
Cytat(IronStark @ 21.06.2010, 21:16:49 ) *
Kod
<div id="menu2">
<ul>
    <li><a href="index.php?page=1"
    <?php if($_GET['page']=="1"){echo "class=\"activ\"";} ?> >1</a></li>
    <li><a href="index.php?page=2">2</a></li>
    <li><a href="index.php?page=3">3</a></li>
</ul>
</div>


#menu2 li a.activ:link

po co ci to link ? taka pseudoklasa nie istnieje w css.

Kod
#menu2 li a.activ - dla aktywnej zakładki (strony na której jesteś)

#menu2 li a - dla normalnego linku

#menu2 li a:hover - dla linku na który najechałeś


Tutaj actice było akurat zbieżnością nazw. Activ w moim przypadku dotyczyło odwołania w css.
bastard13
Sorry:) Wybacz facetowi w okularach na tyle słabych, że już mu kropka z dwukropkiem się myli:)
krzysiekj
Cytat(bastard13 @ 21.06.2010, 21:39:43 ) *
a:active faktycznie jest dla aktywnych odnoścników, z tym, że to nie chodzi o stronę, na której aktualnie się znajdujemy. Te style są dla elementu, na którym klikniesz i przytrzymasz wciśnięty przycisk myszy.
Co do aktywnego elementu, to:
  1. .strona_na_ktorej_jestem {//style}
  2. <div id="menu">
  3. <a href="index.php?strona=1" class="<?php echo ($_GET['strona']==1 ? 'strona_na_ktorej_jestem' : ''); ?>">strona1</a>
  4. <a href="index.php?strona=2" class="<?php echo ($_GET['strona']==2 ? 'strona_na_ktorej_jestem' : ''); ?>">strona2</a>
  5. </div>


Kolego składnia jest na pewno dobra bo nie działa tak jak podałeś? Jak dam pokaż kod źródłowy to tam faktycznie jest ok nadaje klasę, ale nie wykorzystuje jej wogóle. Co może być nie tak?
bastard13
A zdefiniowałeś sobie style dla tej klasy np.
  1. .strona_na_ktorej_jestem {color:red}

bo powinno działać bez problemu.
krzysiekj
Cytat(bastard13 @ 21.06.2010, 22:09:24 ) *
A zdefiniowałeś sobie style dla tej klasy np.
  1. .strona_na_ktorej_jestem {color:red}

bo powinno działać bez problemu.



Kod
.aktywny {
background: url("img/zak2.gif") no-repeat;
color: #fff;
}


aktywny ma takie same parametry jak a:hover czyli tak jak chcę, żeby wyglądał po otwarciu

Kod
<div id="menu2">
<ul>
    <li><a class="<?php echo ($_GET['page']==rachunkiindywidualni ? 'aktywny' : ''); ?>" href="index.php?page=rachunkiindywidualni">Rachunki</a></li>
    <li><a href="index.php?page=lokatyindywidualni">Lokaty</a></li>
    <li><a href="index.php?page=kredytyindywidualni">Kredyty</a></li>
</ul>
</div>


I nie działa. Faktycznie niby w źródle strony jest ok niby nadaje klasę <a> taką jak trzeba czyli class="aktywny", ale nie podświetla. Może coś źle w css zrobiłem
bastard13
W tym co wkleiłeś na 100% nie ma żadnego błędu. Może tylko rachunkiindywidualni powinno być w cudzysłowie 'rachunkiindywidualni', ale bez tego też działa. Więc nie wiem.
A w jaki sposób dołączasz css? Może w tym tkwi problem?
Spróbuj wkleić:
  1. .aktywny {color:red}

tuż przed div'em z menu, a tamten styl dotyczący klasy aktywny sobie zakomentuj i sprawdź czy tak ci będzie działało.
krzysiekj
Cytat(bastard13 @ 21.06.2010, 23:00:24 ) *
W tym co wkleiłeś na 100% nie ma żadnego błędu. Może tylko rachunkiindywidualni powinno być w cudzysłowie 'rachunkiindywidualni', ale bez tego też działa. Więc nie wiem.
A w jaki sposób dołączasz css? Może w tym tkwi problem?
Spróbuj wkleić:
  1. .aktywny {color:red}

tuż przed div'em z menu, a tamten styl dotyczący klasy aktywny sobie zakomentuj i sprawdź czy tak ci będzie działało.


Dołączyłem style przed divem dałem cudzysłów i dalej nic... Niby klasę nadaje ale nic nie widać
thek
Z bbcode chodzi mi o to, by stosować właściwy do właściwego języka. U Ciebie 1 fragment to HTML a drugi to CSS. Czemu więc oba są walnięte do CODE? Nie po to jest kolorowanie składni na forum wstawione userom by sobie po prostu było, ale by z niego korzystali bo to ułatwia analizę kodu i wyszukiwanie ewentualnych błędów. Teraz wszystko jest pisane jednym ciągiem. Użycie odpowiedniego bbcode koloruje składnię.

Co do tematu, to kod jest podobny do tego co podałeś w swoim drugim poście, czyli każdy z elementów listy ma formę:
  1. <li><a href="index.php?page=liczba"<?php echo ($_GET['page']==liczba ? ' class="aktywna"' : '') ?>>liczba</a></li>
Oczywiście zamiast liczba jest konkretny numer.
Z kolei css (nieważne czy dołączony z zewnątrz, w znaczniku <style> czy inaczej) powinien zawierać definicję
  1. .aktywna {color:red;}
To co może sprawiać problem, to ewentualna kaskadowość tych arkuszy (nadpisywanie sobie stylu) lub "wartość punktowa". Mało kto z początkujących wie, że definicja ma swoje zależności, które można określić punktami. I tak definicja dla id (#) dostanie ich więcej niż dla klasy ( . ), jeśli więc zajdzie sytuacja, że przeglądarka będzie musiała decydować, który styl zastosować, wybierze ten z wyższą "wartością punktową". Takich "zasad" jest kilka i kto ich nie zna, może się zdziwić czasem czemu działa mu kod dziwnie.
Podam przykład:
  1. #jeden {color:red;}
  2. .jeden {color:blue;}

  1. <p id="jeden" class="jeden">Będę czerwony czy niebieski?</p>
A to tylko najprostsze z możliwych miejsc wpadki. Zauważ, że mogłeś element zdefiniować w CSS jako #menu2 li a i wtedy link nie musi zawierać w sobie słowa class czy id. Przeglądarka sama prawidłowo zinterpretuje i znajdzie pasujący do wzorca. Zdefiniuj sobie więc:
#menu2 li a {} oraz #menu2 li a.aktywna{} i popatrz wtedy co i jak.
krzysiekj
Cytat(thek @ 22.06.2010, 09:07:14 ) *
Zdefiniuj sobie więc:
#menu2 li a {} oraz #menu2 li a.aktywna{} i popatrz wtedy co i jak.


Za bbcode w takim razie sorki.
Co do twojej pomocy faktycznie był problem z samym css z kaskadowością. To co wyżej pomogło dzięki bardzo.
thek
Ok... Teraz Ci poprawię, ale "nie grzesz więcej" winksmiley.jpg Gdybyś przeczytał przyklejony temat o prawidłowym pisaniu tematów to pewnie byś zauważył punkt o poprawnym bbcode. Za chwilkę wejdź a sam zobaczysz różnicę w czytelności swojego kodu. Polecam też poczytać o samych arkuszach nieco więcej to dowiesz się więcej jak są owe wartości interpretowane, co ma wyższy priorytet, jak uniknąć nadpisywania (lub celowo owo nadpisywanie stosować dla skracania objętości definicji stylu) i wielu przydatnych informacji.
krzysiekj
Cytat(thek @ 22.06.2010, 12:18:42 ) *
Ok... Teraz Ci poprawię, ale "nie grzesz więcej" winksmiley.jpg Gdybyś przeczytał przyklejony temat o prawidłowym pisaniu tematów to pewnie byś zauważył punkt o poprawnym bbcode. Za chwilkę wejdź a sam zobaczysz różnicę w czytelności swojego kodu. Polecam też poczytać o samych arkuszach nieco więcej to dowiesz się więcej jak są owe wartości interpretowane, co ma wyższy priorytet, jak uniknąć nadpisywania (lub celowo owo nadpisywanie stosować dla skracania objętości definicji stylu) i wielu przydatnych informacji.


Dzięki, cały czas się uczę i powiem Ci, że na początku miałem taką deklarację w CSS tylko miałem zły kod php. Potem jak zacząłem kombinować to przekombinowałem z wszystkim winksmiley.jpg. Teraz już wiem co i jak jeszcze raz dzięki

Jeszcze jeden problem nie działa to niestety w żadnym IE. Ma ktoś na to radę?
thek
Działa, ale nie na 6 smile.gif Interpretuje on bowiem błędnie pseudoklasy i ogólnie ma ogromne problemy z CSS. W takim wypadku użyj skryptu JS, który naprawia te błędy. Umieść w kodzie
  1. <!--[if lt IE 8]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  3. <![endif]-->
lub ściągnij ten plik na serwer i umieść do niego link prawidłowo, a ten i wiele innych problemów z CSS (i nie tylko) powinny się rozwiązać same winksmiley.jpg
krzysiekj
Cytat(thek @ 23.06.2010, 09:45:06 ) *
Działa, ale nie na 6 smile.gif Interpretuje on bowiem błędnie pseudoklasy i ogólnie ma ogromne problemy z CSS. W takim wypadku użyj skryptu JS, który naprawia te błędy. Umieść w kodzie
  1. <!--[if lt IE 8]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  3. <![endif]-->
lub ściągnij ten plik na serwer i umieść do niego link prawidłowo, a ten i wiele innych problemów z CSS (i nie tylko) powinny się rozwiązać same winksmiley.jpg


Nic to nie pomaga, a wręcz przeciwnie wprowadza lekkie przesunięcia przy klikaniu w pozycje menu

Cytat(thek @ 23.06.2010, 09:45:06 ) *
Działa, ale nie na 6 smile.gif Interpretuje on bowiem błędnie pseudoklasy i ogólnie ma ogromne problemy z CSS. W takim wypadku użyj skryptu JS, który naprawia te błędy. Umieść w kodzie
  1. <!--[if lt IE 8]>
  2. <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
  3. <![endif]-->
lub ściągnij ten plik na serwer i umieść do niego link prawidłowo, a ten i wiele innych problemów z CSS (i nie tylko) powinny się rozwiązać same winksmiley.jpg


thek - możesz coś podpowiedzieć czemu mi to nie działa?
thek
Nawet bez tego warunkowego dołączania :hover powinno działać w IE8 oraz IE7. Skoro tak nie jest, to znaczy, że problem musiał znowu gdzieś przy stylach wyskoczyć. Sprawdź dokładnie jakie style przyjął ten element podczas użytkowania. Choćby firebugiem jeśli używasz firefoxa. Po zaznaczeniu elementu będziesz wtedy widział jakie posiaa on klasy przypisane oraz całą hierarchię na niego oddziałowującą. Możliwe, że gdzieś się coś nadpisuje mimo wszystko.
krzysiekj
Cytat(thek @ 27.06.2010, 00:48:02 ) *
Nawet bez tego warunkowego dołączania :hover powinno działać w IE8 oraz IE7. Skoro tak nie jest, to znaczy, że problem musiał znowu gdzieś przy stylach wyskoczyć. Sprawdź dokładnie jakie style przyjął ten element podczas użytkowania. Choćby firebugiem jeśli używasz firefoxa. Po zaznaczeniu elementu będziesz wtedy widział jakie posiaa on klasy przypisane oraz całą hierarchię na niego oddziałowującą. Możliwe, że gdzieś się coś nadpisuje mimo wszystko.


Dzięki będę grzebał
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.