Kirjoittaja Aihe: CSS: kuvan kiinnitys, tekstin vieritys [Ratkaistu]  (Luettu 2070 kertaa)

AimoE

  • Käyttäjä
  • Viestejä: 2714
    • Profiili
Huomasin taas, kuinka monessa pikku laitteessa on kello. Kotona ei ole yhtään sekuntiviisarikelloa, joka pysyisi ajassa, joten olen Javascriptillä tehnyt HTML-sivun, joka näyttää minulle tietokoneella kellon sekunnin tarkkuudella. Olen koonnut kaikkien laitteiden asetusohjeet tälle samalle HTML-sivulle.

Nyt yritän löytää oikeat CSS-loitsut, joilla saisin kellon pysymään paikallaan, kun vieritän tekstiä sen vasemmalla puolella. Voinhan minä sitä kelloa varten avata erillisen selainikkunankin, mutta ihan mielenkiinnosta kumminkin: miten kiinnitän kellon (DIV-elementin) näkymään paikallaan vieressä olevan tekstin vierityksestä riippumatta? Olen aika paljon neuvoja hakenut netistä, mutta toimiva yhdistelmä on vielä hukassa.
« Viimeksi muokattu: 30.10.22 - klo:18.01 kirjoittanut AimoE »

nm

  • Käyttäjä
  • Viestejä: 16242
    • Profiili
Vs: CSS: kuvan kiinnitys, tekstin vieritys
« Vastaus #1 : 30.10.22 - klo:15.45 »
miten kiinnitän kellon (DIV-elementin) näkymään paikallaan vieressä olevan tekstin vierityksestä riippumatta?

Koodia: [Valitse]
position:fixed
Esimerkki: https://davidwalsh.name/css-fixed-position

AimoE

  • Käyttäjä
  • Viestejä: 2714
    • Profiili
Vs: CSS: kuvan kiinnitys, tekstin vieritys
« Vastaus #2 : 30.10.22 - klo:16.43 »
Olin tuota jo kokeilut, mutta en saanut sitä toimimaan siten, että teksti on vasemmalla ja kello oikealla ilman päällekkäisyyttä.

AimoE

  • Käyttäjä
  • Viestejä: 2714
    • Profiili
Vs: CSS: kuvan kiinnitys, tekstin vieritys
« Vastaus #3 : 30.10.22 - klo:17.42 »
Löysin vinkin joka näyttää lupaavalta. Kokeilen sitä seuraavaksi.

AimoE

  • Käyttäjä
  • Viestejä: 2714
    • Profiili
Vs: CSS: kuvan kiinnitys, tekstin vieritys [Ratkaistu]
« Vastaus #4 : 30.10.22 - klo:18.02 »
Sain sen toimimaan vain niin päin, että kello on vasemmalla ja teksti oikealla. Mutta onnistuihan se lopulta.
Koodia: [Valitse]
#text { width: 50%; float: right; }
#clock { width: 50%; position: fixed; }