Teen sivulleni uutta ulkoasua ja en millään keksi miten saan nuo kolme vierekkäin olevaa palkkia yhtä pitkiksi ja sivun minimikorkeudeksi 100%.
Kiitos, jos joku css:tä paremmin perillä oleva vosi auttaa :)
Muokkailin sivua lisää ja laitoin palkkien pituudeksi 500px: http://students.turkuai.fi/users/ollaason/lasa/
Käytännössä toimivin ratkaisu on sellainen, ettet oikeasti venytäkään kaikkia elementtejä samaan pituuteen, vaan laitat elementtisi roikkumaan sellaisen elementin päälle, jossa on taustakuvana pelkkää toistuvaa kuviota. Näin syntyy illuusio siitä, että elementit olisivat yhtä pitkiä, vaikka todellisuudessa ne eivät ole.
Lisähuomiona tähän vielä: CSS:ssä on kyllä mahdollisuus muuttaa elementit tyylillisesti myös taulukon soluiksi, jolloin ne venyisivät keskenään pisimmän mukaan, mutta IE7 ja aiemmat eivät tue sitä, joten täytyy joko kikkailla erikseen karmaisevan paljon IE:n kanssa tai sitten tyytyä temppuun joka toimii kaikilla selaimilla.
Muina kommentteina todettakoon, että opettele muutkin HTML:n elementit kuin divit. Kun käyttää pelkkiä divejä, niin pian on siinä tilanteessa ettei tiedä mistä mikin elementti alkaa ja mihin toinen päättyy, varsinkin kun useita alkaa mennä sisäkkäin. On paljon helpompi käyttää kuhunkin tarkoitukseen olevaa tagia: P-elementit eli kappaleet tekstiä varten, H1 ynnä kumppanit otsikoita varten (olkoonkin sitten "otsikon" visuaalinen lopputulos pelkkä kuva), linkkivalikot listaksi ja niin edelleen. Joutuu aavistuksen enemmän kirjoittelemaan tyylejä, mutta toisaalta samalla oppii uusi temppuja ja tulee myös uusia mahdollisuuksia tyylittelyyn.
XHTML:ssä minimikorkeustemppu onnistuu sillä, että määrittää html-, ja body-elementeille height: 100%; jolloin bodyssä sijaitseva taulukkotyylin elementti ymmärtää 100% samana kuin selaimen sivun korkeus. Muutoin html- ja body-elementtien korkeus määräytyy sivun sisällön mukaisesti (näiden elementtien taustat piirretään silti aina täyskorkeina).
Kiitos avusta :)
Sivusto näyttää nyt tältä.
Tuota tyylittelyä en jaksa laittaa, koska joutuisin tekemään saman jutun vanhaankin pohjaan, kun on valinnaisena teemana.
[offtopic]Kannattaa seuraavaksi keskittyä noiden kuvien kokoon. Esimerkiksi tuo logo.png (~430kt) on aika suuri. Kannattaisi ehkä harkita jpg-kuvia tai muita, joita voi pakata.
Muista, että ihminen ei jaksa odottaa montaa sekuntia sivusi lataamista (koskee kaikkia sivuja). Siksi olen sitä mieltä, että sivut kannattaa optimoida mahdollisimman nopeiksi ladata, vaikka nykyisin "jokaisella" onkin laajakaistayhteydet.[/offtopic]
PNG-optimoija nappaa tuosta tiedostosta 33% pois. Ja siis laatu ei kärsi yhtään. Kokoa on silti sen jälkeen 340 kt, että siinä on sitä varaa säästellä. Logon alempi osa voisi ihan hyvin olla JPG, koska kun sitä zoomaa, niin se näyttää vähän samalta kuin JPG-sotku muutenkin.
Muoks!
Huomasin että jostain järjettömästä syystä alaosa koostui yli 150 000 eri väristä, vaikka se on pelkkää sinistä. Pistin siihen tilalle yksisävyisen sinisen ja nyt optimoitu kuva on 227 kt. Eroa ei paljain silmin huomaa.
Muoks #2
Lisää outouksia, sama vika vaivaa ylälaidan harmaata osaa. Siellä on värejä aivan tolkuttomasti vaikka sen pitäisi olla "pelkkää harmaata". Kun saman tempun tekee siihen (eikä eroa jälleen huomaa) niin harmaasävyn määrän saa pudotettua 110 eri väriin. Tekstille voi myös tehdä värinvähennystempun. En jaksanut kuitenkaan enempää kikkailla katsoakseni, miten pieneksi kuva tulisi.
Muoks #3
http://kontu.selfip.info/html.css.js/
Kolme erillistä kuvaa, 124 kt.
Miksi kirjautumisessa on anti-späm -systeemi? Eikös spämmitunnarit pitäisi kitkeä jo rekisteröintivaiheessa?
Myös kirjautuminen oli typotettu "Kirjottautuminen"
Itse jättäisin nuo "tiedot" näkymään vain ylläpidolle. Itseäni ei ainakaan markkaakaan kiinnosta kuinka monta ip-osoitetta olet bannannut.
Aihe on jo aika vanha, joten et voi enää vastata siihen.