Keskustelu: Nettisivujen teko: Elementti kiinteäksi

Jos minulla on elementit vasen ja oikea jotka ovat vierekkäin, niin miten saan oikean elementin pysymään paikoillaan jos rullaa vasenta? Perjaatteessa kuten vasen olisi frame, mutta diveillä. Eli oikean palkin teksti pysyy paikallaan kun rullaa... Saikohan selvää?

Kuten kuvalauta.fi:ssäkö

Kyllä, mutta tuo on jollain muulla toteutettu... Lisäksi sen tulisi olla yhtä korkea kuin viereinen elementti.

Toteutuksen läydät http://www.kuvalauta.fi/menu.html

Laita elementeille vakiokorkeus ja omat vierityspalkit (overflow: auto).

Jokotai: Ei ole mieluinen ratkaisu...
Metabolix: Kyllä se varmaan muutenkin onnistuu, sillä sekään ei ole kiva kun vierityspalkki on jossain hevon kuusessa.

Sivun pohja on jotenkuten tälläinen: http://merri.net/xhtml/macro_divikorkeus.html

Siis haluatko että kumpaakin voi rullata vai että vain vasenta.

Perjaatteessa kuten Ohjelmointiputkan sivukin toimii, mutta tuon oikean elementin tekstit jähmetettäisiin tuohon. Eli, koko sivu liikkuisi, mutta oikean palkin tekstit pysyisivät kuitenkin koko ajan näkyvissä.

O_o eihän tuo Ohjelmointiputkan oikea palkki näy jos tarpeeksi alas scrollaa.

Ei niin, mutta tarkoitukseni on saada omalle sivulle se näkymään.

Muuten, tuossa Merrin kirjoittamassa sivussa on ongelmana se, jos oikea elementti on vasenta korkeampi niin se menee yli... Miten se korjataan, toisinpäin se jo toimii...

Hups tuossa tosiaan lukee mutta. Mutta kuvalaudan mallihan sopii kuvaukseen erinomaisesti.

Voit laittaa oikeanpuoleiselle elementille määreen position: fixed ja asettaa sijainnin absoluuttisesti. Ongelmana tässä on, että sivu voi joissain tilanteissa skaalautua niin, että absoluuttinen sijainti onkin väärä. Myöskään tuo samaan pituuteen venyttäminen ei enää toimi, ja pienellä näytöllä osa elementistä saattaisi olla ruudun ulkopuolella tavoittamattomissa.

(Vanhat IE-versiot eivät osaa fixed-asettelua, joten jos haluat niidenkin toimivan, joudut ympäröimään koko sivun ylimääräisellä divillä, joka on body-elementin kokoinen ja sisältää vierityspalkin. Tällöin heti body-elementin alla position: absolute ajaa saman asian kuin fixed normaalisti.)

ÄÄÄÄkh. Vanhat IE:t ei osaa tehdä mitään oikein. Parempi jättää niiden käyttäjät omaan arvoonsa.

Juhko kirjoitti:

ÄÄÄÄkh. Vanhat IE:t ei osaa tehdä mitään oikein. Parempi jättää niiden käyttäjät omaan arvoonsa.

Huono ratkaisu. IE:llä on edelleen varsin kattava käyttäjäkunta ja nettisivujen suunnittelun kannalta heidätkin on hyvä ottaa huomioon, vaikka se vaatisikin erikoisjärjestelyjä.

Nyt puhutaan ilmeisesti IE6:sta. Todella vanhoja IE:itähän ei juuri kukaan enää käytä.. IE5 on ehkä joitain promilleja.

IE6-käyttäjien jättäminen omaan arvoonsa voi olla ihan hyvä neuvo jos tekee vain harrastesivuja ja vakavammin otettavat sivut on ehkä jossain parin vuoden päässä.. Silloin toivon mukaan se IE6:n osuus on paljon nykyistä pienempi. Eihän kukaan kai nykyäänkään tue esim. IE3:sta...

Jos tekee harrastesivuja tai suomenkielisiä sivuja, niin IE6-tuki on aika kannattamatonta. IE6:n osuus on Suomessa noin 5% ja käyrä vetää vain yhteen suuntaan. Siksitoisekseen... jos sivu näyttää ihan ookoolta, sitä pystyy lukemaan ja käyttämään, niin ei sillä ole mitään väliä, vaikka se ei toimi täsmälleen samalla tavalla tai näytä täsmälleen samalta kuin muilla selaimilla. Kävijälle tärkeintä on saada sivuilta se sisältö.

Tässä on yksi tapa toteuttaa paikallaanpysyvyys muille elementeille (pohjautuen tähän esimerkkiin):

#left {
	height: 400px;
	margin: 0 271px 0 0;
	overflow-y: scroll;
	padding: 5px;
	position: relative;
}

Eli nyt kun #leftin sisälle tulee tarpeeksi sisältöä, niin sitä pystyy vierittämään. Vierityspalkki ilmestyy tosin #leftin kohdalle. Kaikki muu pysyy paikallaan.

En ole kovin suuri position: fixed;n fani. Sen kyllä saa kikkailtua paikalleen (esim. ensin margin-leftiä 50% ja sitten vaan tarpeeksi leftiä niin sen saa keskitykseen mukaan), mutta sitten esimerkiksi joillakin (kaikilla?) mobiiliselaimilla kyseinen elementti ei käsittääkseni tulisi edes ollenkaan näkyville, koska se olisi pystysuunnassa ulkona ruudulta.