Keskustelu: Nettisivujen teko: css ja a:active

Eli tarkoituksena oli saada avoinna olevan sivun linkin tausta punaiseksi (css määrittelynä), kunnes tajusin ettei se onnistukaan niin kuin olin ajatellut. Linkkihän on aktiivinen vain silloin kun hiirellä klikkaa...
Onko olemassa jotain kikkaa, jolla sen taustan saa punaiseksi ilman että joudun joka sivulle määrittelemään ko. sivun linkin jonkin class:n avulla. Nyt linkit tulevat include-toiminnon kautta (navi.php ja alinavi.php) ja ovat omissa div-lohkoissa.

Mikäs ongelma noissa class määreissä oikein on?

Valikkoa muodostaessa voi värittää oikean linkin, kunhan nykyinen sivu on tiedossa. Seuraavassa esimerkissä valikon sivujen osoitteet ja nimet on laitettu taulukkoon, jolloin niitä voi käsitellä näppärästi.

*** navi.php
<?php
// valikon sivujen osoitteet ja nimet
$linkit = array(array("sivu1.php", "Sivu 1"),
                array("sivu2.php", "Sivu 2"),
                array("sivu3.php", "Sivu 3"));

// selvitetään nykyinen sivu
$sivu = basename($_SERVER['PHP_SELF']);

// näytetään valikko
foreach ($linkit as $linkki) {
    $kohde = $linkki[0];
    $nimi = $linkki[1];
    // korostetaan nykyisen sivun linkki
    if ($kohde == $sivu) {
        $lisa = "style=\"background:red\"";
    } else {
        $lisa = "";
    }
    echo "<a href=\"$kohde\" $lisa>$nimi</a><br>";
}
?>

*** sivu1.php
<?php
include("navi.php");
?>
<h1>Sivu 1</h1>

*** sivu2.php
<?php
include("navi.php");
?>
<h1>Sivu 2</h1>

*** sivu3.php
<?php
include("navi.php");
?>
<h1>Sivu 3</h1>

Teuro kirjoitti:

Mikäs ongelma noissa class määreissä oikein on?

Ei niissä ole mitään vikaan, päinvastoin. Yritän vain päästä mahdollisimman vähällä vaivalla nettisivujen päivittämisessä: lisätessä uutta sivua ei tarvitse muokata jokaista sivua...

Täytyypä kokeilla tuota koodia...

Flatologi kirjoitti:

Yritän vain päästä mahdollisimman vähällä vaivalla nettisivujen päivittämisessä: lisätessä uutta sivua ei tarvitse muokata jokaista sivua...

Miksi uutta sivua lisättäessä pitäisi koskea muihin sivuihin muutoinkaan. Laiskuus on kyllä hyvä asia, koska sillä tavalla saa yleensä helpoimmat ratkaisut aikaan.

Viittasin tuolla lähinnä siihen, että aikaisemmin sivulinkit olivat itse sivussa, jolloin lisätessä uuden sivun (ja linkin) joutui muokkaamaan myös muita sivuja linkkien osalta.

Kun tuo php ei ole meikäläisellä juurikan hallussa, niin kysyisin kuinka tuossa voisi vielä muuttaa esim. tekstin väri valkoiseksi, kursivoida ym. ym.

Kaikki valitun linkin CSS-muotoilut voi kirjoittaa samaan kohtaan.

Yllä olevassa koodissa lukee "background:red", eli taustaväri on punainen.

Jos kirjoitat sen tilalle "background:red;color:white;font-style:italic", taustaväri on punainen, tekstin väri on valkoinen ja teksti on kursivoitu.

Mielestäni kannattaisi tässä heti opetella käyttämään id:tä tai class:ia ja laittamaan ne tyylit sinne tyylitiedostoon, jonne ne kuuluvat. Aika heikkoa lähteä myöhemmin muuttelemaan koodia joka on täynnä noita style-muotoiluja...

Kiitos, Antti. Puolipisteellähän ne tietty... Oishan sen itekin tajunnut jossain vaiheesssa.

Ja Reca: css:n id:t ja class:t hallussa, mutta ei niilläkään ihmeisiin pysty. Ja vain idiootti laittaa html-koodiin style-muotoiluja...

Flatologi kirjoitti:

Ja vain idiootti laittaa html-koodiin style-muotoiluja...

Sinä oikeastaan juuri nyt panet html-koodiin style-muotoiluja, joskin php:een kautta. :)

no joo, periaatteessa, mutta kyseessä include toiminnon kautta pelkkä linkkipalkki. Eli ei siihen varsinaiseen sisältöön mitään style-muotoiluja tule. Ja jos joutuu jotain muokkaamaan niin ei tarvitse koskea kuin yhteen tiedostoon.

Edit:
Pitkät piuhat... voihan siihen php-koodin tulostukseen laittaa jonkun class:n, jolla määrittää avoinna olevan sivun linkin tyylin.

Oletko mahdollisesti ymmärtänyt miten id ja class toimii? Varmuudeksi pieni selostus...

Kun määritellään jollekkin elementille id/class, niin se kyseinen id/class "pitää" määritellä css-tiedostossa (voi sen määritellä head-osassakin). Eli siellä css-filussa sitten kerrotaan miltä se näyttää.

Toisin sanottuna laitat nuo kaikki nykyisessä style-atribuutissa olevat määrittelyt sinne css-tiedostoon sen halutun id:n/class:n kohtaan. Muutos ei vaikuta mitenkään toimintaan, mutta koodi selkeytyy huomattavasti. Lisäksi myöhemmin ulkoasua on helpompi muuttaa. Ei tarvitse kajota kuin css-tiedostoon, joka on tarkoitettu ulkoasuseikkoja varten.

Toivottavasti osasin selittää asiat tarpeeksi fiksusti, ymmärrettävästi ja edes vähän oikeilla termeillä. "Fiksummat saa korjata" ;-)

On hallussa, usko pois.

Asia selvä... :-)