php i css navigacija "linkovi"

[ DavorPro @ 15.12.2007. 11:14 ] @

Zelim napraviti neki interactivni link . Stvar je sljedeca kad je neka stranica aktivna njen link mora imati drukciji stil s time kada se ode na drugi link taj predhodni se mora vratiti u prvobitno stanje . Ustvari vizualno bi trebalo izgledati poput taba
Ako neko zna gdije sam pogrijesio molim za pomoc unaprijed hvala. Nadam se da ce ovaj primjer moci posluziti i drugima... Hvala jos jednom..

<ul class="lista">
<?php

$stanjeLinka = "";
$aktivan = "aktivanCSS ";

$neaktivan = "neaktivanCSS ";

switch($_GET['go'])
{
case"Home": $stanjeLinka = $aktivan;break;
case"ONama": $stanjeLinka = $aktivan;break;
case"ProjektiUdruge": $stanjeLinka = $aktivan;break;
case"Clanovi": $stanjeLinka = $aktivan;break;
case"Galerija": $stanjeLinka = $aktivan;break;
case"Contact": $stanjeLinka = $aktivan;break;
case"Forum": $stanjeLinka = $aktivan;break;

default:$stanjeLinka = $neaktivan;
}
?>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/?go=Home">Home</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/?go=ONama">O nama</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/?go=ProjektiUdruge">Projekti Udruge</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/?go=Clanovi">Clanovi</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/galerija">Galerija</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/?go=contact">Contact</a>   </li>
<li class="<?=$stanjeLinka?>"><a href="http://www.sportvirtual.hr/phpBB">Forum</a>   </li>

</ul>

ovo je css:
a {
text-decoration: none;
color: #FFFF00;
font-size: 1.01em;

}

a:hover {

color: #FFFFFF;

}

li {
display: inline;
float: left;
}

.lista {
font-size: 1.01em;
margin-right: auto;
padding-top: -10px;
padding-bottom: 1px;
margin-top: 0px;
font-family: Tahoma, Verdana;
text-decoration: none;
color: #fff500;
text-decoration: none;
}

ul .lista .aktivanCSS a {
color: #fff500;
text-decoration: none;

}

ul .lista.aktivanCSS a:hover {
color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFF00;
border-bottom-color: #000000;
border-left-color: #FFFF00;
text-decoration: none;
}
ul .lista .aktivanCSS a:active {
color: #fff500;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFF00;
border-bottom-color: #000000;
border-left-color: #FFFF00;
text-decoration: none;
}

ul .lista .neaktivanCSS a {
text-decoration: none;
color: #FFFF00;

}

_{[Ovu poruku je menjao DavorPro dana 18.12.2007. u 12:15 GMT+1]}

_{[Ovu poruku je menjao DavorPro dana 19.12.2007. u 22:18 GMT+1]}

[ beep @ 15.12.2007. 12:47 ] @

a.ime , a.ime:active , a.ime:visited {

ne aktvni css

}

a.ime:hover {

aktivni css

}

npr.

<li ><a class="ime" href="http://www.sportvirtual.hr/?go=Home" >Home</a>   </li>

kucam iz glave al trebalo bi da radi .... prouci malo css

[ DavorPro @ 15.12.2007. 13:18 ] @

Sory! Ne kuzim, zelis reci da se ovo sto ja zelim moze napraviti samo sa css-om bez php ili ne kuzim logiku . Mozes li malo poblise pojasniti u cemu grijesim tako da shvatim sta u stvari radim i zaso pisem ovako a ne onako....
Sory! ne kuzim upomoccc . Pomozi!

[ pajko111 @ 15.12.2007. 15:58 ] @

Citat:

switch($_GET['go'])
{
case"Home": $stanjeLinka = $aktivan;break;
case"ONama": $stanjeLinka = $aktivan;break;
case"ProjektiUdruge": $stanjeLinka = $aktivan;break;
case"Clanovi": $stanjeLinka = $aktivan;break;
case"Galerija": $stanjeLinka = $aktivan;break;
case"Contact": $stanjeLinka = $aktivan;break;
case"Forum": $stanjeLinka = $aktivan;break;

default:$stanjeLinka = $neaktivan;
}

Ok,ovo sam video odmah da nije u redu.
Sa ovom switch petljom uvek postavljas klasu svih linkova na aktivniCSS.Tebi treba da samo jedan bude aktivan a ostali neaktivni.
Znaci ili koristi switch petlju ali onda moras da definises za svaki case: deo klasu svakog linka ponaosob ili numerisi linkove pa ih provuci kroz neku for ili while petlju unutar CSS-a.
Znaci ili ovo:

Citat:

switch($_GET['go'])
{
case"Home":
$stanjeLinkaHome = $aktivan;
$stanjeLinkaONama = $neaktivan;
.
.
$stanjeLinkaForum = $neaktivan;
break;
.
.
.
Na kraju za default stanje
}

ili nesto ovako samo prilagodi svojim potrebama.
Ovo bi morao da stavis u CSS kod koji je u okviru iste stranice a ne bi ti radilo ako je CSS eksterni.

Citat:

$i=0;

while ($i<=3) {
if ($tab=="t[$i]")
{
$borW[$i]=0;
$bold[$i]='bold';
$backCol[$i]='#E4E4E4';
$col[$i]='#262627';
}
else
{ $bold[$i]='normal';
$backCol[$i]='#ffffbb';
$col[$i]='#59483f';
$borW[$i]=1;
}
echo '.tab'.$i.' {'
.'position:relative;'
.'float:left;'
.'width:10%;'
.'height:23px;'
.'font-family:"lucida grande",arial,helvetica,sans-serif;'
.'font-size:11px;'
.'font-weight:'.$bold[$i].';'
.'line-height:20px;'
.'background-color:'.$backCol[$i].';'
.'cursor:pointer;'
.'display:block;'
.'padding-top:5px;'
.'border-style:solid;'
.'border-color:#2EBDE5;'
.'border-width:1px;'
.'border-bottom-width:'.$borW[$i].'px;}'

.'.tab'.$i.' a{'
.'text-decoration:none;'
.'padding:0 5px 0 5px;'
.'color:'.$col[$i].';}';
$i++;
}

To bi trebalo da ti resi problem.
Pozdrav

[ DavorPro @ 15.12.2007. 16:35 ] @

Upravo sam pogledao tvoj odgovor. Hvala na trudu , "pokusat" cu to provest u djelo .

[ beep @ 15.12.2007. 16:37 ] @

Citat:

DavorProzelis reci da se ovo sto ja zelim moze napraviti samo sa css-om bez

Bas tako ... za to sto tebi treba potrebno je samo poznavanje html-a i css-a ... nema ovo nikakve veze sa php

[ pajko111 @ 15.12.2007. 20:48 ] @

Citat:

beep: Bas tako ... za to sto tebi treba potrebno je samo poznavanje html-a i css-a ... nema ovo nikakve veze sa php

Izvini, ali ne kontam kako mislis da uradi to samo sa css-om?
JavaScript i css pa mozda, ali kako samo sa css-om?

Mozda nisi bas dobro razumeo sta covek trazi.
Nije u pitanju samo drugaciji stil za hover stanje, nego covek pokusava da napravi drugaciji stil za tab aktivne stranice.
Znaci hoce da ima nesto kao tabovi na iGoogle stranicama.
Ako si na stranici "Home", link za tu stranicu ce da bude recimo beo a svi ostali ce da budu crni.
Koliko ja znam to moze da se uradi samo pomocu nekog server-side jezika ili eventualno sa javascriptom.

Ako znas kako to da se uradi samo sa CSS-om, ajde molim te objasni, i mene bi interesovalo.

[ DavorPro @ 16.12.2007. 12:26 ] @

E, da bas tako ! Kao sto kaze pajko111 .Stanje aktivnog linka treba cijelo vrijeme zadrzati jedno stanja a ostali default.
Sory nisam uspio sa php .. Evo zadnje sto si postao kad ubacim u includ file gdije su mi i linkovi ne radi stavio sam i css
unutra ali vjerojatno imam gresku u nekoj sintaksi...Ako se uistinu moze samo sa css to rijesiti molio bih te za primjer koda.

[ pajko111 @ 16.12.2007. 15:55 ] @

Ovo bas ne bi trebao da radim, mislim da ti postujem ceo kod, al u sustini sam ti vec stavio gore kako treba da izgleda.
Ubuduce pomuci se malo da analiziras i sam dodjes do resenja.
Ali evo:
Taj fajl koji includujes treba da izgleda ovako.

Code:

<ul class="lista">
<?php

$aktivan = "aktivanCSS";

$neaktivan = "neaktivanCSS ";

switch($_GET['go'])
{
case "Home":
  $stanjeLinkaHome = $aktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "ONama":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $aktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "ProjektiUdruge":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $aktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "Clanovi":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $aktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "Galerija":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $aktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "Contact":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $aktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
case "Forum":
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $aktivan;
  break;
default:
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;
  break;
}

//Sad ovde redirektujes korisnika na drugi direktorijum ako je izabrao Forum ili galeriju.Obican IF uslov
?>
<li class="<?=$stanjeLinkaHome?>"><a href="http://www.sportvirtual.hr/?go=Home">Home</a>   </li>
<li class="<?=$stanjeLinkaONama?>"><a href="http://www.sportvirtual.hr/?go=ONama">O nama</a>   </li>
<li class="<?=$stanjeLinkaProjekti?>"><a href="http://www.sportvirtual.hr/?go=ProjektiUdruge">Projekti Udruge</a>   </li>
<li class="<?=$stanjeLinkaClanovi?>"><a href="http://www.sportvirtual.hr/?go=Clanovi">Clanovi</a>   </li>
<li class="<?=$stanjeLinkaGalerija?>"><a href="http://www.sportvirtual.hr/?go=Galerija">Galerija</a>   </li>
<li class="<?=$stanjeLinkaContact?>"><a href="http://www.sportvirtual.hr/?go=Contact">Contact</a>   </li>
<li class="<?=$stanjeLinkaForum?>"><a href="http://www.sportvirtual.hr/?go=Forum">Forum</a>   </li>

</ul>

CSS kod koji ti odredjuje kako se ponasa aktivan i neaktivan link moze da bude recimo

Code:

.aktivanCSS
{
background-color:red;
border:1px 1px 0px 1px;
/*Dodas jos sta got ti hoces za aktivan link*/
}
.neaktivanCSS
{
background-color:white;
border:0px 0px 1px 0px;
/*Dodas jos sta got ti hoces za neaktivan link*/
}

/*
hover stanje tabova sad mozes da definises razlicito za aktive i neaktivne linkove ako hoces

E, ovo nije bas najelegantniji nacin kako to da resis, al radi posao
Drugi nacin ces morati sam da skontas
Nadam se da ce ti ovo pomoci da vidis o cemu se radi
Takodje sta god ti nije jasno u vezi css-a ili html-a pogledaj na W3C sajtu.
Tu je objasnjeno sve sto moze da ti zatreba, makar u pocetku.

[ DavorPro @ 19.12.2007. 09:29 ] @

Pajko111 hvala na pomoci puno si mi pomogao!

[ pajko111 @ 19.12.2007. 18:00 ] @

Nema na cemu.Drago mi je sto sam mogao da ti pomognem.Samo, nije ovo nista komplikovano za shvatiti.Sledeci put se malo sam pomuci da nadjes resenje.Malo googlanja, malo citanja manuela i malo mozganja je sve sto je potrebno.A ovde postavi pitanje tek ako si pokusavao vise od 7 dana da nadjes resenje i nisi uspeo.
Pozdrav.

[ agvozden @ 20.12.2007. 11:05 ] @

A sto ne setujes prvo ceo niz ovih stanja

Code:
  $stanjeLinkaHome = $neaktivan;
  $stanjeLinkaONama = $neaktivan;
  $stanjeLinkaProjekti = $neaktivan;
  $stanjeLinkaClanovi = $neaktivan;
  $stanjeLinkaGalerija = $neaktivan;
  $stanjeLinkaContact = $neaktivan;
  $stanjeLinkaForum = $neaktivan;

pa onda samo

Code:

case "Home":
  $stanjeLinkaHome = $aktivan;
  break;
case "ONama":
  $stanjeLinkaONama = $aktivan;
  break;

Preglednije i brze...

[ ColdKeyboard @ 22.12.2007. 00:50 ] @

Ovo sto ti je agvozden predlozio je mnogo jednostavnije, krace i bezbolnije nego predhodni kod od pajko111 iako ce i jedan i drugi raditi bez problema.

[ DavorPro @ 23.12.2007. 23:54 ] @

Decki hvala vam puno na pomoci. Zbilja da nema dobrih ljudi poput vas i ovog foruma mnogi bi si od muke cupali kosu
sa glave ili bi sa njom zid kod sujeda rizbijali. Mozete pogledati ovu navigaciju ali nije jos gotova moram je jos doratiti
ovo je tesna stranica ali sa glavne navigacije se moze linkati dalje .... Usput ako moze komentar na contact , galeriju
i normalno na novo pecenu navigaciju koja je jos u izradi.... Pozdrav svim forumasima!!!!!!!!!!!!:::::::::::::...........
http://www.sportvirtual.hr/test.php

[ peromalosutra @ 25.12.2007. 11:18 ] @

Ili može i nešto ovako:

Code:

<?php
$param="id=\"odabran\"";
// $lok je ime trenutne stranice
?>
<dl>
        <dt <?php if(!strcmp("naslovna",$loc)) echo $param ?> > <a href="index.php?str=naslovna">Naslovna</a></dt>
        <dt <?php if(!strcmp("linux",$loc)) echo $param ?> > <a href="index.php?str=linux">Linux</a></dt>
        <dt <?php if(!strcmp("c",$loc)) echo $param ?> > <a href="index.php?str=c">C / C++</a></dt>
        <dt <?php if(!strcmp("java",$loc)) echo $param ?> > <a href="index.php?str=java">Java</a></dt>
        <dt <?php if(!strcmp("php",$loc)) echo $param ?> > <a href="index.php?str=php">PHP</a></dt>
        <dt <?php if(!strcmp("mysql",$loc)) echo $param ?> > <a href="index.php?str=mysql">MySQL</a></dt>
        <dt <?php if(!strcmp("ostalo",$loc)) echo $param ?> > <a href="index.php?str=ostalo">Ostalo</a></dt>
        <dt <?php if(!strcmp("kontakt",$loc)) echo $param ?> > <a href="index.php?str=kontakt">Kontakt</a></dt>
</dl>