Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Sivun muotoilusta

Sivun loppuun

ZuBer [07.05.2011 11:04:17]

#

Moi!

Miten saan laitettua tietoja eri "sarakkeisiin", kuten täällä ohjelmointiputkan viestiketjuissa, ketjuvalikossa ym. Ja tuolla kun on koko ajan vasemmassa reunassa tuollainen palkki, jossa lukee "Kirjautuneena: Zuber..."? Varmaan taulukoilla ja sivun jakamisella jotenkin, mutta voisiko joku vähän selventää?

Grez [07.05.2011 11:08:14]

#

Selaimesta löytyy sellainen kuin "View source" tai "näytä lähdekoodi", jolla voit katsoa miten mikäkin sivu on tehty.

Täällähän tuo on tehty diveillä, eikä taulukoilla.

<div id="sivupalkki">

ja css-tiedostossa

#sivupalkki {
float: right;
width: 18em;
background-color: #E4E4E4;
}

ZuBer [07.05.2011 11:34:29]

#

Minne minä tuon css-tiedoston laitan ja millä nimellä?

Grez [07.05.2011 11:41:43]

#

Molemmat voit valita ihan itse. Eikä niitä edes ole tyylimäärityksiä sinänsä edes ole pakko laittaa erilliseen tiedostoon, mutta se on toki suositeltavaa.

Suosittelen tutustumaan html:n ja css:n alkeisiin jollain oppaalla.

Petja [07.05.2011 13:23:04]

#

Otapa käyttöösi Firebug!
http://lmgtfy.com/?q=Firebug&l=1

Tässä vähäksi aikaa luettavaa:
What is HTML? ...... http://lmgtfy.com/?q=What is HTML
What is CSS? ....... http://lmgtfy.com/?q=What is CSS
CSS Float .......... http://lmgtfy.com/?q=CSS Float
HTML Table ......... http://lmgtfy.com/?q=HTML Table

P.S. Minä en ole vieläkään päässyt taulukkotekniikasta eroon, vaan käytän sitä edelleenkin sinnikkäästi. :D

The Alchemist [07.05.2011 14:53:36]

#

Taulukoiden käyttö ulkoasun luomiseen on väärä ratkaisu.

Stupid Tables

Olli [07.05.2011 19:42:57]

#

Tuolla on muuten suomenkielinenkin versio:
http://www.aimedia.fi/stupid_tables/

Yucca [07.05.2011 20:08:42]

#

Tuo suomenkielinen käännös lapsellisesta uskonnollissävyisestä julistuksesta on sen verran paksua, että on vähän pakko kommentoida. Jo ensimmäinen virke öMutta border="0" antoi web-suunnittelijoille – –ö on puppua, koska border="0" on tässä merkityksetön. Taulukothan ovat HTML:ssä aina olleet sellaisia, että oletusarvoisesti niissä ei ole reunaviivoja. Tämä muuten on syynä siihen, että HTML5:ssä sallitaan border="1", vaikka se onkin ulkoasumerkkausta; tajuttiin, että taulukoidun tiedon esityksessä reunaviivat ovat usein niin olennaiset, ettei niitä voi jättää CSS:n varaan.

Historiallisesti oikeampaa olisi jopa sanoa, että taulukot otettiin HTML:ään taittokeinoksi, mutta border="1" antoi mahdollisuuden käyttää niitä myös tiedon taulukoituun esittämiseen, joskin etenkin aluksi aika alkeellisesti.

Joissakin piireissä on muodostunut dogmiksi, että taulukkotaitto nostaa kustannuksia, tekee sivuista joustamattomia jne. Dogmiin uskotaan todisteita esittämättä ja vastakkaisista todisteista välittämättä.

Jos esimerkiksi halutaan oikealle sellainen palsta kuin tässä sivustossa on, niin kyllähän se onnistuu div-elementillä (tai vähän loogisemmin aside-elementillä) ja kellutuksella (float: right plus vähän lisää). Mutta jos haluttaisiinkin palstan olevan koko sivun korkuinen eikä niin korkea, kuin sen sisältö vaatii, taulukkotaiton välttely johtaa koodiakrobatiaan, jossa pitää ottaa huomioon monta eri selainten erikoisuutta ja joka menee paljon helpommin rikki kuin yksinkertainen taulukko. Todellisuudessa silloin ollaan tekemässä taulukkoa ilman taulukkoa ja toteuttamassa taittoa _alkeellisemmilla_ välineillä.

Lisäksi yksinkertaisessakin tapauksessa kellutus johtaa ongelmiin. Tämän voi havaita kaventamalla selainikkunaa tarpeeksi: lopulta palstat peittävät toisiaan. Tämä johtuu pohjimmiltaan siitä, että palstat eivät ole yhden kokonaisuuden, taulukon, osia vaan erikseen taiteltuja ja taiteiltuja palasia.

Kun kysyjä on ilmeisesti aloittelija verkkosivujen teossa, hänen luultavasti kannattaisi keskittyä ainakin aluksi ihan muihin asioihin kuin CSS-taittoon. Yksinkertaisimman palstoituksen kun saa aikaan näin helposti:

<!doctype html>
<style>
td { max-width: 20em; }
td.main { max-width: 35em; }
</style>
<table role="presentation">
<tr><td class="main">Ensimmäisen palstan sisältö
<td>Toisen palstan sisältö
</table>

Tuo edes ei ole yksinkertaisin mahdollinen, koska siinä on asetettu palstoille enimmäisleveydet (mitä tällä foorumilla ei jostain syystä ole tehty – siksi rivit venyvät aivan liian pitkiksi, jos käytetään leveää selainikkunaa).

Metabolix [07.05.2011 21:04:26]

#

Yucca kirjoitti:

Tuo edes ei ole yksinkertaisin mahdollinen, koska siinä on asetettu palstoille enimmäisleveydet (mitä tällä foorumilla ei jostain syystä ole tehty – siksi rivit venyvät aivan liian pitkiksi, jos käytetään leveää selainikkunaa).

Minusta ihmisen pitää itse saada ja osata päättää, miten leveän palstan haluaa. Erityisesti ohjelmointiaiheisella foorumilla on myös perusteltua käyttää koko tila, koska koodeissa on usein pitkiä rivejä, jotka eivät selaimella rivity automaattisesti kovin siististi (ts. sisennykset menevät sotkuksi).

Grez [07.05.2011 22:06:58]

#

Yucca kirjoitti:

Tuo suomenkielinen käännös lapsellisesta uskonnollissävyisestä julistuksesta on sen verran paksua, että on vähän pakko kommentoida. Jo ensimmäinen virke öMutta border="0" antoi web-suunnittelijoille – –ö on puppua, koska border="0" on tässä merkityksetön.

Tai sitten siinä on ollut tarkoitus sanoa cellspacing="0", mutta taulukoita käyttämätön kirjoittaja on unohtanut vanhan magian.

Yucca kirjoitti:

Historiallisesti oikeampaa olisi jopa sanoa, että taulukot otettiin HTML:ään taittokeinoksi, mutta border="1" antoi mahdollisuuden käyttää niitä myös tiedon taulukoituun esittämiseen, joskin etenkin aluksi aika alkeellisesti.

Vitsailet varmaan? Reunuksien puuttuminen ei minusta estä tiedon taulukoitua esittämistä, joskin reunukset voivat joissain tapauksissa tehdä taulukosta luettavamman.

ankzilla [07.05.2011 22:36:37]

#

Mun mielestä on oikeasti ihan sama tekeekö tableilla, samaan lopputulokseen pääsee kuha vaa pikkase osaa kikkailla.
Ja nettiyhteyteen vetoaminen on mielestäni aika turhaa, koska siinä ei nyt loppujen lopuksi synny merkittävän isoa eroa.

The Alchemist [08.05.2011 11:14:35]

#

Tärkein syy taulukoiden käyttämättä jättämiseen on yliraskas sivusto. V2.fi on erinomainen esimerkki siitä, miten taulukoita voi käyttää väärin ja pilata näennäisesti hyvän sivuston kokonaan.

Toinen ongelma on se, että taulukko pitää olla kokonaan ladattu, ennen kuin selain renderöi sen. Tämän kanssa on joutunut tuskailemaan niin miljoonasti, kun sivu on täysin tyhjä vaikka suurin osa datasta on jo ladattu, mutta joku pikkupaska eri palvelimelta ei sitten valmistukaan.

kaviaari [08.05.2011 13:31:07]

#

Lisäksi taulukkotaiton huonoja puolia on muun median käyttö sivuston esittämiseen. CSS:n kanssa on suhteellisen vaivatonta määritellä sivuston näkymä uudelleen esimerkiksi puhelimella katseltaessa tai sivusto tulostettaessa. Taulukkotaitolla toteutettuna tämä on toki mahdollista kirjoittamalla uusi sivu joka ei sisällä taulukkoja/sisältää muokattuja taulukkoja.

Yucca [08.05.2011 20:06:57]

#

The Alchemist kirjoitti:

Tärkein syy taulukoiden käyttämättä jättämiseen on yliraskas sivusto. V2.fi on erinomainen esimerkki siitä, miten taulukoita voi käyttää väärin ja pilata näennäisesti hyvän sivuston kokonaan.

Miksi taittamisen tekniikalla olisi asiassa yhtään mitään merkitystä? Paljonko sivusto paranisi, jos taulukoiden käyttö vaihdettaisiin CSS:llä aseteltuihin div-elementteihin? Jos vikaa on, se on siinä, mitä on tehty, ei siinä, miten se on tehty. Sivuston ensivaikutelmassa rasittavin piirre on liikkeen paljous (liian monta liikkuvaa osaa, joista mikään ei edes ole sivuston varsinaista sisältöä), eikä siinäkään ole taulukkotaitolla tuon taivaallista tekemistä.

lainaus:

Toinen ongelma on se, että taulukko pitää olla kokonaan ladattu, ennen kuin selain renderöi sen.

Ei pidä paikkaansa, koska table-layout: fixed estää sen. Se ei välttämättä ole fiksu asetus, mutta CSS-asettelua käytettäessä sitä vastaava toiminto on aina käytössä. :-)

The Alchemist [09.05.2011 07:43:38]

#

Yucca: koska kyseisen saitin ulkoasu on helvetin raskas. Sivua rullatessa sen näkee erityisen hyvin, kun rullausanimaatio tapahtuu korkealla viiveellä. En ole muutakaan syytä keksinyt kuin rekursiivisen taulukkorakenteen, kun tuolla ei muuten ole mitään ihmeellistä.

Yucca [09.05.2011 09:29:07]

#

Aika erikoista päättelyä: jos koet sivun raskaaksi etkä osaa kertoa syytä, päättelet syyksi örekursiivisen taulukkorakenteenö. (Kyse ei muuten ole rekursiosta vaan sisäkkäisyydestä.) Ja mitenkähän se vaikuttaisi örullausanimaatioonö, mitä se lieneekin. En havainnut mitään kummallista normaalissa vaaka- tai pystysuorassa vierityksessä. Minkähän ihmeen takia mahdolliset ongelmat siinä johtuisivat taulukoista?

Grez [09.05.2011 11:01:46]

#

Itse väittäisin, että tuon v2.fi sivun suurin tahmeuden syy on nuo videota sisältävät flash-mainokset. Ainakaan itse en huomannut minkäänlaista viivettä vierityksessä, kun blokkasin mainokset.

The Alchemist [09.05.2011 11:03:46]

#

Grez kirjoitti:

Itse väittäisin, että tuon v2.fi sivun suurin tahmeuden syy on nuo videota sisältävät flash-mainokset. Ainakaan itse en huomannut minkäänlaista viivettä vierityksessä, kun blokkasin mainokset.

Ei, käytän AdBlockia ja FlashBlockia. HW-kiihdytetyt Windows-selaimet eivät välttämättä enää kärsi ongelmasta, mutta muuten sen huomaa selvästi. Ja näin on ollut koko sen ajan, mitä tuo sivusto on ollut olemassa.

Grez [09.05.2011 11:45:47]

#

No, anyways, itse en huomannut mitään tahmeutta millään kokeilemallani selaimella. Ehkä tää 5 vuotta vanha kannettava vaan sitten on niin pirun tykki. Mainokset päällä oli aavistuksenomaista tahmeutta.

ZuBer [09.05.2011 16:44:43]

#

Kiitoksia vastanneille!

Uutta kysymystä:
Jos minulla on ukko, jolla voi olla tavaroita ja ne on tallennettu tietokantaan.
Eli:(taulut)
ukot
tavarat
Miten saan ukon tavarat yhdistettyä ukkoon? Onko järkeä tehdä vielä taulu "omistajat" ja lisätä siihen aina rivejä?
Eli näin:
ukkoID | tavaraID
3 | 4
3 | 8
8 | 2
24 | 8
Yhdellä tavaralla kun voi olla rajattomasti omistajia...
//Ja toisin päin

-tossu- [09.05.2011 16:47:32]

#

ZuBer kirjoitti:

Miten saan ukon tavarat yhdistettyä ukkoon? Onko järkeä tehdä vielä taulu "omistajat" ja lisätä siihen aina rivejä?

Kyllä, se lukee Putkan MySQL-oppaassakin. https://www.ohjelmointiputka.net/oppaat/opas.php?tunnus=mysqlphp09

Grez [09.05.2011 16:56:48]

#

Jos samalla ukolla voi olla monta kertaa sama tavara, niin kannattanee laittaa vielä lisäksi sarake joka kertoo "montako". Esim. jos Kallella on 1583 kultakolikkoa, niin olisi hölmöä laittaa sitä varten 1583 riviä kantaan.


Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta