Toisinaan sivujen taitto vaatii, että sivun sisäisen kehyksen eli iframen taustan on oltava läpinäkyvä siten, että sivun tausta näkyy sen läpi. Tämän toteuttaminen on CSS:n avulla helppoa ja yksinkertaista.
Oletetaan, että main.html on iframen sisällä näkyvä sivu ja iframe.html se sivu, jolla iframen koodi sijaitsee. Iframen tausta muuttuu läpinäkyväksi, kun siinä näkyvän sivun eli main.html:n taustaväri määritetään läpinäkyväksi.
Main.html:n lähdekoodi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fi-FI">
<head profile="http://gmpg.org/xfn/11">
<style type="text/css">
<!--
body { background-color:transparent; }
-->
</style>
</head>
<body>
Tämä iframessa näkyvä sivu on main.html
</body>
</html>
Läpinäkyvän iframen ongelma piilee kuitenkin siinä, Internet Explorer -selain ei tue käytettyä läpinäkyvyysmuotoilua kunnolla. Tämän vuoksi koodiin joudutaan tekemään joitakin epästandardeja kikkailuja ja korjauksia Internet Exploreria varten. Näiden korjausten jälkeen läpinäkyvän iframen pitäisi toimia oikein kaikilla yleisimmillä selaimilla.
Läpinäkyvyyden määrittämiseen käytetään Internet Exploreria varten kahta ulkoista CSS-tiedostoa. Tallenna siis alla annetut koodipätkät CSS-tiedostoiksi lataa ne sivutilaasi. CSS-tiedostojen tiedostopäätteen tulee olla .css.
Muistiolla tallentaminen onnistuu helposti. Kun painat tallenna, ohjelma aluksi ehdottaa tiedostomuodoksi .txt, ja tiedoston nimi -kohdassa lukee *.txt. Kirjoita tiedoston nimi -kohtaan pelkästään tiedostonnimi.css (huomaa pääte, poista *.txt) ja paina TALLENNA - tiedosto tallentuu .css-muotoisena.
ie.css:
iframe.ifr {
FILTER:chroma(color=#FF98E4);
}
ie2.css:
body {
background-color:#FF98E4;
}
Tallenna alla oleva koodi HTML-tiedostoksi nimellä main.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
body {
background-color:transparent;
}
-->
</style>
<!--[if IE]>
<link rel="stylesheet" href="ie2.css" type="text/css">
<![endif]-->
</head>
<body>
Tämä iframessa näkyvä sivu on main.html
</body>
</html>
Tallenna alla oleva koodi sivuksi iframe.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <!--[if IE]> <link rel="stylesheet" href="ie.css" type="text/css"> <![endif]--> </head> <body> <iframe class="ifr" src="main.html" name="T"></iframe> <br> Tämä sivu on iframe.html </body> </html>
Kun olet tallentanut kaikki neljä ylhäällä annettua tiedostoa, vieraile ensin main.html:ssä. Taustaväri on Internet Explorerilla vaaleanpunainen ja muilla selaimilla valkoinen. Mene tämän jälkeen tiedostoon iframe.html. Siellä on näkyvissä iframe, jossa näkyy tiedosto main.html. Sivulla oleva iframe on kuitenkin läpinäkyvä, eikä sen tausta ole vaaleanpunainen.
KATSO ESIMERKKI TOIMIVASTA IFRAMESTA TÄSTÄ
Katso main.html
Katso ie.css
Katso ie2.css