Ubuntu Suomen keskustelualueet

Ubuntun käyttö => Ohjelmointi, palvelimet ja muu edistyneempi käyttö => Aiheen aloitti: AimoE - 30.10.22 - klo:14.25

Otsikko: CSS: kuvan kiinnitys, tekstin vieritys [Ratkaistu]
Kirjoitti: AimoE - 30.10.22 - klo:14.25
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.
Otsikko: Vs: CSS: kuvan kiinnitys, tekstin vieritys
Kirjoitti: nm - 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
Otsikko: Vs: CSS: kuvan kiinnitys, tekstin vieritys
Kirjoitti: AimoE - 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ä.
Otsikko: Vs: CSS: kuvan kiinnitys, tekstin vieritys
Kirjoitti: AimoE - 30.10.22 - klo:17.42
Löysin vinkin (http://www.java2s.com/Tutorials/HTML_CSS/CSS_Layout_How_to/Column/Fix_left_column_and_scroll_right_column.htm) joka näyttää lupaavalta. Kokeilen sitä seuraavaksi.
Otsikko: Vs: CSS: kuvan kiinnitys, tekstin vieritys [Ratkaistu]
Kirjoitti: AimoE - 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; }