Problem med speciellt utseende för aktiv menyavdelning

Tjock-ErikMedlem sedan nov. 2002102 inlägg

Frågan29 feb. 2004 19:26#1

Jag försöker göra en sak som inte riktigt vill fungera. Med hjälp av PHP ska dev menyavdelning som man just då besöker se lite annorlunda ut. För att ange vilken id man besöker använder jag https://www.sidan.com?id=menyvalet. Det fungerar lite grann för när man först går in på localhost är startsidan som har if ?id="" markerad som atkiv. Så här ser koden ut:

<ul>
<li<?php if ($id=="") echo " class=\"aktiv\""; ?>> <a href="./?id="<?php if ($id=="") echo " class=\"aktiv\""; ?>>startsidan</a></li>

<li<?php if ($id=="hej") echo " class=\"aktiv\""; ?>> <a href="./?id=hej"<?php if ($id=="hej") echo " class=\"aktiv\""; ?>>hej</a></li>

o.s.v.
</ul>

Det här är CSS-koden för utseendet:

#meny ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#meny li {
background-color: #F2EDC6;
float: left;
margin: 0px;
border-top: 0px solid #DBD8A4;
border-right: 1px solid #DBD8A4;
border-bottom: 1px solid #DBD8A4;
border-left: 0px solid #DBD8A4;
}
#meny li.alt {
width: 273px;
background-color: #F5F1D6;
padding: 7px 10px 3px;
float: left;
margin: 0px;
border-top: 0px solid #DBD8A4;
border-right: 0px solid #DBD8A4;
border-bottom: 1px solid #DBD8A4;
border-left: 0px solid #DBD8A4;
font-size: 10px;
line-height: 10px;
height: 15px;
}
#meny li.aktiv {
background-color: #FFFFFF;
float: left;
margin: 0px;
border-top: 0px solid #DBD8A4;
border-right: 1px solid #DBD8A4;
border-bottom: 1px solid #FFFFFF;
border-left: 0px solid #DBD8A4;
}
#meny a.aktiv {
padding: 7px 10px 3px;
color: #FF0000;
text-decoration: none;
display: block;
}
#meny a.aktiv:hover {
background-color: #FFFFFF;
text-decoration: underline;
}

jarvkloMedlem sedan juli 20013 378 inlägg

29 feb. 2004 23:22#2

Well...

Om vi tar den rent HTML/CSS-mässiga biten, så behöver du inte lägga class på både li och a i detta fall...
Det räcker med

<div id="meny">
<ul>
  <li><a href="#">Ett</a></li>
  <li class="aktiv"><a href="#">Två</a></li>
  <li><a href="#">Tre</a></li>
  <li><a href="#">Fyra</a></li>
</ul>
</div>

och CSS:en

#meny li {...}
#meny li a {...}
#meny li a:hover {...}

#meny li.aktiv {...}
#meny li.aktiv a {...}
#meny li.aktiv a:hover {...}

sedan kör duantingen med den kod du har "i li i ditt exempel", eller typ såhär om du vill lägga på detta med php istället:

<div id="meny">
<ul>
<li<?php if ($id=="" || $id=="1") { ?> class="aktiv"<?php } ?>><a href="sidan.php?id=1">Ett</a></li>
<li<?php if ($id=="2") { ?> class="aktiv"<?php } ?>><a href="sidan.php?id=2">Två</a></li>
<li<?php if ($id=="3") { ?> class="aktiv"<?php } ?>><a href="sidan.php?id=3">Tre</a></li>
<li<?php if ($id=="4") { ?> class="aktiv"<?php } ?>><a href="sidan.php?id=4">Fyra</a></li>
</ul>
</div>

Och bara för att vara övertydlig: Du har väl "plockat" in värdet i $id i stil med

<?php $id = $_GET["id"];  ?>

:bire