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

405

Äänestä

    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ä.

    Takaisin ylös

    Luetuimmat keskustelut

    1. Räppäri kuoli vankilassa

      Ei kuulemma ole tapahtunut rikosta. Sama vahinkohan kävi Epsteinille. https://www.hs.fi/suomi/art-2000011840869.html "
      Maailman menoa
      107
      4662

    2. Välillä kyllä tuntuu, että jaat vihjeitä

      Mutta miten niistä voi olla ollenkaan varma? Ja minä saan niistä kimmokkeen luulemaan yhtä sun toista. Eli mitä ajatella
      Ikävä
      29
      3433

    3. No kyllä te luuserit voitte tehdä mitä vaan keskenänne, sitä en ymmärrä miksi pelaat,nainen

      Pisteesi silmissäni, edes ystävätasolla tippui jo tuhannella, kun sain selville pelailusi, olet toisen kanssa, vaikka ol
      Ikävä
      45
      2390

    4. Missä näitte viimeksi?

      Missä näit kaivattua viimeksi ja oliko sähköä ilmassa?
      Ikävä
      49
      1514

    5. Minulla on käsitys

      Ettet ole kovin se k s uaalinen ihminen.
      Ikävä
      36
      1423

    6. Harmittaako sinua yhtään?

      Tuntuuko pahalta ollenkaan?
      Ikävä
      38
      1236

    7. Puukotus yöllä

      Oli kaveri hermostunut ja antanut puukosta.
      Sotkamo
      14
      1142

    8. Mitä sun kaltainen ihminen tekee tämmöisessä paikassa?

      Et kuulu tänne?
      Ikävä
      159
      1036

    9. On varmaan turn off

      Mutta olen tosi kokematon.
      Ikävä
      27
      1028

    10. rakas J siellä jossain

      Niin ikävä sua. -P. Nainen
      Ikävä
      6
      954
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt