Eli
Minulla on div jonka sisällä on kolme diviä eli kutakuinkin näin:
<div id="container">
<div id="background">
<div id="background_right">
<div id="background_left">
Tähän tulee sisältö
</div>
</div>
</div>
</div>Tarkoituksena on siis saada näyttämään siltä että yhdellä divillä olisi kolme taustakuvaa.. yksi repeattaa taustalla ja oikealle ja vasemmalle tulee sen päälle taustakuvat jotka repeattaa pelkästää y (vai oliko x :)... )
Tämä toimiikin hienosti, mutta kun pitäisi saada vielä mukaan että min-height olisi 100% kaikissa. Tämä toteutuu kuitenkin vain background divissä, eli sivu taustakuvat jäävät yhtä korkeiksi kuin sisältö.
Kysymys kuuluukin, miten tämä onnistuisi yksinkertaisemmillaan (jos unohdetaan min-heightin pois sulkeminen). Tarvitaanko javascriptiä?
Kiitos.
Ongelma on nähtävissä osoitteessa http://garage.stageradio.com
Eivät ole vielä toiminnassa ja muutenkin keskeneräiset, mutta jos havaitsette muita kommervenkkejä niin toki saa kommentoida
Kiitos.
Toi 100% sivun korkeudessa ei ole vieläkään toimiva systeemi, vaikka selaimia onkin kehitelty lukuisia vuosia css:n alkuajoista lähtien...
Jos haluaa tehdä kaiken mutkikkaasti... niin javascriptillä vaan tutkii kävijän monitorin koon ja tulostaa heightin sen mukaan pikseleinä...
Mutta yksinkertaisempiakin konsteja varmaan on... jätän suun vuoron muillekkin ;))
Olet laittanut leiskallesi kiinteän 1024px leveyden. Sinulle riittää yksi 1024px leveä taustakuva. Aika turha tehdä joustavan leveyden systeemiä kun sivun leveys ei koskaan muutu.
Suosittelisin tosin pudotusta vaikka edes 1000px leveyteen, sillä 1024px leveys 1024 x 768 -resoluutiolla johtaa vaakasuuntaisiin vierityspalkkeihin, esim. lähes kaikki miniläppärit kärsisivät tästä. Tätä pienempiä resoluutioita onkin sitten vain mobiililaitteissa.
Offtopic:
Piirrätkö itse nuo ulkoasut? =) Komeita ovat.
Mietin itsekkin vaihtoehtoa että jättäisi kokonaan sivutaustakuvat pois ja tekisin yhden taustakuvan joka olisi koko leiskan levyinen. Tämä onkin vara suunnitelmani jos en saa tätä muuten toimimaan.
Ja kiitos Merri vinkistä taidankin heti vaihtaa 1000px systeemiin ;)
No .. ehkä sitä sitten tyytyy yhteen taustaan kunnes CSS3 standardisoituu, eikös siinä ollut jo useamman taustakuvan mahdollisuus yhdelle objektille?
Offtopic:
Itse "piirsin" :)
Maksimi-korkeus javascriptillä ei ole tämän isompi työ. En kylläkään ole itse sivuilla käyttänyt...
<html>
<head>
</head>
<body onLoad="divSize();">
<div id='header' style="border-width:2px; border-color:#000000; border-style:solid;">
a
</div>
<script language="javascript" type="text/javascript">
document.getElementById("header").style.height=document.body.offsetHeight+"px";
</script>
</body>
</body>
</html>onLoadissa käsket suorittaa divSize()-funktion, jota ei ole määritelty.
Pekka_Mansikka: ongelmana on, että pahimmillaan tuollaiset skriptit aiheuttavat ikuisesti kokoaan kasvattavan sivun, joka jossain vaiheessa saattaa kaataa selaimen. Ongelmaa ei synny, jos pidetään tarkasti huolta siitä ettei ole ylimääräisiä marginaaleja tai sisennyksiä kohdistetussa elementissä eikä sen ulkopuolisissa elementeissä, mutta jos niitä on, niin bodyn koko alkaa kasvaa joka kerta kun sisemmän elementin korkeus muuttuu ja sitten päädytään ikuiseen kierteeseen.
Oma vinkkini on edelleen, että tekee sivulle sen verran sisältöä, jotta ei tarvitse edes harkita 100% korkeustemppujen käyttämistä. Tämä temppu on yksi eniten haluttuja teknisiä kikkailuja, mutta jotka eivät käyttäjille ole mitenkään havaittavia eikä niillä ole vaikutusta sivun käyttökokemukseen. Se on vain asia joka halutaan jostain syystä tehdä, yleensä vähän sellainen kikka kikkailun vuoksi.
CSS3 tosiaan tarjoaa useamman taustakuvan, siten mahdollistaen vaikka useamman taustakuvan lätkäisyn saman tien body-elementtiin. Sitten kun on vielä html-elementtikin olemassa, johon taustakuvia voi lätkiä, niin muihin elementteihin ei edes tarvitse laittaa 100% korkeutta tavoittelevia taustoja.
Öhöm ;))
On load tosiaan ... jäänyt siihen, kun testailin sen nimistä funktiota aiemmin. Se ei kuulu tietty siihen ;)
En tiedä tuon toimivuudesta juurikaan mitään... kun en ole ikinä käyttänyt. Mutta tuollainenkin ominaisuus javascriptiin on suunniteltu...
Sisällön lisäys olisi tosiaan hyvä idea jos olisin ainut joka sivuston sisältöä muokkaa.. Palvelun ideana on että sillä voi muokata itselleen helposti yksilöllisen internetsivu(sto)n. Tämä on siis suunnattu lähinnä yhtyeille, joilla ei ole kokemusta html saatika php ym ym kielistä.
Taidan kuitenkin lähteä jatkamaan idealla että on vain yksi tausta. Ehkä helpompi niin myös ns. "asiakkaille", jotka sitten omia taustojaan sivuilleen päivittelee ja sommittelee.
Kiitokset kaikille vastanneille. Yksinkertaisuus kunniaan.
stageradio kirjoitti:
Tämä on siis suunnattu lähinnä yhtyeille, joilla ei ole kokemusta html saatika php ym ym kielistä.
Miksi veppisuunnittelussa kokematon välittäis siitä, onko sivu selainikkunan korkuinen vai ei? Eikö sille luulis olevan tärkeämpää saada se info nettiin?
Ja eivätkö juuri nettiohjelmoinnista täysin tietämättömät ole se ryhmä, joka aivan luonnostaan osaa "korjata" kaikki asetteluun liittyvät ongelmat hakkaamalla enteriä ja välilyöntiä? >_>
stageradio kirjoitti:
Palvelun ideana on että sillä voi muokata itselleen helposti yksilöllisen internetsivu(sto)n. Tämä on siis suunnattu lähinnä yhtyeille, joilla ei ole kokemusta html saatika php ym ym kielistä.
Olisit heti sanonut ;))
Väittäisin, että nettiohjelmoinnista tietävät eivät välttämättä käytä sen parempaa ratkaisua sivun pidentämiseen. Valitettavan usein vaaditaan vahva kiinnostus CSS-taittoon, että rivinvaihtopelleilyt jäävät unholaan, tai sitten vaan sattuman kautta tulee selville että sen voi hei tehdä CSS:llä :P
Tässä tapauksessa sisältöalueelle vaikka 400px min-height -> problem solved, sivu on aina tarpeeksi pitkä.
Mitäs jos sivulla on niin paljon tavaraa, että sivun korkeus pitäis olla pari näytöllistä? Sviun sisäiset scrollbarit on syvältä.
Suosittelen min-heightin käyttöä. Toimiiko se muuten vielä IE:ssä? Min-width ei ainakaan..
PS. hyvä idea, tee proge loppuun! =) pidät vaan suun supussa muista samankaltaisista palveluista (esim freewebs) niin eiköhän porukkaa löydy.
Kyllä minulla on toiminut IE7:sta asti nuo min-* -CSS määrittelyt.
Ainakin kunhan laittaa selaimen standarditilaan, eli määrittää DOCTYPEn, ja sijoittaa sen ihan tiedoston ensimmäiseksi riviksi. Muuten IE pomppaa quirks-tilaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.