Kaipaisin aloittelijana hieman apua elementtien asemointiin css:n avulla. Tätä on pikkuisen hankala selittää, mutta koittakaa saada jotain tolkkua:
Yritän luoda html-sivulle leiskaa pelkillä css-määrityksillä ilman taulukoiden käyttöä. Tilanne on sellainen, että minulla on absoluuttisesti määritetty sijainti elementille A (top:0px left:0px), joka on kooltaan 200 x 200 pikseliä (DIV-tagit). Elementti B on myös sijoitettu absoluuttisesti (top:210px, left:0px) ja on kooltaan samat 200 x 200. B siis sijaitsee pystysuunnassa A:n alapuolella sivulla. Mikäli kirjoitan tekstiä A:han siten, että se ei mahdu kaikki tuohon 200 x 200 pikselin kokoiseen "laatikkoon", alkaa A kasvaa alaspäin tekstin mukana. Z-arvosta riippuen A siis menee joko B:n päälle tai alle.
Voisin tietysti määrittää A:n skrollattavaksi, jolloin itse alue ei kasva pysty suunnasa, mutta mieluummin pyrkisin sellaiseen ratkaisuun, että A työntäisi B:tä edellään alaspäin sivulla (kuten tapahtuu päällekkäisissä taulukon soluissa). Onko tähän olemassa jotakin keinoa? Eli voinko määrittää B:n sijainnin siten, että sen yläreuna olisi aina 10:n pikselin päässä A:n alareunasta?
Mikäli joku jaksoi lukea sepustukseni läpi ja viitsii vielä tarjota apuaan, esitän isot kiitokset jo tässä vaiheessa!
Yritän luoda html-sivulle leiskaa pelkillä css-määrityksillä ilman taulukoiden käyttöä. Tilanne on sellainen, että minulla on absoluuttisesti määritetty sijainti elementille A (top:0px left:0px), joka on kooltaan 200 x 200 pikseliä (DIV-tagit). Elementti B on myös sijoitettu absoluuttisesti (top:210px, left:0px) ja on kooltaan samat 200 x 200. B siis sijaitsee pystysuunnassa A:n alapuolella sivulla. Mikäli kirjoitan tekstiä A:han siten, että se ei mahdu kaikki tuohon 200 x 200 pikselin kokoiseen "laatikkoon", alkaa A kasvaa alaspäin tekstin mukana. Z-arvosta riippuen A siis menee joko B:n päälle tai alle.
Voisin tietysti määrittää A:n skrollattavaksi, jolloin itse alue ei kasva pysty suunnasa, mutta mieluummin pyrkisin sellaiseen ratkaisuun, että A työntäisi B:tä edellään alaspäin sivulla (kuten tapahtuu päällekkäisissä taulukon soluissa). Onko tähän olemassa jotakin keinoa? Eli voinko määrittää B:n sijainnin siten, että sen yläreuna olisi aina 10:n pikselin päässä A:n alareunasta?
Mikäli joku jaksoi lukea sepustukseni läpi ja viitsii vielä tarjota apuaan, esitän isot kiitokset jo tässä vaiheessa!
Vastaukset 10
Vanhimmat
Hetkonen, en ole varma ymmärsinkö oikein mutta tämä tuli ekana mieleen.. korjatkaa jos olen väärässä mutta B:ssä ei kannata käyttää absoluuttista sijoitusta tai px-kokoja. Silloinhan se B on ja pysyy siinä kohdassa minkä olet sille määritellyt, vaikka mikä olisi ja tulisi.
Eli jos muunnat sen joksikin toiseksi määreeksi tai jätät kokonaan , luulisi onnistuvan? Tai sitten muunnat vain suuremmaksi luvuksi tuota B:n 210px -> jolloin se siirtyy alemmas.
Ymmärsit kyllä ihan oikein. Selostin kuitenkin tilanteen hiukan huonosti ja tuo B:n absoluuttinen top -arvo 210 px vielä hämäsi. Arvo 210 px on vain tämänhetkinen, väliaikainen määritys, jotta saan käsityksen ulkoasun muodostumisesta. Ajattelin sen havainnollistavan tilannetta, mutta tosiasiassa se ohjasi vain harhaan.
Olet siis aivan oikeassa siinä, että B:lle ei voi antaa absoluuttista sijaintia, koska A:n korkeus saattaa vaihdella eri sivuilla riippuen siitä, kuinka paljon sisältötekstiä kullekin sivulle tulee. Ja B:n olisi siis tarkoitus "liikkua A:n mukana". Kun A:n korkeus kasvaa 10 px, B liikkuu 10 px verran alaspäin jne.
Yksinkertaistettuna varsinainen kysymykseni siis kuuluu:
Miten saan käytännössä määritettyä A:n alareunan ja B:n yläreunan etäisyyden pysymään vakiona (esim. 10 px) riippumatta siitä, kuinka korkea A on?
(Voehan helvata, yllä oleva kapulakieli saa näkemään painajaisia yläasteen matematiikan tunneista... pahoittelen)
Olisko tästä apua, nuo A ja B on div:n sisällä joten voit sijoittaa sen minne haluat ja muut seuraa..
Untitled
Tähän tulee tekstiä...
Tästä jatkuu...
vaan eipä toimi mozillalla. kenttä ei veny tekstin mukana.
Juuri tätä hain. En voi kylliksi kiittää vaivannäöstäsi!
Täytyy pähkäillä tuota Mozillaan liittyvää ongelmaa jossakin välissä, mutta tässä kohtaa riittää, että toimii IE:llä ja NN:llä.
kun laittaa "height: auto;", eikä kiinteetä korkeutta pikseleinä..=)
Lataa tämä editori, hyvä ja ilmainen..
http://www.chami.com/html-kit/download/
ja siihen tämä plugin..
http://www.chami.com/html-kit/plugins/info/hkdivstarter/
Tuolla pystyy tekemään div-tableja erittäin helposti ja nopeasti, jää mukavasti sitten aikaa tapella eri selaimien kanssa et se css-layout näkyis edes jotenkin oikein..=)
virittelyksi menee ärsyttävällä tavalla jos haluaa määrätä vielä tuon korkeudenkin.
Täytyypä perehtyä kyseiseen ohjelmaan. Näiden leiskojen parissa aika tosiaan tuppaa kulumaan rattoisasti, eli kaikki helpotus on tervetullutta...