WWW-julkaiseminen-kurssin FAQ
- Kurssin sivustoon liittyvät kysymykset
- Harjoitustyöhön liittyvät kysymykset
- Mihin palvelimeen otan yhteyttä?
- Miksi .htaccess-tiedosto ei näy SSH File Transferissa?
- Saanko käyttää harjoitustyössä PHP:tä?
- Miten teen harjoitustyössä tarvittavan lomakkeen käsittelyohjelman?
- Miten saan tehtyä toista kieltä olevia dokumentteja, esimerkiksi venäjää tai kiinaa?
- Mitä teen, jos en ehtinyt palauttaa harjoitustyön suunnitelmaa ajoissa lähiopetuskurssilla?
- Palvelinasetuksiin liittyviä kysymyksiä
- Miksi kielenvalinta ei toimi, mitä pitäisi tehdä?
- Miksi harjoitustyöni ei näy WWW:ssä? Miksi viite hakemistoon ei näytä nettisivua?
- Miksi salasanasuojaukseni ei toimi?
- Internet Explorer herjaa The XML page cannot be displayed?
- Internet Explorer näyttää sivun lähdekoodina
- Ohjaan monikieliset sivut omiin hakemistoihinsa. Miksi linkkini menevät rikki?
- Edelleenohjaus herjaa Internal Server Erroria ja tekee loputtoman ohjauksen. Miten voin ohjata hakemiston alihakemistoon?
- Edelleenohjaus antaa Server Errorin (500)! Missä vika?
- Miksi Nettipoliisi valittaa mediatyypistä? Miksi application/xhtml+xml -määritys ei toimi?
- Miksi monet sivustoni linkeistä ovat edelleenohjattuja (301 Moved Permanently)?
- Miksi alihakemistoissani olevat sivut eivät näy etusivun monikielisyysasetuksien jälkeen?
- Olen laittanut vaikka mitä asetuksia .htaccess-tiedostoon, mutta mikään ei toimi! Missä vika?
- XHTML-ongelmat ja ratkaisut
- Mitä tarkoitetaan sivustonavigoinnilla ja link-elementeillä?
- Mitä tarkoittaa tabindex ja miten se tehdään?
- Millä voin tarkistaa www-sivuni linkkien toimivuuden?
- Onko HTML-Kitistä versiota Windows XX:lle tai Linuxille?
- label-elementin käyttö lomakkeissa?
- Miten saan tehtyä XHTML:llä sisäkkäisiä listoja?
- Miksi validaattori herjaa linkissä olevista tuntemattomista entiteeteistä (unknown entity)?
- CSS:n mediatyyppiongelmat
- CSS-ongelmat ja ratkaisut
- Miten saan listoilta listamerkit pois?
- Miten saan muotoiltua listan vaakasuuntaan?
- Miten saan vaakasuuntaisen listan lista-alkiot eroteltua toisistaan?
- Miksi asemointini ei toimi IE:ssä?
- Miksi asemointini ei toimi Operassa?
- Miksi asemoimattomat lohkot sijoittuvat mielivaltaisesti?
- Miksi CSSCheck valittaa värimäärityksistäni?
- Mihin määrittelen kuvan pituuden ja korkeuden?
- Miten varaan CSS:ssä kuvalle tilaa? Voiko määritystä tehdä mitenkään suhteellisena?
- Miten saan keskitettyä sivulle haluamani elementit?
- Miten saan määriteltyä kuvat vasempaan tai oikeaan laitaan tai keskelle?
- Miten saan tekstin ja kuvan määriteltyä vierekkäin?
- Miten saan poistettua kuvalinkistä reunuksen?
- Miten taustakuva saadaan määritettyä CSS-tiedostoon?
- Miten CSS:llä voidaan määritellään popup-ikkunoita?
- Miten sivun saadaan jaettua useampaan osaan CSS:n avulla?
- Miten HTML-dokumentille voidaan määritellä monta eri CSS-tiedostoa?
- Miten taulukko saadaan keskitettyä CSS:n avulla?
- Mistä muualta voin etsiä tietoa?
Tälle sivulle muodostuu ajankuluessa WWW-julkaiseminen-kurssin FAQ.
Kurssin sivustoon liittyvät kysymykset
Saanko käyttää kurssin lomakkeenkäsittelyohjelmia (CGI, PHP) muilla kuin harjoitustyösivuilla?
Et saa ilman lupaa.
Millä ohjelmalla kurssin videomateriaalia saa katsottua?
Windows Media Player 9-12:llä. Tarkemmin asiasta tietoa osoitteessa http://appro.mit.jyu.fi/doc/video/.
Harjoitustyöhön liittyvät kysymykset
Mihin palvelimeen otan yhteyttä?
jalava.cc.jyu.fi ja halava.cc.jyu.fi -palvelimien html-hakemistoon siirretyt tiedostot näkyvät osoitteessa:
http://users.jyu.fi/~omatunnus/
Miksi .htaccess-tiedosto ei näy SSH File Transferissa?
Kaikki .-alkuiset tiedostot ovat piilotiedostoja. Nämä saa näkyviin SSH File Transferissa valinnalla View | Show Hidden Files.
Saanko käyttää harjoitustyössä PHP:tä?
Voit käyttää, mutta huomioi harjoitustyön teknisissä vaatimuksissa olevat kohdat. PHP:n käyttäminen tapahtuu täysin omalla vastuulla, eivätkä kurssin opettajat neuvo PHP-ongelmissa.
Miten teen harjoitustyössä tarvittavan lomakkeen käsittelyohjelman?
Ohjelmaa ei tarvitse tehdä, vaan käytät Petri Heinosen, Tommi Lahtosen ja Jukka Mäntylän kurssia varten tekemää CGI-ohjelmaa. Tarvittavan tunnuksen ja salasanan ohjelman käyttöön löydät Korpista kurssille ilmoittauduttuasi.
Miten saan tehtyä toista kieltä olevia dokumentteja, esimerkiksi venäjää tai kiinaa?
- Käyttöjärjestelmään (Windows) on asennettava ensin kyseisen kielen tuki, jolloin näppäimistöltä saadaan oikeanlaisia merkkejä aikaiseksi. Mikroluokissa kielen saa valittua tehtäväpalkissa olevasta kielenvalinta-painikkeesta.
- XHTML-dokumentille on valittava sellainen merkistö, joka tukee kyseisen kielen merkkejä. Hyvä valinta monia kieliä varten on Unicode-standardi UTF-8. Oletusmerkistön voi vaihtaa esimerkiksi jEditissä valinnalla Utilies | Global Options | General | Default character encoding. Dokumenttia avattaessa merkistön voi päättää suoraan valinnalla Commands | Encoding.
- Editorin fontti on vaihdettava sellaiseksi, jossa kyseisen kielen merkit näkyvät. jEditissä fontin voi vaihtaa valinnalla Utilities | Global Options | Text Area | Text font. Esimerkiksi kiinaa voisi kirjoittaa fontilla SimSun.
- XHTML-dokumenttiin on määriteltävä oikeat määreet
kieliasetuksille. xml-deklaraatioon pitää määrätä oikea
merkistö, näissä tapauksissa esimerkiksi
<?xml version="1.0" encoding="UTF-8" ?>
Lisäksi html-elementtiin on määrättävä millä kielellä teksti on kirjoitettu. Esimerkiksi:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
tai
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
Mikäli tekstin kieli vaihtuu kesken dokumentin, niin oletuskielestä poikkeava lohko on merkittävä erikseen xml:lang-attribuutilla varustettuna. Esimerkiksi:
<p xml:lang="en">This is a paragraph in English</p>
- Lopuksi eri kieliversiot voi tallentaa samaan hakemistoon
nimillä, jotka ovat muotoa
index.[kielimääre].html
ja tämän jälkeen määrätä palvelinta palauttamaan hakemistosta sen kielinen dokumentti, joka on määrätty selaimen kieli-asetuksessa (toimii kaikissa uusissa selaimissa, myös IE:ssä).
Mitä teen, jos en ehtinyt palauttaa harjoitustyön suunnitelmaa ajoissa lähiopetuskurssilla?
Voit ilmoittautua Korpissa vastaavalle verkkokurssille. Verkkokurssilla harjoitustyön suunnitelmia voi palauttaa ympäri vuoden.
Palvelinasetuksiin liittyviä kysymyksiä
Miksi kielenvalinta ei toimi, mitä pitäisi tehdä?
Tässä ohjeet kielenvalinnan tekemiseksi:
http://appro.mit.jyu.fi/doc/www/apache/kielivalinta/
Jos ongelmia vielä tulee, tarkista seuraavat kohdat:
- .htaccess ja index.var eivät ole XHTML-dokumentteja, vaan Apachen käyttämiä asetustiedostoja, niihin ei siis tule mitään XHTML-elementtejä.
- Tarkista, että kukin komento on omalla rivillään, eikä riveillä ole ylimääräisiä merkkejä.
- #-merkkiset rivit ovat kommentteja, ne eivät saa tulla useille riveille.
- Jos käytät SSI-komentoja, niin varmista, että olet määrännyt
text/html-mediatyypin .shtml-dokumenteille:
AddHandler Server-Parsed .shtml AddType text/html .shtml
Miksi harjoitustyöni ei näy WWW:ssä? Miksi viite hakemistoon ei näytä nettisivua?
Harjoitustyöhakemisto pitää siirtää kokonaisuudessaan jalava.cc.jyu.fi-palvelimen html-hakemistoon. Tällöin harjoitustyöhakemisto näkyy osoitteessa http://users.jyu.fi/~tunnus/harkkahakemisto/. Hakemiston sisällä täytyy olla luonnollisesti jokin XHTML-dokumentti, jonka palvelin voi antaa selailijalle. Tavallisesti tämän tiedoston nimi index.html. Hakemistosta annettavan oletustiedoston voi muuttaa toiseksi luomalla harjoitustyöhakemistoon .htaccess-nimisen tiedoston ja kirjoittamalla sinne esimerkiksi komennon:
DirectoryIndex index.var index.shtml index.html index.php
Tässä tapauksessa ensimmäisenä hakemistosta tarjotaan index.var-nimistä tiedostoa, toiseksi index.shtml-nimistä tiedostoa ja niin edelleen.
Miksi salasanasuojaukseni ei toimi?
Todennäköisin syy salasanasuojauksen toimimattomuuteen on väärin määritelty polku käyttäjätunnustiedostoon:
AuthUserFile /foo/bar/tunnus/.users
Internet Explorer herjaa The XML page cannot be displayed?
Ongelmana ovat .shtml-tiedostot, jotka Apache-palvelin lähettää tavallisesti text/xml-tyyppisenä. IE pyrkii näyttämään tämän perusteella nettisivun XML-dokumenttipuuna, mutta ei onnistu siinä ja herjaa. Ongelma korjaantuu, kun harkkahakemiston sisällä olevaan .htaccess-tiedostoon kirjoittaa rivit:
AddHandler Server-Parsed .shtml AddType text/html .shtml
Internet Explorer näyttää sivun lähdekoodina
Ongelmana ovat .shtml-päätteiset xhtml-tiedostot, jotka Apache 2 -palvelin lähettää tavallisesti text/xml-tyyppisenä. IE pyrkii näyttämään tämän perusteella nettisivun pelkkänä XML-dokumenttipuuna. Ongelma korjaantuu, kun harkkahakemiston sisällä olevaan .htaccess-tiedostoon kirjoittaa rivit:
AddHandler Server-Parsed .shtml AddType text/html .shtml
Katso myös demo 7.
Ohjaan monikieliset sivut omiin hakemistoihinsa. Miksi linkkini menevät rikki?
Apachen type-map ei ohjaa selainta alihakemistoon, vaan antaa .var-tiedostossa (tai muussa sellaisessa) määritellyn tiedoston selaimelle. Selaimen URL pysyy edelleen samana. Mikäli nyt viittaukset ovat suhteellisia alihakemistoon nähden, niin linkit menevät rikki. Paras tapa on sijoittaa monikieliset sivut samaan hakemistoon. Toinen vaihtoehto on muuttaa alihakemistossa olevan sivun viitteet osoittamaan suhteessa siihen hakemistoon, joka jää selaimen URL:iin. Tällöin sivustolla ei saa olla suoraa linkkiä alihakemistoon.
Edelleenohjaus herjaa Internal Server Erroria ja tekee loputtoman ohjauksen. Miten voin ohjata hakemiston alihakemistoon?
Edelleenohjaus tapahtuu selaimesta saadun osoitteen loppuosan perusteella, kun alusta otetaan pois palvelimen nimi ja protokolla (esim. http://users.jyu.fi/). Jos nyt ohjaus tapahtuu hakemistosta alihakemistoon, niin selain joutuu edelleenohjauskierteeseen, jossa hakemistonpolun alkuosa korvautuu aina uudelleen, kunnes palvelin päättää pistää pelin poikki. Ratkaisu ongelmaan on ohjata vain jokin tietty yksittäinen tiedosto kyseisen hakemiston alihakemistoon. Esim.
Redirect permanent /~anjoekon/harkka/testi/index.html http://users.jyu.fi/~anjoekon/harkka/testi/alihakemisto/
Edelleenohjaus antaa Server Errorin (500)! Missä vika?
.htaccess-tiedostoon annettavat komennot pitää laittaa aina yhdelle riville siten, että komento on alussa ja parametrit heti sen jälkeen. Jos pico:lla kirjoittaa liian pitkän rivin, niin se tyypillisesti rivittää sen kahdelle riville, jolloin palvelin ei ymmärrä edelleenohjaavaa komentoa. Käynnistä pico komennolla
pico -w .htaccess
niin rivitystä ei tapahdu. Siirrä edelleenohjaukseen liittyvät kohdat yhdelle riville. Pääteyhteysikkunan koon muuttaminen riittävän isoksi saattaa myös auttaa tähän ongelmaan.
Miksi Nettipoliisi valittaa mediatyypistä? Miksi application/xhtml+xml -määritys ei toimi?
Mikäli WWW-palvelin antaa XHTML-dokumentin mediatyypiksi jotain muuta kuin application/xhtml+xml, niin Nettipoliisi älähtää tästä. Tyypillisesti palvelin antaa tyypiksi text/html tai jotain vastaavaa, vaikka W3C:n suositus on käyttää Nettipoliisin ehdottamaa mediatyyppiä. Asiasta lisää vanhassa demo 8:ssa.
Tietohallintokeskuksen Apache-palvelimella on ongelma mediatyyppimääritysten kanssa. Viitteet hakemistoihin antavat tyypin text/html, vaikka mediatyyppiasetukset olisivatkin .htaccess-tiedostossa kunnossa. Suorat viitteet tiedostoihin ja type-map- asetuksissa määrätyt dokumentit saavat sen sijaan oikean mediatyypin. Tee määritykset edellä mainitun demon 8:n mukaan, mutta älä välitä vaikka tyyppi ei olisikaan aina oikein.
Miksi monet sivustoni linkeistä ovat edelleenohjattuja (301 Moved Permanently)?
Sivustosi on todennäköisesti jaettu kansioihin ja olet laittanut sivuille näihin osoittavia linkkejä. Luultavasti olet kuitenkin unohtanut linkeistä viimeisen kauttaviivan (/), joka kertoo, että linkki todellakin osoittaa kansioon eikä samannimiseen tiedostoon:
<a href="kukkuu">Tämä linkki osoittaa kukkuu-nimiseen tiedostoon</a>
<a href="kukkuu/">Tämä linkki osoittaa kukkuu-nimiseen kansioon</a>
Apache on yleensä säädetty toimimaan niin, että jos halutun nimistä tiedostoa (kukkuu) ei löydy, niin yritetään suoraan vastaavaa kansiota (kukkuu/). Tämä uusi yritys tehdään lähettämällä selaimelle kiinteä uudelleenohjaus eli 301 Moved Permanently.
Kirjoittamalla kansioihin osoittavat linkit oikein nopeuttaa sivuston toimintaa ja vähentää palvelimen rasitusta, koska turha edelleenohjaus jää välistä.
Miksi alihakemistoissani olevat sivut eivät näy etusivun monikielisyysasetuksien jälkeen?
DirectoryIndex-määritys periytyy alihakemistoihin, jolloin viitattaessa hakemistoon palvelin yrittää tutkia hakemistosta index.var-tiedostoa. DirectoryIndex-komennolle voi määritellä myös useampia vaihtoehtoja, jolloin palvelin yrittää annetun järjestyksen mukaan etsiä tiedostoja hakemistoon viitattaessa:
DirectoryIndex index.var index.shtml index.html
Olen laittanut vaikka mitä asetuksia .htaccess-tiedostoon, mutta mikään ei toimi! Missä vika?
Onhan kaikilla lukuoikeus .htaccess-tiedostoon? Onhan .htaccess-tiedosto html-hakemiston alla olevassa harjoitustyöhakemistossa?
XHTML-ongelmat ja ratkaisut
Seuraavassa muutamia XHTML:ään liittyviä ongelmia ja ratkaisuja ongelmiin.
Mitä tarkoitetaan sivustonavigoinnilla ja link
-elementeillä?
link
-elementeillä voidaan toteuttaa joustava sivuston sisäinen
navigointi, jota ovat hyödyntäneet ainakin Mozilla- ja Opera-selaimet.
Navigointipalkin saa päälle Mozillassa View | Show/Hide | Site Navigation Bar | Show Always
ja Operassa navigointilinkit löytyvät valikosta Navigation | Site Navigation.
link
-elementeillä kerrotaan dokumenttien välisistä suhteista
sivustolla (esim. hakukoneille ja selaimille). Tavallisin link
-elementin
käyttötapa on ilmoittaa mitä CSS-tyylitiedostoa sivulla käytetään.
link
-elementit sijoitetaan head
-elementin sisään.
Esimerkiksi:
<head> <link title="Oletustyyli" rel="StyleSheet" href="/appro2003.css" type="text/css" media="all"/> <link rev="Made" href="http://www.iki.fi/hazor/" title="Tommi Lahtonen"/> <link rel="Copyright" href="/copyright.html" title="Copyright Notice"/> <link rel="First" href="../luento1/" title="XHTML-elementit ja kurssin järjestelyt" /> <link rel="Prev" href="../luento2/" title="CSS (Cascading Style Sheets)"/> <link rel="Next" href="../luento4/" title="WWW-lomakkeet"/> <link rel="Start" href="../../" title="WWW-julkaiseminen ITK024"/> <link rel="Contents" href="../" title="Luennot"/> <link rel="Parent" href="../" title="Luennot"/> <link rel="Last" href="../luento12/" title="Luento 1"/> <link rel="Search" href="/haku/" title="Haku"/> </head>
- First
- Kertoo viitteen samassa hakemistossa tai samalla tasolla olevista dokumenteista ensimmäiseen.
- Prev
- Edellinen samalla tasolla oleva dokumentti (tämä ei siis viittaa edelliseen tasoon, eikä pidäkään toimia kuten selaimen Back-toiminto).
- Next
- Seuraava saman tason dokumentti (esim. luento, tuote, esittelysivu...).
- Last
- Viimeinen saman tason dokumentti.
- Parent
- Edellisen tason dokumentti (esim. yksittäisen tuotteen esittelystä tietyn tuotekategorian luetteloon).
- Contents
- Viite sisällysluetteloon (esim. nettioppaassa luetteloon, jossa linkit alasivuille).
- Start
- Viittaus etusivuun.
Mitä tarkoittaa tabindex ja miten se tehdään?
tabindex-attribuutilla määritellään missä järjestyksessä lomakkeen lomake-elementit (input, select, textarea) käydään läpi, kun elementistä toiseen siirtymisessä käytetään näppäimistöltä tabulaattorinäppäintä. Kullekin lomake-elementille on määriteltävä tämä ominaisuus ja sen arvoksi järjestysnumero (1, 2, 3, ...) monennellako tabulaattorin painalluksella elementti tulee valituksi. Numerointi on aloitettava ykkösestä. Esimerkiksi:
<input type="text" id="nimi" tabindex="1" name="nimi" value="Matti Meikäläinen" />
Lisää tietoa W3C:n HTML 4.0 -spesifikaatiossa (esim. numeron 0 merkityksestä).
Millä voin tarkistaa www-sivuni linkkien toimivuuden?
Linkkien tarkistamiseen löytyy moniakin ohjelmia. Yksi käyttökelpoisimmista lienee W3C Link Checker.
Muita hyödyllisiä apuohjelmia voi tutkailla kurssin omalta WWW-työkalusivulta.
Onko HTML-Kitistä versiota Windows XX:lle tai Linuxille?
HTML-Kit toimii kaikilla uudemmilla Windows-versioilla:
label-elementin käyttö lomakkeissa?
label-elementtien käyttö voi aiheuttaa harjoitustyössä paljon vaikeuksia. Seuraavassa lyhyet ohjeet label-elementin käytöstä WWW-lomakkeissa.
- Jokaisen lomake-elementin (select, text, radio, checkbox tai textarea) on käytettävä label-elementtiä.
- label-elementti yhdistetään lomake-elementtiin
for-atrribuutin avulla. Lomake-elementin
id-attribuutin arvon on oltava sama kuin
label-elementin for-attribuutin arvon.
- id ei saa alkaa numerolla (esim. id="22" EI OLE SALLITTU).
- id-attribuuutissa ei saa olla erikoismerkkejä tai välilyöntejä (esim. id="Suuri luku" EI OLE SALLITTU).
- Jokaisen label-elementin on sijaittava ennen lomake-elementtiä.
Seuraavassa esimerkki label-elementin käytöstä.
<p> <label for="nimi">Nimesi</label><input type="text" name="kayttajan_nimi" id="nimi" /> </p> <fieldset> <legend>Ammatti</legend> <p> <label for="metsuri">Metsuri</label><input type="radio" name="ammatti" id="metsuri" /> <label for="metallimies">Metallimies</label><input type="radio" name="ammatti" id="metallimies"/> <label for="joku_muu">Joku muu</label><input type="radio" name="ammatti" id="joku_muu" /> </p> </fieldset>
Miten saan tehtyä XHTML:llä sisäkkäisiä listoja?
Yleisin virhe sisäkkäisiä listoja kirjoitettaessa on unohtaa sisällyttää sisempi lista jonkin ulomman listan lista-alkion (li) sisälle.
<ol>
<li>Ulomman listan ensimmäinen alkio</li>
<li>Ulomman listan toinen alkio</li>
<li>Ulomman listan kolmas alkio, jonka sisäll sisempi lista:
<ul>
<li>Sisemmän listan ensimmäinen alkio</li>
<li>Sisemmän listan toinen alkio</li>
<li>Sisemmän listan kolmas alkio</li>
</ul>
Ulomman listan kolmas alkio loppuu
</li>
<li>Ulomman listan neljäs alkio</li>
</ol>
Miksi validaattori herjaa linkissä olevista tuntemattomista entiteeteistä (unknown entity)?
Kirjoittamasi linkki on luultavasti jotakin tämän näköistä:
<a href="foobar?eka=jotakin&toka=bar&kolmas=foofoo">Linkkiteksti</a>
Urlissa on siis &-merkkejä, joilla normaalisti XHTML:ssä merkitään
erikoismerkkejä yms. Kaikki &-merkit pitää koodata muotoon &
,
niin validaattorikin lakkaa herjaamasta ja linkin toimivuus varmistuu.
Yllä oleva esimerkki pitäisi siis kirjoittaa muotoon:
<a href="foobar?eka=jotakin&toka=bar&kolmas=foofoo">Linkkiteksti</a>
CSS:n mediatyyppiongelmat
Miksi CSS-validaattori varoittelee mediatyyppimäärityksistäni, vaikka ne ovat oikein?
CSS-validaattorit eivät ymmärrä standardin mukaista handheld-mediatyyppiä eivätkä print-median @page-määrettä. Voitte ohittaa näihin liittyvät varoitukset!
Miksi en saa Operan Small Screen Rendering -tilaa näkymään handheld-mediatyypin mukaan?
Small Screen Rendering -tilaa käyttäessäsi muista kaventaa selain n. 240 pikseliä leveäksi!
Sivun lataaminen on tehtävä ainakin Operan vanhemmissa versiossa normaalitilassa. Toimi seuraavan kaavan mukaan:
- Lataa sivu normaalitilassa.
- Siirry Small Screen -tilaan valitsemalla View | Small Screen.
- Tutkit miltä sivu näyttää ja muuta tarvittaessa CSS:ää.
- Vaihda takaisin normaalitilaan View | Small Screen.
- Lataa sivu uudelleen CTRL + R.
- Palaa kohtaan 2.
Jos lataat sivun uudelleen (CTRL + R) Operan ollessa Small Screen -tilassa, niin Opera unohtaa tekemäsi handheld-tilan CSS-asetukset ja näyttää sivun kuten se näkyisi ilman mitään handheld-määrityksiä.
Uusimmissa Operan versioissa Small Screen Rendering -tilaa ei ole enää mahdollista käyttää.
Miksi mediatyypin vaihtaminen application/xhtml+xml-muotoon rikkoo sivuni ulkoasun?
Oikean mediatyypin käyttäminen aiheuttaa myös pieniä muutoksia CSS:n toimintaan. Normaalisti text/html-muodossa jaetuissa dokumenteissa body-elementti toimii CSS:n kannalta uloimpana juurielementtinä, vaikka oikeasti uloin elementti on html. Mediatyypin muuttaminen voi nyt aiheuttaa, että sivulle ilmestyy esim. valkoinen marginaali mikä johtuu siitä, että selain tulkitsee nyt myös html-elementille CSS-asetuksia. Tästä aiheutuvat ongelmat on helpointa kiertää määräämällä CSS:ssä html-elementille taustaväriksi sama kuin body-elementillä ja nollaamalla marginaalin, rajan ja paddingin. Myös body-elementin määritykset kannattaa tarkistaa.
html { margin: 0; padding: 0; border: 0; }
Kannattaa muista myös kirjoittaa elementtien nimet pienillä kirjaimilla CSS-tiedostoon. Oikean mediatyypin yhteydessä selain erottelee isoilla ja pienillä kirjoitetut elementtien nimet niin kuin pitääkin.
H1 { /* tämä ei toimi XHTML:n kanssa */
...
}
h1 { /* tämä toimii XHTML:n kanssa */
...
}
Lisätietoja: Sending XHTML as text/html Considered Harmful
CSS-ongelmat ja ratkaisut
Seuraavassa muutamia CSS:ään liittyviä ongelmia ja ratkaisuja ongelmiin.
Miten saan listoilta listamerkit pois?
Määritä halutun lohkon li-elementille CSS:ssä:
list-style-type: none;
Miten saan muotoiltua listan vaakasuuntaan?
Määritä halutun lohkon li-elementille CSS:ssä:
display: inline;
Miten saan vaakasuuntaisen listan lista-alkiot eroteltua toisistaan?
Käytä sopivaa erotinmerkkiä. Erottamisen voi tehdä esimerkiksi pystysuoralla viivalla, jolloin helpoiten homman tekee määräämällä lista-alkion vasempaan laitaan reunaviiva, esimerkiksi:
border-left: 1px solid black;
Merkin lisäämisen lista-alkion eteen saa sopivilla CSS-valitsimilla. Esimerkiksi:
li:before { color: yellow; content: "*"; }
Puutteellisen CSS-tuen vuoksi kaikki selaimet eivät tue kyseistä selektoria.
Miksi asemointini ei toimi IE:ssä?
Vanhempien IE-selainten CSS-tuki on puutteellinen. position: fixed -määre ei toimi ollenkaan IE 7 -versiota aiemmissa versioissa ja aiheuttaa sijoitteluongelmia muiden elementtien kanssa. IE:ssä on havaittu ongelmia myös suhteellisten kokojen laskutavassa (pitäisi laskea isäelementin koon mukaan).
IE:n asemointiongelmat voi kiertää seuraavasti CSS:ssä:
/* Yhteiset määritykset IE:lle ja muille selaimille */ .lohko { position: absolute; /* toimii myös IE 6:ssa lähes oikein */ left: 5%; top: 5%; background-color: #123456; } /* Määritykset, jotka toimivat esim. Firefoxissa ja Operassa */ body>.lohko { position: fixed; }
Miksi asemointini ei toimi Operassa?
Operassa on havaittu ainakin seuraavanlainen asemointibugi: Jos lohko on asemoitu suhteessa selainikkunan tai vanhempielementin kokoon (prosentteina) ja lohkon koko on määritelty jotenkin muuten (esim. em), niin Opera ei päivitä reaaliajassa lohkon paikkaan. Painamalla Reload-painiketta lohko asemoituu oikein.
Miksi asemoimattomat lohkot sijoittuvat mielivaltaisesti?
Mikäli käytetään CSS2:n position-asemointia, on syytä asemoida sivun kaikki elementit sillä. Jos esimerkiksi jokin elementti on asemoitu määrityksillä
position: absolute; top: 3%; left: 3%;
niin toiselle lohkolle, jonka paikkaa ei haluta kiinnittää sivulla, pitää antaa CSS:ssä määre
position: relative;
ilman muita asemointimäärityksiä.
Miksi CSSCheck valittaa värimäärityksistäni?
CSSCheck antaa usein varoituksia, joilla se yrittää vihjata miten varmistaa CSS-koodinsa ongelmattoman toiminnan myös mahdollisimman vanhoilla selaimilla. Varoitukset esiintyvät yleensä seuraavanlaisissa CSS-koodeissa:
body {
background-color: aqua;
}
CSSCheck valittaa seuraavalla tavalla:
Warning: To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.
Eli aina kun määrittelee taustavärin, niin olisi myös hyvä määritellä taustakuva. Jos kuvaa ei ole, niin määrittely none riittää. Tämä ehkäisee mahdollisia ongelmia, jos käyttäjä onkin määritellyt selaimensa käyttämään aina jotakin taustakuvaa. Tarkistin antaa myös toisen varoituksen:
Warning: The shorthand background property is more widely supported than background-color.
Tämä tarkoittaa, että CSS-ominaisuus background
toimii paremmin joissakin
vanhoissa selaimissa kuin ominaisuus
background-color
. Background-ominaisuudellahan voi suoraan määritellä
taustan värin ja taustakuvan yms. Ei siis tarvitse käyttää erillistä
ominaisuutta kaikkiin. Ongelma voidaan korjata muuttamalla CSS-koodi seuraavanlaiseksi:
body {
background: aqua none;
}
Tämä määrittelee taustaväriksi aquan ja taustakuvaksi ei mitään (none) käyttäen
background
-ominaisuutta.
Mihin määrittelen kuvan pituuden ja korkeuden?
Kuvan koon voi määrittää suoraan XHTML-tiedostoon img-elementin yhteyteen. Näin vanhimmatkin selaimet, jotka eivät vielä ymmärrä CSS:ää, osaavat heti varata kuvalle tarpeeksi tilaa. Toinen vaihtoehto on varata sivulta sopivan kokoinen lohko CSS:n avulla ja laittaa kuva tämän lohkon sisälle. Kuvan todelliseen koon ja määritellyn pituuden ja korkeuden on oltava samoja!
<img src="kuva.jpg" alt="Longyearbyen" width="372" height="250" />
Miten varaan CSS:ssä kuvalle tilaa? Voiko määritystä tehdä mitenkään suhteellisena?
Kuvien koot ovat kiinteitä, joten kuvia käytettäessä on tyypillisesti varattava kiinteän kokoinen tila kuvalle. Kiinteä koko on tässä tapauksessa aivan sallittua. Määrityksen voi tehdä suhteellisena, mutta tämä voi aiheuttaa sijoittelu- ja näkyvyysongelmia. Opera ja Firefox osaavat skaalata suhteelliseen kokoon määriteltyä kuvaa, mutta ainakaan vanhemmat Internet Explorit eivät.
Miten saan keskitettyä sivulle haluamani elementit?
CSS:stä löytyy ominaisuus nimeltään text-align, joka on tarkoitettu kappaletason elementin sisältämien tekstitason elementtien keskittämiseen vaakasuunnassa. Varmin temppu on määritellä vaikkapa uusi aliluokka, joka hoitaa keskityksen mille tahansa:
.keskitys {
text-align: center;
}
Uutta .keskitys aliluokkaa voi nyt käyttää esimerkiksi div-elementin yhteydessä ja näin keskittää vaikkapa kuvan:
<div class="keskitys">
<img src="kuva.jpg" alt="Longyearbyen" width="372" height="250" />
</div>
Pystysuunnassa voi keskityksen määritellä tismalleen samaan tapaan käyttämällä vertical-align-ominaisuutta.
Miten saan määriteltyä kuvat vasempaan tai oikeaan laitaan tai keskelle?
Helpoiten kuvien tai minkä tahansa elementtien paikan määrittely onnistuu muutamalla yleiskäyttöisellä CSS-tyylillä:
.vasen {
text-align: left;
}
.oikea {
text-align: right;
}
.keski {
text-align: center;
}
Sijoita ylläolevat tyylit CSS-tyylitiedostoosi ja käytä niitä xhtml-dokumentissasi seuraavasti:
<div class="vasen">
<img src="kuva.jpg" alt="kuvan kuvaus" />
</div>
<div class="oikea">
<img src="kuva.jpg" alt="kuvan kuvaus" />
</div>
<div class="keski">
<img src="kuva.jpg" alt="kuvan kuvaus" />
</div>
Miten saan tekstin ja kuvan määriteltyä vierekkäin?
Minkä tahansa elementtien saaminen rinnakkain onnistuu käyttämällä CSS:n float-ominaisuutta. "Leijutetaan" haluttu elementti näytön vasempaan tai oikeaan laitaan, jonka jälkeen tulevat elementit sijoitetaan "leijutetun" elementin viereen.
Floatin käyttämisestä löytyy esimerkki luentosivuilta
Esimerkiksi halutaan sijoittaa kuva näytön vasempaan laitaan ja tekstikappale kuvan oikealle puolelle. Luodaan seuraavanlainen CSS-tyyli:
.left {
float: left;
}
Käytetään tyyliä XHTML-tiedostossa näin:
<div class="left">
<img src="kuva.jpg" alt="Kuvan seliteteksti" />
</div>
<p>Tämä teksti tulee kuvan oikealle puolelle.</p>
Jos halutaan estää jonkin kappaleen tai muun elementin tuleminen "leijutetun" osan viereen, niin täytyy käyttää CSS:n clear-ominaisuutta. clear-ominaisuudella voidaan kieltää elementin tuleminen vasemmalle, oikealle tai kummalle tahansa puolelle leijutetun kappaleen vierelle.
Edelliseen esimerkkiin voitaisiin lisätä kappale, jonka ei haluta tulevan enää leijutetun kuvan vierelle. Lisätää css:ään tyyli:
p.clear-left {
clear: left;
}
Käytetään tyyliä html-koodissa näin:
<div class="left">
<img src="kuva.jpg" alt="Kuvan seliteteksti" />
</div>
<p>Tämä teksti tulee kuvan oikealle puolelle.</p>
<p class="clear-left">Tämä teksti ei tule kuvan oikealle puolelle,
vaikka sille vielä olisi tilaakin.</p>
Miten saan poistettua kuvalinkistä reunuksen?
Kuvaan tulee joissakin selaimissa reunus eli raja, kun kuva toimii linkkinä. Reunuksen saa helposti pois määrittelemällä CSS-tiedostoon linkin sisällä olevan kuvan reunuksen leveydeksi nollan. Seuraavassa esimerkki asiasta:
a img { border: 0em; }
Jos ulkoasun muotoilemiseen ei käytetä CSS:ää, niin silloin kuvan reunuksen poistaminen joudutaan tekemään suoraan img-elementissä. Tapa on kuitenkin huono, koska sitä ei tueta enää esimerkiksi W3C:n HTML Basic -suosituksessa. Tämän vuoksi reunus kannattaa poistaa aina CSS:n avulla!
<p> <a href="http://appro.mit.jyu.fi/"> <img src="kuva.png" alt="vaihtoehtoteksti" border="0" /> </a> </p>
Miten taustakuva saadaan määritettyä CSS-tiedostoon?
Seuraavassa esimerkki taustakuvan määrittämisestä CSS-tiedoston avulla.
- Varsinainen esimerkki.
- HTML-tiedoston lähdekoodi: tausta.html
- CSS-tiedoston lähdekoodi: tausta.css
Miten CSS:llä voidaan määritellään popup-ikkunoita?
Seuraavassa esimerkki popup-ikkunan määrittämisestä CSS-tiedoston avulla.
- Varsinainen esimerkki.
- HTML-tiedoston lähdekoodi: popup.html
- CSS-tiedoston lähdekoodi: popup.css
Miten sivun saadaan jaettua useampaan osaan CSS:n avulla?
Seuraavassa esimerkki sivun jakamisesta neljään osaa CSS-tiedoston avulla.
- Varsinainen esimerkki.
- HTML-tiedoston lähdekoodi: nelikentta.html
- CSS-tiedoston lähdekoodi: nelikentta.css
Miten HTML-dokumentille voidaan määritellä monta eri CSS-tiedostoa?
Seuraavassa esimerkki useamman CSS-tiedoston käytöstä HTML-dokumentissa.
- Varsinainen esimerkki.
- HTML-tiedoston lähdekoodi: monta.html
Miten taulukko saadaan keskitettyä CSS:n avulla?
Seuraavassa esimerkki määrittämisestä CSS-tiedoston avulla.
- Varsinainen esimerkki.
- HTML-tiedoston lähdekoodi: keskitys.html
- CSS-tiedoston lähdekoodi: keskitys.css
Mistä muualta voin etsiä tietoa?
Useimpiin HTML:ään ja WWW-sivuihin liittyviin kysymyksiin löytyy vastauksia seuraavista paikoista:
CSS-bugeista on koottu kattavat listaukset sivustoille, jotka löydät kurssin linkkilistasta.
WWW-julkaiseminen-kurssin luennoista ja demoista löytyy ohjeita WWW-sivujen tekemiseen, ulkoasun muotoiluun ja palvelinasetuksiin.
Käyttäjien kommentit