Moi!
Elikkä kysyisin sellasta, kun index.htm sivulle olen tehnyt taulukon, jossa on neljä solua. Kahdessa ylimmässä solussa on jo kaksi kuvaa.
Kysyisinkin, miten soluun voi sijoittaa nettisivun? eli että solu toimisi ns. framena?
PHP:n include-funktiolla.
Taulukon soluun voi kirjoittaa kaikkia HTML-tageja, jopa kokonaisen nettisivun sisällön. Alussa olevat html-, head-, body- ja muut tagit pitää kuitenkin ottaa pois. Jos palvelimellasi on esimerkiksi PHP, voit liittää sivun taulukkoon tähän tapaan:
<tr><td> <?php include("sivu.txt"); ?> </td>
Tässä sivu.txt sisältää HTML-sivun ilman alku- ja loppumerkintöjä. Kuitenkaan tämä menetelmä ei vastaa täysin kehysten käyttämistä. Linkkien ja kuvien kanssa voi tulla ongelmia, samoin kuin CSS-tyylien. Siksi minä käyttäisin ehkä kehyksiä muistuttavaa iframe-tagia, jos toinen sivu täytyy välttämättä saada taulukon osaksi.
<DIV ALIGN = CENTER>
<title>OO ITE ELEVIS!!!</title>
<LINK href="tyyli.css" rel="stylesheet" type="text/css" >
<table width="700" border="1" cellpadding="5" bordercolor="#003366">
<tr>
<td height="20" bgcolor="#999999"><p>| <a href="index.html">Etusivu</a>
|<a href="karaoke_hae.php" ">Laulun Haku</a> |
</td>
<td>
© Ite elevis.com 2004 <br>
</td>
</tr>
</table>
<table width="700" border="1" cellpadding="5" bordercolor="#003366">
<tr>
<td height = "800">
<?php include("karaoke_hae.php"); ?>
</td>
<td height ="800">
<?php include("karaoke_hae.php"); ?>
</td>
</table>Pyydän anteeksi heti aluksi, että en enää muista, miten tagitus piti laittaa, kun liittää koodia keskusteluun. (mod: tagit lisätty, ohjeet tässä)
Mutta tein sen noin, se kyllä tulostaa taulukon, mutta soluissa ei edelleenkään ole mitään!
PHP ja MySQL ja Apache on asennettu koneelleni.
Sen takia haluan tehdä taulukoinnin, koska mielestäni sivu on fixumman näköinen, kun kaikki osat on omissa lokeroissaan keskellä sivua. Ei varmaan paras tapa tehdä sitä taulukoilla. Jos tiedätte paremman keinon, neuvokaa ihmeessä.
Eli tarkoitus olisi, että sivu keskellä olisi koko sivun sisältö, ja linkeistä avautuvat sivut avautuisivat näihin lokeroihin.
Kyllä sen noin pitäisi mennä. Miltä lopullinen HTML-sivu näyttää (selaimen lähdekoodin näyttö)?
<html>
<body>
<DIV ALIGN = CENTER>
<title>OO ITE ELEVIS!!!</title>
<LINK href="tyyli.css" rel="stylesheet" type="text/css" >
<table width="700" border="1" cellpadding="5" bordercolor="#003366">
<tr>
<td height="20" bgcolor="#999999"><p>| <a href="index.html">Etusivu</a>
|<a href="karaoke_hae.php" >Laulun Haku</a> |
</td>
<td>
© Ite elevis.com 2004 <br>
</td>
</tr>
</table>
<table width="700" border="1" cellpadding="5" bordercolor="#003366">
<tr>tältä se näyttää.
Laitahan suoraan koko koodi (tai vielä parempaa: URL tuohon sivuun). Tuo pätkä loppuu just ennen olennaista kohtaa :)
sivu on mun omalla koneella (localhost)
sivustossa on .php sivuja ja index.htm sivu
sain sen toimimaan, mutta nyt kun painaa solun sisällä olevan sivun linkkejä, selain avaa uuden ikkunan, eli miten voin saaha kaiken avautumaan sulon sisään?
Älä käytä target-attribuuttia. Vilkaseppas vaikka tuota: https://www.ohjelmointiputka.net/keskustelu/7383-target-attribuutti
Vaikuttais olevan samasta aiheesta kyse.
Mä ainaki tekisin näin (yksinkertasesti):
***index.htm <html><head><title>Sivuni</title></head><body> <table border="1" cellspacing="1" width="200"> <tr> <td width="100" align="center"> Katsoppas <a href=kengat.htm target=sisus1>kenkiäni</a> <br>Katsoppas <a href=housut.htm target=sisus1>housujani</a> </td> <td width="100" align="center"><iframe height=100 width=100 src=kengat.htm frameborder=0 name=sisus1></iframe></td> </td> </tr> </table> ***kengat.htm <html><head><title>Minun kenkäni</title></head> <body> Tässä ovat minun kenkäni: <img src=kengat.jpg width=30 height=30> </body> </html> ***housut.htm <html><head><title>Minun housuni</title></head> <body> Tässä ovat minun housuni: <img src=housut.jpg width=30 height=30> </body> </html>
Valittakaa virheistä. :)
Hyi, iframe.
Muistattehan toki, että iframeen pätee samat käytettävyysongelmat, ku tavallisiinki kehyksiin.
Ei pidä tyrmätä iframea periaatteen vuoks. Onko siitä käytännön haittaa tässä tapauksessa?
On. Estää alasivun bookmarkkaamisen, sen osotteen jakamisen esim. IRC:n, päivittämisen, vaikeuttaa skrollaamista ja se ympärystö vie turhaa tilaa ruudulta (korostuu etenki pienessä ikkunassa).
Lisäks kun tuun hakukoneelta, niin navigaatio on jossain hukkapiilossa, ja mikäänhän ei takaa, että hakukone ees seuraa sitä iframen src:tä.
Silloin kannattaa lisätä <head></head> väliin:
<meta name="Robots" content="nofollow">
.
Miten php:llä voi bookmarkata vastaavan sivun?
Mikä vaikeuttaa scrollaamista?
Vai olisiko siis tarkoitus, että tuo ikkuna, johon sivu ilmestyy, olisi se itse scrollattava ja nuo navigaatiosolut juoksevat mukana?
Siihen ei jää ympärystöä sen enempää, kuin taulukon reunus on.
Tässä esimerkki kyseisestä. Nuo sivut ovat vielä työn alla: http://anjalankoskenhsrk.net
Niistä saa kyllä kanssa antaa palautetta.
pikkut kirjoitti:
Tässä esimerkki kyseisestä. Nuo sivut ovat vielä työn alla: http://anjalankoskenhsrk.net
Eipä ollut navigaatiosta tietoakaan, ennen kun kytki JavaScriptin päälle.
No näistä sivuista ei kannata mallia ottaa, mutta siitä käy ilmi, miten tuo onnistuu php:n avulla.
Eli jos haluan bookmarkata vaikka linkkisivun, niin bookmarkkaan
http://cgi.evtek.fi/~k0101030/?page=linkkisivu
Edit: muuten etisivun koko kuvineen on lähes 0.5 Mt. Että tervetuloa motukan käyttäjät :)
Totta. Tuo navigointipalkki siis kelluu JavaScriptillä.
Olisiko muuten mahdollista, että ihmiset, jotka kytkevät JavaScript -tuen pois päältä, saisivat tekstipohjaisen navigoinnin. En php:tä kovin hyvin osaa, mutta onnistuuko mokoma jotenkin?
Niin. Jos kerran idea oli tuo niin ei sitten juu mitään.. Ymmärsin hieman väärin.
noscript-tagilla.
Ihmiset joilla on JavaScript päällä, kytkevät sen viimeistään siinä vaiheessa pois, kun törmäävät tuollaiseen kelluvaan navigointiin :)
pikkut kirjoitti:
Silloin kannattaa lisätä <head></head> väliin:
<meta name="Robots" content="nofollow">.
Ja mitenköhän linkkien seuraamisen estäminen hyödyttää ketään?
pikkut kirjoitti:
Miten php:llä voi bookmarkata vastaavan sivun?
PHP:llä ei voi bookmarkata mitään, mutta tarkoitit ilmeisesti, miten voi bookmarkata sivun, jossa on hyödynnettä PHP-includea, siihen ks. ajv:n vastaus.
pikkut kirjoitti:
Mikä vaikeuttaa scrollaamista?
Se, että skrollipalkit ovat keskelläsivuamissäsattuu, eikä oikeassa reunassa, niinkuin pitäisi. Jollain selaimella ja versiolla iframe myös rikkoi rullalla skrollaamisen.
pikkut kirjoitti:
Siihen ei jää ympärystöä sen enempää, kuin taulukon reunus on.
Ja näkemäni perusteella se on yleensä noin 75% käytettävissä olevasta selainikkunan pinta-alasta.
pikkut kirjoitti:
Tässä esimerkki kyseisestä. Nuo sivut ovat vielä työn alla: http://anjalankoskenhsrk.net
Niistä saa kyllä kanssa antaa palautetta.
Kas niin, nyt päästinki mun lempiaiheeseen...
Alotetaan vaikka siitä, miltä nuo mulla näyttää:
http://pp.kpnet.fi/blaze/temp/anjalankoski1.png
http://pp.kpnet.fi/blaze/temp/anjalankoski2.png
Pikkuisen turhan... sanoisinko, ilmava.
Kuvien lataamisen jälkeen tuonne näytti ilmestyvän muutama iso kuva, navipalkki ja tyhmä skrollipalkki tuon iframen reunaan:
http://pp.kpnet.fi/blaze/temp/anjalankoski3.png
Saan aina skrollata tuonne alas ihmettelemään navipalkkia ja sitten takaisin ylös lukeakseni sen itse sisällön. Ei näin.
Ja otetaan sitten vielä loppuun esimerkki tuosta, miten (i)framet rikkoo tuon osoterivin. Oletetaan, että haluaisin jakaa ystävilleni IRC:ssä tuon seurakunnan tapahtumalokin. Klikkaan linkkiä ja sivu latautuu, kopioin osoitteen ja pastean sen IRC:n. Mitä hemmettiä? Osotehan johtaaki etusivulle? Niin, koska osoterivillä näkyy kokoajan sen raamisivun osote, ei sen, missä oikeasti ollaan.
Voisinhan kopioida navipalkista tuon linkin osoitteen (http://anjalankoskenhsrk.net/loki.htm#up), jolloin tultaisiin oikealle sivulle, mutta sitten ystäväni IRC:ssä joutuisivat ihmettelemään, missä hemmetissä se navigaatio on.
Asioita on ihan turha tehä huonosti, kun ne voi tehä hyvin.
No tuo kelluva valikko on ihan kätevä siinä mielessä että ei tarvi aina palata alkuun vaihtaakseen sivua!
NixDu kirjoitti:
No tuo kelluva valikko on ihan kätevä siinä mielessä että ei tarvi aina palata alkuun vaihtaakseen sivua!
Saman voi hoitaa CSS:llä. Myös IE:n saa ymmärtämään position:fixed, kun käyttää IE7-'pluginia'. Tosin se perustuu täysin js:ään, mutta toisaalta silloin jos ajatellaan ihmisiä, jotka käyttävät selaimenaan IE:tä, niin he eivät ymmärrä nykyajasta mitään ja eivät todennäköisesti osaa edes kytkeä js:ää pois selaimestaan :)
No niin ja vielä yksi kritiikki joka unohtui. 800x600 resolla ei ainakaan minun ff:n ruudulla pysty millään edes käyttämään navigaatiota, koska puolet siitä on piilossa.
Joo. No se siinä onkin ideana. Olen kanssa huomannut resoluutio-ongelman.
Tietääkö jokin, olisiko mahdollista tehdä esim. tekstipohjaista navigointia, jos käyttäjän resoluutio on pienempi)? Ainakin php tietääkseni osaa tunnistaa resoluution...
Kyllä tuo Ooppera näköjään osaa vääntää sivun kuin sivun solmuun...
Eli tuo nagivointi kannattaisi toteuttaa css:llä?
Eli heitän navigoinnin layeriin ja määritän sen positionin fixediksi?
<div id="navigointi"> [sisältöä] </div>
#navigointi {
background:transparent; /*läpinäkyvä taustaväri*/
border:1px solid black; /*näyttää divin reunat, näet millainen se on*/
position:fixed; /*"liimaa näyttöön"*/
bottom:0px; /*etäisyys ruudun alareunasta*/
z-index:1; /*tason sijainti "korkeussuunnassa, 0 on alimmainen*/
}pikkut kirjoitti:
Ainakin php tietääkseni osaa tunnistaa resoluution...
Eikä osaa. Ei selain lähetä serverille tietoa siitä, mikä koneen resoluutio sattuu olemaan.
pikkut kirjoitti:
Kyllä tuo Ooppera näköjään osaa vääntää sivun kuin sivun solmuun...
Kyllä omien kokemusten mukaan se on IE, joka ei niitä speksejä noudata.
pikkut kirjoitti:
Eli tuo nagivointi kannattaisi toteuttaa css:llä?
Kaikki ulkoasuun liittyvä kannattaa toteuttaa CSS:llä.
pikkut kirjoitti:
Eli heitän navigoinnin layeriin ja määritän sen positionin fixediksi?
No vaikka niin. Kannattaa kyllä sitten kattoa, että se palkki on sopivan pieni, että se mahtuu vähän pienempäänki ikkunaan. Esim. itse W3C:ssä on minusta menty vähän yli.
lainaus:
Kyllä omien kokemusten mukaan se on IE, joka ei niitä speksejä noudata.
Alat pikkuhiljaa selkeästi hikeentyä. Ota ihan iisisti. Joo tuota sivustoa on nyt kokeiltu Ultra Browserilla, Mozillalla, Mozilla Firefoxilla, Avant Browserilla, Simple Browserilla, Maxthonilla. Kaikilla toimii, paitsi Simple Browserilla tulee pari bugia ja myös sitten Oopperalla tulee aika rankkaakin bugia sinun kokemustesi perusteella.
Tuo kellumisefekti onkin vähän jännittävämpi säätää css:llä. Kyllähän sen css:llä saa liimautumaan mutta sen pidemmälle en sitten osaakkaan...
lainaus:
Eikä osaa. Ei selain lähetä serverille tietoa siitä, mikä koneen resoluutio sattuu olemaan.
Ei osaa. Siksi kysyykin. Mutta eikös täällä ollut jossakin muistaakseni php:llä toteutettuja laskureita/trackereita, jotka lähettivät tietoja resoluutiosta sähköpostiin.
Ainakin trackereita löytyy netistä, kuten hyvänä esimerkkinä käyttämäni http://www.s-tracking.com. Jollakin ilveellähän niiden on jollakin skriptalla mentävä johonkin. Eli jokin saa selville resoluution joka tapauksessa. Olisiko neuvoja?
Javascriptillä (screen.width ja screen.height). Ja muistelisin, että Operassakin on muutama erikoisuus css-puolella, mutta niin taitaa olla kaikissa selaimissa. IE ei ole siitä mukava, että se tahtoo luoda omaa standardiaan, jota muiden pitäisi seurata.
Resoluution saa selville JavaScriptillä. Esim. eXTReMe Tracking lataa sivulle kuvan, jonka parametreiksi on kirjoitettu JavaScriptillä näytön resoluutio ja värimäärä. Jos JavaScript ei ole käytössä, tietoja ei myöskään saa selville.
Eli jos resoluutio on vaikkapa 800*600 joka on liian pieni tuon sivun navigoinnille, tilanne on toivoton..? Eli noscriptin tapaista vaihtoehtoa ei ole?
Antti Laaksonen kirjoitti:
Resoluution saa selville JavaScriptillä. Esim. eXTReMe Tracking lataa sivulle kuvan, jonka parametreiksi on kirjoitettu JavaScriptillä näytön resoluutio ja värimäärä.
Itellä on ollut käytössä tommonen viritys. Ja joko olen tehnyt jotain pahasti väärin, tai sitten totuus on vain se, että ainoastaan ie:stä JavaScript pystyy tuon reson haistelemaan.
Koodi on tässä:
<script type="text/javascript"><!--
var x = window.screen.Width;
var y = window.screen.Height;
var reso = x+"x"+y;
document.write('<img src="sivut/kuva.php?reso='+reso+'" width="1" height="1" alt="" style="position:absolute; top:1px; left:1px">');
--></script>pikkut kirjoitti:
Eli jos resoluutio on vaikkapa 800*600 joka on liian pieni tuon sivun navigoinnille, tilanne on toivoton..? Eli noscriptin tapaista vaihtoehtoa ei ole?
Väsäsinpä tuossa harjotukseksi testi-navigaation Kokeileppa miten se toimii erilaisilla selaimilla.
No tuo ei ainakaan liiku Maxthonilla, IE:llä eikä Avant Browserilla... onMouseOver -efekti kuitenkin toimii.
pikkut kirjoitti:
No tuo ei ainakaan liiku Maxthonilla, IE:llä eikä Avant Browserilla
No ei ole tarkoituskaan. Se on selaimen oma vika, jos ei ymmärrä position:fixed; IE:ssä tuon saa toimimaan käyttämällä tuota IE7-'pluginia'. Lisäsin sen tuohon joten nyt pitäisi toimia IE:lläkin.
Niin ja onko se nyt niin iso virhe, jos se ei liiku mukana? Verrattuna siihen, että navigaatiosi on tällä hetkellä JS:n varassa, tuo on miljoona kertaa parempi vaihtoehto.
Joo okei, nyt toimii.
Kiitos.
Aihe on jo aika vanha, joten et voi enää vastata siihen.