Keskustelu: Nettisivujen teko: Div ei pysy keskitettynä sivua sivusuunnassa vieritettäessä

Ongelmana sellainen, että sivua vasemmalle ja oikealle skrollattaessa div-rykelmä ei pysy näytön keskellä vaakasuunnassa.

<div style="width: 1050px; top: 0; left: 50%; margin-left: -525px; position: fixed; z-index: 10;">
Tämä pysyy oikein paikallaan, kun sivua vieritetään vasemmalle ja oikealle.
</div>

<div style="white-space: nowrap; margin-left: auto; margin-right: auto; margin-top: 150px; overflow: visible;">
Tässä on niin paljon tekstä, että selainikkunan tulee vaakavierityspalkki. Vierityspalkki saa tulla ja homma toimii muutenkin OK tämän divin osalta.
</div>

<div style="clear: both; position: relative; overflow: hidden; width: 1050px; margin-left: auto; margin-right: auto;">
  <div style="position: relative; clear: both;">
    <div style="clear: both; width: auto; margin-left: 30px; margin-right: 30px;">
      Tämä ei pysy keskitettynä, kun sivua vieritetään vasemmalle tai oikealle. Pitäisi kuitenkin saada tämä pysymään näytön keskellä (ei pystysuunnassa) ja sivun alalaidassa (ei näytön alalaidassa).
    </div>
  </div>
</div>

Olisiko antaa vinkkiä, miten saisin tämän korjattua? Kiitos.

Elementti ei tietenkään pysy paikallaan ikkunaan nähden, kun se on vieritettävän elementin (body/html) sisällä ja siis vierii mukana. Ratkaisunkin voi tästä suoraan päätellä, eli laita yli menevä sisältö eri elementtiin ja vierityspalkit kyseiselle elementille.

<div style="max-width: 100%; overflow: scroll;">
  Tänne laitetaan liian isot asiat.
</div>
<div>
  Tämä pysyy paikallaan.
</div>

Tietenkin itse vierityspalkki tässä tapauksessa tulee ”väärään” paikkaan.

Toinen vaihtoehto on kikkailla JavaScriptilla.

Pitäisi saada vierityspalkki oikeaan paikkaan. Muuten toimiva ratkaisu, kiitos.

xxmss kirjoitti:

Pitäisi saada vierityspalkki oikeaan paikkaan.

Varmaankin ymmärsin ongelman väärin, sillä lisäämällä 'position:fixed;' viimeiseen DIViin pitäisi riittää?

En saanut toimimaan. Div katoaa näkyvistä, koska se ei mahdu ensimmäiselle näytölliselle. Miten divin position:fixedin saisi toimimaan niin, että div ei olisi näytön alalaidassa vaan vasta sivun alalaidassa eli kaiken sisällön jälkeen?

Eikö parempi ratkaisu olisi estää vierityspalkki kokonaan, ja mahduttaa iso sisältö näytön leveyteen? Muutenkin tulisi välttää kiinteitä kokoja kuin ruttoa, tee sivustosta ennemmin responsiivinen näytön kokoon.

xxmss kirjoitti:

En saanut toimimaan. Div katoaa näkyvistä, koska se ei mahdu ensimmäiselle näytölliselle.

Ilmeisesti yritit soveltaa tuota johonkin muuhun kuin antamaasi esimerkkikoodiin (rivin 11 DIViin)?

xxmss kirjoitti:

Miten divin position:fixedin saisi toimimaan niin, että div ei olisi näytön alalaidassa vaan vasta sivun alalaidassa eli kaiken sisällön jälkeen?

Ei kait mitenkään, koska kiinteässä sijoittelussa elementti irrotetaan kokonaan elementtivirrasta ja se saa kiinteän sijainnin suhteessa selaimen työalueeseen. Elementti myös kiinnitetään sijaintiinsa siten ettei se vierity muun sisällön kanssa.

Nyt kuulostaa taas siltä, että tatvitset ehdotonta sijoittelua, kts.:

http://weppipakki.com/css/css2/position.htm

ja/tai tarkennettua vaatimuskuvausta.