Hei,
Taas on minulla paljon kysymyksiä:
Nyt pitäisi saada ulkoasu, joka venyy sivusuunnassa kuin myös pystysuunnassa.
Pystysuuntaan se on helppo tehdä, mutta vaakasuuntaan onkin eriasia.
Annanpas teille helpottavan kuvan auttamaan ymmärtämisessä:
A-------------------------------------------------------B | LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO PÄÄTY| | LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO PÄÄTY| | LOGO LOGO LOGO LOGO LOGO LOGO LOGO LOGO PÄÄTY| | E--------------------------------------------F | Valikko | | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö | Valikko | Sisältö Sisältö Sisältö Sisältö C----------D
Kulmat A-F ovat kaikki pyöreäkulmaisia, muut tekstit kertovatkin jo tehtäväntä.
Vasen pystypalkki venyy sisällön mukana, tämä on ihan helppo asia.
Sitten pitäisi saada vielä logopalkki venyvään 100% näytön leveyden mukaan.
Ongelma ei ole koodata tablea jolle width arvoksi 100%, vaan se, että LOGO kuva on suorakulmainen, joka on taustakuvana tuolla tablella ylhäällä ja pääty kuva on pyöristetty oikeasta laidasta. Jos laitan tablelle taustakuvaksi sen minkä haluan, niin se on ihan okei, mutta koska pääty -kuvalla on pyöreät kulmat, niin taustakuva näkyisi tämän alta.
Jos CSS3:sta saa käyttää, niin se antaa pyöristää myös kuvia. Silloin tosin pitää luultavasti käyttää divejä (mitä sunkin kannattaisi käyttää).
Ja jos 'PÄÄTY' peittää LOGOn lopun (olettaen, että on taustakuva), eikös siitä voi sitten leikata sen loppun osan pois koska sitä ei päädyn alta näy.
Eli:
Ei näin
--|-
Vaan näin
--|
Keksinkin miten sen teen, mutta jostain syystä en saa td:lle taustakuvaa.
#sisalto {
background-image: url("sisalto.bmp") repeat-x;
height: 133px;
}<td id="sisalto"> </td>
Nähtävästi toimii, kun otan repeat-x:n & height-arvot pois ja määritän pituusarvon pikseleinä. Eikös juuri width arvolle voinut antaa prosenttimäärän arvoksi? Tämä ei näytä toimivan niin. :/
Mozilla tekee oikeastaan tämän oikein, mutta IE ei. Kuitenkin tykkään IE:n tyylistä enemmän:
Sain tämän nyt toimimaan, mutta päälle tuli toisenlainen ongelma. Kun sisältötekstiä kirjoitetaan, niin IE täyttää ihan oikeasta kohdasta alkaen, mutta Mozilla näyttää tekstin alkaen ihan oikeasta reunasta.
Tämä tietenkin johtuu float: right määritteestäni. Ilman tätä tämä ei kuitenkaan toimi.
Chrome ja Safari taas näyttävät sisällön vasta navin alapuolella. Opera näyttää samalla lailla kuin Mozilla.
<html> <head> <title>--</title> <link rel="stylesheet" href="main_style.css" type="text/css"> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="ylavasen"> </td> <td id="ylasis" width="500"></td> <td id="ylaoikea"> </td> </tr> </table> <div style="float: left"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="vasensis"> <div style="padding-left: 5px"> <a href="#">Linkit tähän</a><br> <a href="#">Linkit tähän</a><br> <a href="#">Linkit tähän</a><br> <a href="#">Linkit tähän</a><br> <a href="#">Linkit tähän</a><br> </div> </td> </tr> <tr> <td id="loppu"> </tr> </table> </div> <div style="float: right"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td> <div style="text-align: left"> IE aloittaa tekstin täytön vasemmalta, mutta Mozilla oikealta. </div> </td> </tr> </table> </div> </body> </html>
body {
background-image: url('tahti.bmp');
color: white;
}
#ylavasen {
background-image: url("ylavasen.bmp");
height: 144px;
width: 141px;
}
#ylasis {
background-image: url("ylasis.bmp");
}
#ylaoikea {
background-image: url("ylaoikea.bmp");
height: 144px;
width: 13px;
}
#vasensis {
background-image: url("sisvasen.bmp");
width: 133px;
}
#loppu {
background-image: url("alavasen.bmp");
height: 7px;
width: 133px;
}Miten pitäisi korjata?
Käytä divejä. Taulukot ovat taulukkoja varten.
Suosittelen myös käyttämään bmp-kuvatiedostojen tilalla vaikka png-muotoa.
Moiman kirjoitti:
Käytä divejä. Taulukot ovat taulukkoja varten.
Tällä ei ole mielestäni yhtään mitään väliä, onko ne divejä vai tauluja.
Tauluilla saan vaan helpommin enemmän aikaa.
Moiman kirjoitti:
Suosittelen myös käyttämään bmp-kuvatiedostojen tilalla vaikka png-muotoa.
Väännän nuo Giffiksi, kun ensin saan sivuston toimimaan. Painitilla on vaan helpompi tallentaa nuo bmp:ksi. ;)
Sain sivut toimimaan kaikilla, mutta enään en saa tuolle yläosan venyvälle palkille 100% width arvoa; selaimet eivät ymmärrä mitä tarkoitan sillä, toisin sanoen 100% alue peittää kaiken muun siitä.
Minulla on kolme kuvaa yläosassa:
*--------------* | | | | | | | *-* *------------*
*--------------* | | | | | | *--------------*
* | | | *
Nämä kun yhdistän, niin näyttää tältä: kuva1 + kuva2 + kuva3. Okei, tämä on näin hyvä, kun ei anneta kuva2:lle mitään muita arvoja, mutta kun tälle pitäisi antaa width arvo niin, että kuva 1 olisi oman levyinensä (144px) ja kuva3 olisi oman kokoisensa (13px). Tämä siis näyttäisi tältä:
*-----------------------------------------------------------------* | | | *---------**-----------------------------------------**-* | | | | kuva 2 (venyy näytön leveyden mukaan) | k| | | | kuva1 | Tässä on siis monta kuvaa vierekkäin | 1| | | | *-**-----------------------------------------**-* | | *-------* | | | | Täällä sisältö jatkuu normaalisti | | | *-----------------------------------------------------------------*
Tässä vielä koodini, jos auttaa:
<!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"> <head> <title>Star Wars Game</title> <link rel="stylesheet" href="main_style.css" type="text/css"> </head> <body> <!-- YLÄOSA ALKAA --> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td id="ylavasen"></td> <td id="ylasis" width="500"></td> <td id="ylaoikea"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0"> <!-- VASEN REUNA ALKAA --> <td width="193" valign="top"> <table align="left" width="133" border="0" cellpadding="0" cellspacing="0"> <tr> <td id="vasensis"> <center> <a href="#">Linkki</a><br> <a href="#">Linkki</a><br> <a href="#">Linkki</a><br> <a href="#">Linkki</a><br> <a href="#">Linkki</a><br> </center> </td> </tr> <tr> <td id="loppu"></td> </tr> </table> </td> <!-- SISÄLTÖOSUUS ALKAA --> <td style="padding-left: 5px;" valign="top" width="100%"> <table align="left" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td> Sisältö sisältö sisältö sisältö sisältö sisältö </td> </tr> </table> </td> </table> </body> </html>
body {
background-image: url('tahti.bmp');
color: white;
}
#ylavasen {
background-image: url("ylavasen.bmp");
height: 144px;
width: 141px;
}
#ylasis {
background-image: url("ylasis.bmp");
height: 144px;
}
#ylaoikea {
background-image: url("ylaoikea.bmp");
height: 144px;
width: 13px;
}
#vasensis {
background-image: url("sisvasen.bmp");
width: 133px;
}
#loppu {
background-image: url("alavasen.bmp");
height: 7px;
width: 133px;
}Tämä ei nyt kenenkään taiteellista silmää miellytä, mutta näyttää taulukottoman tempun, jossa läpinäkyvät PNG:t hoitaa homman kotiin: http://kontu.selfip.info/html.css.js/
Voi kokeilla laittaa taustakuvan sivulle, näkyy kulmien kohdalta läpi niinkuin pitää (yksi vaihtoehto kun on tehdä kulmat käänteisinä, eli että tekisi kulmista vaan peitekuvat taustavärin mukaisiksi).
Testattu vain Firefox 3.5:llä, selainresurssini ovat vielä aika heikossa hapessa kun asensin koneelleni Windows 7:n.
Muuten ihan kätevä, mutta kun saan tuon toimimaan, niin en saa enään muuta sisältöäni oikein, koska tämä ei olekkaan enään taulukoilla koottu: Tulos on huonompi kuin ennen tämä venymätön.
Eli, taulukoilla sen pitäisi mennä tähän ulkoasuun. Olen joskus saanut tämän tehtyä, mutta nyt en saa oikein kunnolla toimimaan. :/
Osaisitko auttaa taulukoilla? :)
Koska kaikki selaimet eivät nähtävästi tunnista float käskyä, niin tämä meni hirveän vaikeaksi. Saan jo tähän tyyliin:
*---------------------------------------------------* | ** | | ** | | *-**-------------------------------------* *----------*
En vaan millään saa tuota vikaa kuvaa ängettyä tuohon oikeaan päätyyn.
<html>
<head>
<title>Star Wars Game</title>
<link rel="stylesheet" href="main_style.css" type="text/css">
</head>
<body>
<table id="rakenne" border="0" cellpadding="0" cellspacing="0">
<!-- YLÄOSA ALKAA -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" id="ylasis"><img src="ylavasen.bmp"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<!-- VASEN REUNA ALKAA -->
<td width="193" valign="top">
<table align="left" width="133" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="vasensis">
<center>
<a href="test.php">Etusivu</a><br>
<a href="test.php?img=planeetta.gif">Muu</a><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</center>
</td>
</tr>
<tr>
<td id="loppu"></td>
</tr>
</table>
</td>
<!-- SISÄLTÖOSUUS ALKAA -->
<td style="padding-left: 5px;" valign="top" width="100%">
<table align="left" width="530" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<?php if($_GET["img"]) echo "<center><img src=\"{$_GET["img"]}\"></center>"; else echo "Sisältö Sisältö Sisältö Sisältö Sisältö Sisältö"; ?>
</td>
</tr>
</table>
</td>
</table>
</table>
</body>
</html>Sellainen juttu vielä tähän, että haluaisin tuolla venyvälle osalle ylhäällä ja tälle sisältöalueelle min-width arvon 500px. Ei oiken tunnu toimivan.
MIB kirjoitti:
Muuten ihan kätevä, mutta kun saan tuon toimimaan, niin en saa enään muuta sisältöäni oikein, koska tämä ei olekkaan enään taulukoilla koottu: Tulos on huonompi kuin ennen tämä venymätön.
Eli, taulukoilla sen pitäisi mennä tähän ulkoasuun. Olen joskus saanut tämän tehtyä, mutta nyt en saa oikein kunnolla toimimaan. :/
Osaisitko auttaa taulukoilla? :)
Miksi et saa? Korkeintaanhan se vaatii pientä muutosta sisältöosioon, jos se tosiaan on koottu "taulukon" soluiksi.
Tässä on nyt muutamakin jo yrittänyt kertoa, että taulukot ovat taulukkomuotoista sisältöä varten – jota esim. ulkoasu [a]ei[/a] ole. (Vastaten aiempaan viestiisi:) ja sillä tosiaan on väliä, ovatko "ne" taulukkoja vai divejä: taulukko-ulkoasua on mm. paljon vaikeampi käsitellä CSS:n avulla (selaimesta riippuen varsinkin monimutkaiset, taulukkoja sisältävät taulukot myös tulevat hitaammin esille). Kömpelyytensä vuoksi taulukot eivät tosiasiassa ole käytännössä koskaan kätevämpiä, divien kanssa vain pitää osata käyttää CSS:ää. Erityisesti taulukoita pitäisi välttää esteettömyyden vuoksi. (tästä lisää myöhemmin).
Huomioithan myös, että vain sisällön esitykseen liittyvät HTML-elementit, kuten <center> ovat vanhentuneita jo HTML4:ssä, ja ne tulisi korvata CSS-määreillä. Rivinvaihto-tagilla (<br>) ei koskaan pitäisi luoda ns. "tyhjää tilaa", vaan tämäkin on visuaaliseen esitykseen liittyvän CSS:n alaa.
Koska käytät XHTML-DOCTYPEä, tulisi sivun olla XML-yhteensopiva: tämän edellytyksenä on, että suljet kaikki tyhjät (void) elementit, kuten <link> ja <img> – joko avaustagia seuraavalla sulkutagilla (esim. </img>) tai suoraan XML-sulkumerkillä (esim. <img src="kuva"/>). Toisaalta, koska ilmiselvästi luot ja tarjoilet HTML-sivua, voisi olla parempi ratkaisu myös käyttää HTML-DOCTYPEä (HTML 4.01).
Sivujen esteettömyyden nimissä taulukkojen käyttö on erittäin huono asia – esimerkiksi sivunlukijan voi olla vaikea hahmottaa, miten sivu tulisi loogisesti esittää: sen sijaan diveillä sisällön voi järjestää haluamaansa järjestykseen myös lähdekoodissa. Esteettömyyden saavuttamiseksi olisi tärkeää käyttää semanttisesti pätevää merkkauskieltä: tämä voisi tarkoittaa esim. tekstin sijoittamista kappaleisiin kuten sen on tarkoitus (<p>, ja navigaation toteuttamista listana (<ul>) mikä se tosiasiassa on.
Kaikenlaista sitä onkin sivuja tehdessä hyvä huomioida :). No, joka tapauksessa harva asia on "aivan sama".
Tarkoitus olisi saada mahdollisimman nopeasti se kuva siihen oikeaan yläreunaan. Diveillä koitin tehdä sen ulkoasun, tulos oli selvä: ei minusta ole pelkille diveille. Mikä tableissa muuten haittaa, kun validatori antaa muista sivuistani ihan validin tuloksen?
Validator ei käytännössä edes voisi tarkistaa semanttista pätevyyttä – tosin sitä ei ole (X)HTML:ssä kovin tarkasti määriteltykään (ks. kuitenkin 6. kappale http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#h-11.1).
HTML 5 -draftissa asiaa on käsitelty tarkemmin: ks. esimerkki http://dev.w3.org/html5/spec/Overview.html#elements.
Selevä. Mutta, nyt kymykseen: Miten saan kuvan ihan oikeaan reunaan td:n sisällä? Kaikki selaimet eivät tunnista float määritettä, niin sillä ei onnistu.
Jos laitan kaksi td:tä, niin kuva jää piiloon 100% pitkän taustan alle.
Edit: Ohops, kyllähän tuo kaksi td:tä -juttu toimikin. :D Olin niin paljon ehtinyt koodia muokata, että nyt menevät kuvat kohdakkain.
Sanottakoon nyt heti tähän alkuun varoituksena, että olen tarkoituksella kirjoittanut tämän tekstin hyvin kriittiseen muotoon. Haluan että viesti menee perille, myös muille edelleen taulukkotaittoon sortuville.
Taulukot ovat rajoittavia. Jos katsot HTML:ää jonka kirjoitin, on se hyvin lyhyt ja luettava. Jos vääntäisin visuaalisesti saman näköisen lopputuloksen taulukoilla, niin joutuisin kirjoittamaan paljon enemmän HTML:ää, ja ulkoasu olisikin sitten sitä myöten sidottu siihen. Heti seuraavalla sivuston ulkoasun päivityskerralla olisi vedettävä myös HTML lähes kokonaan uusiksi. Jos vielä sisältöosatkin tekee taulukkokoodilla, niin kaikenlaiset muutokset vaikeutuvat potenssiin kaksi. Pidemmän päälle taulukkotaitto on aivan liian aivojajäytävää touhua, ajan tuhlausta ja eq:n mainitsemat muutkin seikat painavat paljon vaakakupissa. Taulukoista luopuminen säästää pidemmän päälle aikaasi, tekemällä uusia taulukkotaittoisia sivuja taistelet vain itseäsi vastaan.
Ennen taulukkotaittamiselle ei ollut kunnon vaihtoehtoja, joten sitä katsottiin suopeammin, varsinkin kun se mahdollisti ensimmäistä kertaa monipuolisten ulkoasujen luomisen. Taulukot kuitenkin asettavat jo rakenteensa vuoksi selkeitä rajoituksia taittamiseen, ja näiden rajoitusten taivuttaminen johti tolkuttoman monimutkaisiin HTML-koodeihin. Mitä paremmin sivustolla häivytettiin taulukkomaisuus, sitä kamalampi sivuston ulkoasua oli pitää yllä ja sitä raskaampi se oli ladata.
Nykyään kehitys on mennyt yhä enemmän valmiisiin työkaluihin, jotka tekevät hommat puolestasi. Minun puolestani on ihan ookoo, jos vaikka nappaat jonkun WYSIWYG-tyylin editorin käyttöösi ja tyydyt siihen koodin, mitä se suoltaa ulos. Jos kuitenkin aiot opetella sivunteon eri osa-alueet, niin sitten sinulla yksinkertaisesti ei ole vaihtoehtoa: taittamiseen käy vain CSS, CSS ja CSS. Joko opettelet teknisesti päteväksi sivuntekijäksi (joiden määrä on muuten kai tätä nykyä laskussa, tilastoja minulla ei ole antaa, mutta semmoinen tuntuma minulla on) tai sitten tyydyt sivujen tekoon käyttäen valmiita työkaluja ja keskityt enemmän sisältöön.
Ja sitten pyydät muilta taulukkokoodia. Tämä olisi mennyt läpi ehkä vielä viisi vuotta sitten. Nykyään se ei enää mene lävitse. Taulukot vanhentuivat käytännössä sinä päivänä kun Firefox julkaistiin. Firefox siksi, että se ensimmäisenä selaimena mahdollisti CSS:n päälle ymmärtämisen pelkästään kokeilemalla, ja kasvoi nopeasti kyllin suosituksi lyödäkseen CSS:n lopullisesti läpi parhaana tapana toteuttaa sivujen taitto. Kaikki aika sen jälkeen on kulunut CSS:n opetteluun ja parempaan ymmärtämiseen, sekä CSS-tekniikoiden kehittämiseen.
Näet että CSS:llä saa aikaiseksi sen mitä tarvitset. Ainut asia mikä pitää sinut taulukoissa on oma laiskuus. Onko mikään loukkaavampaa auttavia kohtaan kuin torjua ehdotus vain sen vuoksi, ettet tahdo käyttää aikaasi CSS:n ymmärtämiseen? (Ja ei, koodin käyttämättömyys ei minua oikeastaan koskaan oikeasti haittaa. Yleensä kirjoitan koodia hyvin pitkälle "ihannereferenssinä" ja joskus seassa on myös omia kokeiluja, jotka eivät välttämättä toimi kaikissa tilanteissa tai kaikilla selaimilla.)
Aihe on jo aika vanha, joten et voi enää vastata siihen.