Apua CSS:n käyttöön sivun taitossa?

H. Moilanen

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!

10

393

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • 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

      • 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

    1. 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.
      Maailman menoa
      643
      7896
    2. Niinistö 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ä
      Maailman menoa
      448
      2170
    3. Voi 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,kyl
      Kotimaiset julkkisjuorut
      227
      2082
    4. Poliisi otti Stefun kiinni!

      Seiska tietää kertoa.
      Kotimaiset julkkisjuorut
      143
      1658
    5. 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ä veikka
      Viihde ja kulttuuri
      51
      1221
    6. Ohhoh! 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 vi
      Kotimaiset julkkisjuorut
      25
      1197
    7. Stefanilta 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ä tule
      Kotimaiset julkkisjuorut
      95
      1067
    8. Ootko 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.
      Ikävä
      65
      828
    9. Oletko 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ä sadistisill
      Suhteet
      6
      712
    10. Steppuli veressä

      Seiskan lööpissä Steppulilla naama ja nyrkit veressä. Ei tainnut ihan kamojen pihalle paiskominen riittää. Onkohan pistänyt kämpän tuusannuuskaks.
      Kotimaiset julkkisjuorut
      54
      710
    Aihe