Taidan kohta palata taulukoiden käyttöön sivujen asemoinnissa. :(
Miten saa diveillä kaksi palstaa niin että niiden korkeus määräytyisi palstoissa olevan tekstin mukaan niin että pisin palsta määräisi myös toisen palstan korkeuden? Eli palstat saman korkeuksisia.
Lisäksi sisäkkäisissä diveissä on pirusti ongelmia. Esim edellä mainitut kaksi palstaa, siis diviä, ovat kolmannen sisällä ja toinen niistä on float: left ja toinen float: right. En tiedä johtuuko noista floateista vai mistä mutta tämä div minkä sisällä kaksi muuta ovat, loppuu heti kun nämä kaksi alkavat. Ts nämä kaksi ulottuvat pidemmälle kuin se jonka sisällä ne pitäisi olla.
Tajuaakohan kukaan tästä selityksestä mitään? Vähän vaikeita selittää mutta toivottavasti joku guru jaksais pähkiä tätä.
Miten saa diveillä kaksi palstaa niin että niiden korkeus määräytyisi palstoissa olevan tekstin mukaan niin että pisin palsta määräisi myös toisen palstan korkeuden? Eli palstat saman korkeuksisia.
Lisäksi sisäkkäisissä diveissä on pirusti ongelmia. Esim edellä mainitut kaksi palstaa, siis diviä, ovat kolmannen sisällä ja toinen niistä on float: left ja toinen float: right. En tiedä johtuuko noista floateista vai mistä mutta tämä div minkä sisällä kaksi muuta ovat, loppuu heti kun nämä kaksi alkavat. Ts nämä kaksi ulottuvat pidemmälle kuin se jonka sisällä ne pitäisi olla.
Tajuaakohan kukaan tästä selityksestä mitään? Vähän vaikeita selittää mutta toivottavasti joku guru jaksais pähkiä tätä.
Vastaukset 33
Vanhimmat
..taulujen käyttö mitenkään kielletty ole, käytä ihmeessä jos se helpommalta tuntuu, eikös se lopputulos kuitenkin ole se tärkein asia.
No eihän ne tietenkään kiellettyjä olekaan. Moni vaan sanoo taulukoita huonoksi tavaksi ja onhan itsellekin tullut asioita vastaan jotka on parempi tehdä jollain muulla kuin taulukoilla.
..eli eivät ne divit kera css:n mitään salatiedettä ole mutta jos tuntuu hankalalata, taulukoista saa myös erittäin epäluettavia jos oikein monimutkaista tekee ja etenkin sisäkkäisiä taulukoita käyttäen, siksi suositellaan muita keinoja, taulukkomuotoisen datan esittämiseen ne sen sijaan ovat omiaan, pointti oli, että lopputulos kuitenkin on tärkein, joten jos taulukoiden käyttö tuntuu helpommalta niin saa niitäkin käyttää.
No mutta voisin nyt yrittää diveillä vielä. Eli onko keinoa saada noita kahta diviä saman korkuisiksi? Mielellään niin että div olisi vähintään jonkun määrätyn korkuinen, kuten esim sivun verran ja jos menee yli tuon, div venyisi. Nyt mitä olen saanut aikaan niin teksti tulee divistä ulos.
Nomutta ei se niin vaikeaa ole, tekaisin malliksi 4 eri tasoista divlayeria.
Tutki koodia jos olisi apua...
4 layer DIVIÄ päälletysten ja vieretysten
z-index: 3
z-index: 4
z-index: 2
z-index: 1
Joko en ymmärtänyt pointtiasi tai sitten tuota sun esimerkkiä. Miten tuon pitäisi auttaa ongelmassani?
Niin IE:llähän noi toimii ihan ok, mutta muilla selaimilla ei. IE:llä siis sisempi div venyttää myös ulompaa, muut selaimet sen sijaan päästävät sisemmän divin ulos ulommasta.
Siinä on malleja joita voit soveltaa.
Anna sivusi osoite ja kerro millaisia divisi pitäisi olla että pystyn auttaa.
Maailman väestä 95% käyttää IE selainta joten miksi tuhlaat aikaasi epäoleelliseen eli muihin selaimiin ?
"Maailman väestä 95% käyttää IE selainta joten miksi tuhlaat aikaasi epäoleelliseen eli muihin selaimiin ?"
Heh. Ensiksikin tuo luku on paljon pienempi (riippuen lähteestä kuinka paljon, mutta kaikissa uudemmissa se on pienempi). Ja se pienenee jatkuvasti.
Toiseksi nykyisin alkaa alan tekijämiehet tehdä täysin päinvastoin - unohdetaan IE ja pidetään huoli että sivut toimivat toimivilla selaimilla.
Minäkin (vaikken tekijämiehiin kuulukaan) olen lopettanut sivujeni testauksen IE:llä - jos joku on niin laiska/tyhmä että käyttää rikkinäistä selainta, niin ei se ole minun häpeäni.
kylläpä niiden sivujen olisi syytä toimia edes niillä tuoreimmilla valtaselaimilla.
kaikki kun eivät voi vaikuttaa siihen, millä selaimella surffailevat.
et tosin taida kaupallisia sivuja tehdäkkään..
Ette voi kuitenkaan vaikuttaa ihmisten päätöksiin mitä selainta ne käyttää niin koitetaan nyt vaan elää sen asian kans. Suuri osa käyttää IE:tä joten sivujen olis hyvä sillä toimia, tai näin ainakin itse haluaisin. Mutta myös muiden selainten määrä on kasvamaan päin, joten myös niillä sivujen tulee toimia. Ei tästä tämän enempää!
Pari esimerkkiä ongelmista löytyy
http://www.kanetti.fi/~rexodus/testi/
Sivu1:ssä on "palsta diveille" määritetty korkeus. Tällöin ainakaan Firefox EI osaa pidentää diviä tekstin ollessa pidempi. IE osaa mutta toinen palsta ei pidenny saman mittaiseksi.
Tässä on Firefoxilla jotain häikkää muutenkin. Välillä kun sivua päivittää, oikea "palsta div" hyppää vasemman alapuolelle. Toisella koneella tätä ei kuitenkaan esiintynyt että en tiedä mistä sitten johtuu.
Sivu2:ssa taas korkeutta diveille ei ole määritetty. Tällöin jopa Firefox osaa pidentää diviä tekstin mukaan. Mutta edelleenkään oikea palsta ei seuraa vasemman korkeutta.
Joko tämä helpotti ymmärtämistä?
% osuus voi heittää +/- jonkin verran.
En kehtaa väitellä marginaalisista selainasioista
kun varmaankin tarvitset tietoa diveistä ?
Kaupallisia sivuja teen.
Kun nyt ammattilainen sattui tulemaan paikalle niin vilase noita sivuja ja kerro mikä niissä mättää tai miten ne kannattais tehdä. Ei siis edes välttämättä diveillä mutta ei taulukoilla ainakaan.
Tuommosta on aika vaikea diveillä toteuttaa, asia muuttuisi paljon helpommas mikäli haluaisit näin.
|VALIKKO (kiiteä leveys)| SIVU mukautuva leveys. Tällöin korkeuden saa helposti samaksi näin.
Ja sitten määritellään kehys diville taustakuva joka on tämän kaltanen xxxx|------- ja sitten annetaan toistua allekkain.
min-heightilläkin saa jonkinmoista lukaseppas http://www.mezzoblue.com/tests/minheight/t4a.html
Yksi yleisesti käytetty keino on myös tehdä hybridi sivu (table div css) siis teet kaks palstasen taulukon jossa molemmille sarakkeilla haluttu taustaväri ja sit border määritykset jne... nämä määritykset tehdään css ei suoraan html koodiin.
*Lisäksi sisäkkäisissä diveissä on pirusti ongelmia. Esim edellä mainitut kaksi palstaa, siis diviä, ovat kolmannen sisällä ja toinen niistä on float: left ja toinen float: right.*
Miksi float right ja left?
Jos ensinmäiselle float left, niin toinen tulee automaattisesti sen perään ilman floattia ja mikäli leveyttä ei määritellä niin se on automaattisesti loput, ja mikäli toiselle floatia tarvitaan niin se laitetaan myös left tai right jos ensimäiselläkin se on.
Ja Firefoxilla on tapana seota tai tiedä sit onko se standartien mukaista ylläkuvatussa kehys,valikko ja sisältö tilanteessa jos kehyksellekkin on määritelty border jne.... ongelmasta pääsee määrittämällä kehykselle float:left tai right
Laitetaampas se oikea linkki itse ohjeeseen eikä esimerkkiin http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
*Ei siis edes välttämättä diveillä mutta ei taulukoilla ainakaan.*
Miksi kauhea taulukko vastustus?
Ei taulukot ole pahasta oikeinkäytettynä ja kun määritellään taulukon ominaisuudet css avulla niin mukautuskin on kohtalaisen helppoa. Tapauskohtasesti mietitään parhain tapa, vaikka kuulemma div css antaa jotain status arvoa niin ihan kaikkea sillä ei sentään tarvitse tehdä eikä se ihan kaikkeen sovellukkaan. Ei se yksi taulukko paljoa status arvoa laske?
Pahasta on jos käytetään kymmeniä sisäkkäisiä taulukoita, usein nämä saa helpommin div css tai table div css
1. Miten divien leveys vaikuttaa niiden korkeuteen? En saa korkeutta toimimaan noinkaan.
2. Olit oikeassa, ei oikealle diville tarvii laittaa floatia eikä leveyttä. Ilmeisesti jos floatia ei laittaisi myöskään vasempaan diviin, uloimmat divit venyisivät oikein. Mutta milläs saat kaksi diviä rinnakkain ilman floatia tai absolute positionia? Et millään?
3. Miksi taustakuva noin? Miksi diveille ei voi laittaa esim taustaväriä? Siis molemmille omansa?
Tämä säätäminen on mennyt jo niin pitkälle että nyt on jo "pakko" saada toimimaan tuo diveillä oikein. :)
Tässä linkissä olis juttua vastaavasta, tekele toimii kun muuttaa sen containerin korkeuden, mutta divit ei toimi samalla tasolla kun korkeus menee yli containerissä määritellyn korkeuden..
http://keskustelu.suomi24.fi/show.fcgi?category=108&conference=654&posting=22000000010738007
3:s kohtaan jotain vastausta...
Korkeudet kun ei oikein pelaa yhteen molemmissa diveissä, niin voit "huijata" laittamalla taustakuvaan taustavärit, tuolla tapaa lyhyempikin divi täyttyy taustavärillä, tosin ei oikein toimi jos leveydet on prosentteina..!!
Katos poikia, ovelia olette :D
Tuolla tavoin sen tosiaan saa näyttämään kuin molemmat olisi alas asti. Harmi ettei tuo "ole oikein". Siis niinkuin hain. Toki toimiva tuokin. Vaikkakin huijausta ;) Miks tuo ei muuten toimi jos leveys on prosentteina?
Mutta siis yhteenvetona, divejäkö ei ole mahdollista saada käyttäytymään niin kuin hain?
Diveistä en sen enempää tiedä kuin sinäkään, mutta mukava kokeilla kaikkea uutta ja ihmeellistä ja sitä nuo paljon kehutut divit ovat, niiden hyödystä toiminnallisuuteen verratessa en ota kantaa, mutta tietyissä jutuissa ne varmaan on ok..!!
Taustakuvien leveys on määritelty kuvankäsittelyssä pikseleinä, jos divi on prosentteina, niin siinä syntyy ristiriita, ehkä kikkailemalla saa aikaan toimivan venytyksen taustakuvaan, mutta siinä vaiheessa mulla ainakin on hihat palaneet ja teen tableilla jotka toimii miten haluaa..=)
Tossa nyt olis tollanen esmerk missä ei ole käytetty tableja eikä taustakuvia:
http://www.456bereastreet.com/lab/equal_height_ii/
Mutta jos oikean puoleinen palsta on kuitenkin "liuhuva" eli sen kokoa ei ole määritetty pikseleinä (tai mitenkään muutenkaan), niin mites tuo taustakuva voi toimia?
No tuossa alla taitaa olla kuitenkin jo toimiva ratkaisu, mutta tulipahan vaan mieleen. Kiitokset.
Tämä taitaa viimein olla juuri se mitä hain. Ainakin pikaisen testauksen perusteella toimii juuri niin kuin halusin.
SUURKIITOKSET! Erityisesti no tables_:ille mutta myös muille yrittäneille!
Innostuin ennen aikojani :( Eihän tuo esimerkkisivukaan toimi IE:llä. Firefoxilla sen sijaan olisi toiminut mallikkaasti! Noh, testaillaanpa.
Tuo sivuntekijä on niitä 'ammattimiehiä' jotka eivät viitsi tuhlata aikaansa toimimattoman p:n kanssa. Oikea asenne.
Eli siinä esimerkkisivullahan lukee: "Too bad it doesn’t work in you-know-which-browser".
Siinä alhaalla olevan linkin takana olevassa artikkelissa kerrotaan asiasta enemmän.
Eipähän tuommosta ajattelua voi harrastaa kuin omilla pikkusivuilla, kyseessä on kuitenkin suosituin selain joten kaupallisella puolella jätetään ennemmin tuki muilta selaimilta pois kuin IE:ltä. Tosin usein selaintunnistuksen avulla mukautuvalla koodilla ratkeaa ongelma kuin ongelma.
Katsoppas http://cssplay.co.uk/layouts/3cols.html näyttäisi toimivan ainakin IE, Opera ja Firefox tosin tiedä sit saako noita sivupalstoja muutettua prosenteis, pikavilkasulla koodiin näyttäisi kyllä onnistuvan.
Näppärä keino tuokin, mutta... Koitapa suurentaa tekstin kokoa, siis ihan selaimesta. Eipä pysy sanat divin sisällä jos sana on liian pitkä. Tuossa esimerkissä pitää suurentaa aika paljon ennenkö huomaa, mutta huomaa aikanaan. Ei kovin hyvä noin isompia tekstimääriä silmällä pitäen.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Tee taustakuva jossa vasemmalta 500px jotain väriä ja loput 250 jotain muuta..
Ota värit pois sidebarista ja mainista, "Footer" teksti pois ja sen p padding 0, ei näy sekään jollet halua..
Sidebarista otat leveyden pois, wrappiin leveys 100% ja teet taustakuvasta vaikka 2000px leveän, ensin 500px jotain väriä ja loput jotain muuta ja wrappiin repeat-y, niin saat column 2 skaalautuvaksi ja divit täyttyy tasaisesti, näyttäisi toimivan IE, FF, Opera..=)
Olet kyllä aivan oikeassa. Noin sen saisi tehtyä. Enpä vain huomannut sanoa, että ajattelin jättää valkoista kumpaankin reunaan. Tällöin tuo taustakuva ei onnistuisi. Jos haluaa värittää koko sivun niin tuo on hyvinkin toimiva ratkaisu.
eihän tuo taustakuva bodyyn tule vaan wrappiin..?
Voit laittaa wrappiin haluamasi leveyden ja bodyyn #fff, niin reunoissa on valkoista..=)
Tuon esimerkin kyllä saa toimimaan ilman sitä taustakuvaakin jos haluaa jotain muuta taustakuvaa käyttää diveissä kun pelaa niiden bgvärien kanssa, mutta silloin täytyy tietää kunpa columnni on aina korkeampi..
Empäs kokeillut suurentaa fonttikokoa, mutta kuinka moni suurentaisi fonttikokoa noinkin paljon, että tuota ongelmaa esiintyisi?
Eikös yleensä pidetä sääntönä, että sivuston on kestettävä pari kolme pykälää isompaa fonttia, älyttömällähän suurentamisella hajoaa tai menee lukukelvottomas lähes jokainen sivu. Tosin tuosta esimerkissä tuota esiintyy myös Operalla jossa on parhaiten toteutettu fontin suurennos/zoomaus
Tekstimäärällähän tuossa ei ole mitään vaikutusta vain sanojen pituudella.
Yhä ihmettelen miksi et tee tuota taulukolla, ei se yksi pienenpieni taulukko divien seassa ole paha asia.
Eipä tule aina kaikkea ajateltua tarpeeks tarkasti. Olet aivan oikeassa. Jälleen.
Tuo esimerkki sivu on vähän huono tuon ongelman löytämiseen lyhyiden sanojensa takia. Jos palsta on lyhyehkö ja sanat pitkiä, kuten suomen kielessä useasti on, palstat sekoavat helpommin. Tietenkin tuokin ongelma on vältettävissä, ainakin mainitsemasi parin, kolmen suurennuksen verran.
Tekstimäärällä tarkoitinkin sitä että kun on enemmän tekstiä, on siinä helpommin myös pitkiä sanoja.
Ja kuten jo jossain vastauksessani sanoin, tämä homma on mennyt jo siihen pisteeseen että ajatus "Tämä on mahdollista saada toimimaan, siksipä se PITÄÄ saada toimimaan" on vienyt voiton vaikka se aiheuttaakin pään hakkaamista siihen kuuluisaan Karjalan mäntyyn :D Alan olemaan kaiken lisäksi jo hyvin lähellä. Tulipa samalla opittua uusia ominaisuuksia html:stä.