[HTML][CSS] Menu w formie zakładek (active) Opcje

[krzysiekj]

Witam mam menu zrobione w formie zakładek

[HTML] pobierz, plaintext 
<div id="menu2">
<ul>
	<li><a href="index.php?page=1">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>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#menu2 li a:link, #menu2 li a:visited {
background: url("img/zak1.gif") no-repeat;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #3c6a38;
width: 100px;
height: 30px;
float: left;
padding: 5px 0px;
}
 
#menu2 li a:hover {
background: url("img/zak2.gif") no-repeat;
color: #fff;
}
[CSS] pobierz, plaintext 

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ć?

Ten post edytował thek 22.06.2010, 11:19:18

Powód edycji: [thek]: bbcode poprawiłem

[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]

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?

Ten post edytował krzysiekj 21.06.2010, 06:25:41

[gigzorr]

#menu2 li a.activ:link {

#menu2 li a.active:link {

[krzysiekj]

#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ś

Ten post edytował IronStark 21.06.2010, 20:17:51

[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:

[HTML] pobierz, plaintext 
<style>
.strona_na_ktorej_jestem  {//style}
</style>
<div id="menu">
<a href="index.php?strona=1" class="<?php echo ($_GET['strona']==1 ? 'strona_na_ktorej_jestem' : ''); ?>">strona1</a>
<a href="index.php?strona=2" class="<?php echo ($_GET['strona']==2 ? 'strona_na_ktorej_jestem' : ''); ?>">strona2</a>
</div>
[HTML] pobierz, plaintext 

Ten post edytował bastard13 21.06.2010, 20:40:21

[krzysiekj]

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]

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:

[HTML] pobierz, plaintext 
<style>
.strona_na_ktorej_jestem  {//style}
</style>
<div id="menu">
<a href="index.php?strona=1" class="<?php echo ($_GET['strona']==1 ? 'strona_na_ktorej_jestem' : ''); ?>">strona1</a>
<a href="index.php?strona=2" class="<?php echo ($_GET['strona']==2 ? 'strona_na_ktorej_jestem' : ''); ?>">strona2</a>
</div>
[HTML] pobierz, plaintext 

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.

[HTML] pobierz, plaintext 
.strona_na_ktorej_jestem {color:red}
[HTML] pobierz, plaintext 

bo powinno działać bez problemu.

[krzysiekj]

A zdefiniowałeś sobie style dla tej klasy np.

[HTML] pobierz, plaintext 
.strona_na_ktorej_jestem {color:red}
[HTML] pobierz, plaintext 

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ć:

[HTML] pobierz, plaintext 
<style>
.aktywny {color:red}
</style>
[HTML] pobierz, plaintext 

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]

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ć:

[HTML] pobierz, plaintext 
<style>
.aktywny {color:red}
</style>
[HTML] pobierz, plaintext 

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ę:

[HTML] pobierz, plaintext 
<li><a href="index.php?page=liczba"<?php echo ($_GET['page']==liczba ? ' class="aktywna"' : '') ?>>liczba</a></li>
[HTML] pobierz, plaintext 

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ę

[CSS] pobierz, plaintext 
.aktywna {color:red;}
[CSS] pobierz, plaintext 

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:

[CSS] pobierz, plaintext 
#jeden {color:red;}
.jeden {color:blue;}
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<p id="jeden" class="jeden">Będę czerwony czy niebieski?</p>
[HTML] pobierz, plaintext 

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]

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" 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]

Ok... Teraz Ci poprawię, ale "nie grzesz więcej" 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 . 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 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

[HTML] pobierz, plaintext 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
[HTML] pobierz, plaintext 

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

[krzysiekj]

Działa, ale nie na 6 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

[HTML] pobierz, plaintext 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
[HTML] pobierz, plaintext 

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

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

Działa, ale nie na 6 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

[HTML] pobierz, plaintext 
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
[HTML] pobierz, plaintext 

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

thek - możesz coś podpowiedzieć czemu mi to nie działa?