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!
Apua CSS:n käyttöön sivun taitossa?
10
393
Vastaukset
- apuja
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.- H. Moilanen
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) - Ridge
H. Moilanen kirjoitti:
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... - jepjep
Ridge kirjoitti:
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.
- H. Moilanen
Ridge kirjoitti:
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...Juuri tätä hain. En voi kylliksi kiittää vaivannäöstäsi!
- H. Moilanen
jepjep kirjoitti:
vaan eipä toimi mozillalla. kenttä ei veny tekstin mukana.
Täytyy pähkäillä tuota Mozillaan liittyvää ongelmaa jossakin välissä, mutta tässä kohtaa riittää, että toimii IE:llä ja NN:llä.
- Ridge
jepjep kirjoitti:
vaan eipä toimi mozillalla. kenttä ei veny tekstin mukana.
kun laittaa "height: auto;", eikä kiinteetä korkeutta pikseleinä..=)
- Ridge
H. Moilanen kirjoitti:
Juuri tätä hain. En voi kylliksi kiittää vaivannäöstäsi!
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..=) - jepjep
Ridge kirjoitti:
kun laittaa "height: auto;", eikä kiinteetä korkeutta pikseleinä..=)
virittelyksi menee ärsyttävällä tavalla jos haluaa määrätä vielä tuon korkeudenkin.
- H. Moilanen
Ridge kirjoitti:
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..=)Täytyypä perehtyä kyseiseen ohjelmaan. Näiden leiskojen parissa aika tosiaan tuppaa kulumaan rattoisasti, eli kaikki helpotus on tervetullutta...
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Putin hoiti Suomen natoon ja myös Ruotsin
Iso kiitos Vladimir Putinille. Hänen ansiosta pääsemme nyt Natoon. Putin halusi Naton lähelle ja nyt sai. Voimme tästä kiittää vain Putinia.6437896Niinistö teki hetkessä Suomesta Venäjän ydinaseiden maalitaulun
Kaiken lisäksi mies vielä lällätteli Putinille eilisessä tiedotustilaisuudessa ja käski katsomaan itseään peiliin. Kyllä vähän asiallisempaa käytöstä4482170Voi Stefu ja sun kiivas luonteesi
Sielä lentelee ullakkohuoneiston ikkunasta daamin vaatteet ja matkalaukut pitkin pihaa. Toisaalta,en ihmettele yhtään että tämä suhde päättyi näin,kyl2272082- 1431658
Veikkaus: Miten The Rasmus pärjää Euroviisuissa?
Euroviisuhuuma on ylimmillään, kun Suomi ja The Rasmus taistelee biisillään Jezebel. Bändi on tikissä, kunhan Lauri Ylösen ääni kantaa. Mitä veikka511221Ohhoh! Martina Aitolehti ja seurapiirihurmuri-Jesper ekassa yhteiskuvassa - Sutinaa Mallorcalla!
Martina Aitolehti ja seurapiirijulkkis-Jesper nauttivat toisistaan varsin vauhdikkaissa merkeissä Mallorcalla. Aitolehti ei ole esitellyt rakastaan vi251197Stefanilta tuli taas karu totuus Sofiasta
Marokkolainen h*o*ra! Voi tsiisus kun mulla on hauskaa! Lumput lentää ikkunasta kun Stefu raivoaa h*uralleen🤣🤣🤣 Nyt ne popparit tulille, tästä tule951067Ootko onnellinen kun ei tarvitse
nähdä tätä tyhmää naamaa enää koskaan? Multa se särkee sydämen, mutta minkäs teen. Vaikka olisi kuinka sinnikäs eikä hellittäisi, se ei aina auta.65828Oletko nähnyt eroottiset kohuleffat? Fifty Shades Of Grey -trilogia tv:stä
Fifty Shades -trilogia starttaa, kun nuori opiskelijanainen Anastasia tapaa rikkaan liikemiehen. Seksisuhdehan siitä starttaa, höystettynä sadistisill6712Steppuli veressä
Seiskan lööpissä Steppulilla naama ja nyrkit veressä. Ei tainnut ihan kamojen pihalle paiskominen riittää. Onkohan pistänyt kämpän tuusannuuskaks.54710