Miten tehdään sivut, joissa:
- selaimen keskellä 900px leveä kehys (div page), joka "venyy alaspäin" kehystäen sivulle tulevat asiat
- ylereunassa 900px leveä kuva (omana divinään: div upper)
- sen alta kehyksissä oleva sivu jaettu kahtia 200px ja 700px leveiksi kentiksi (div left ja div right)
- div rightin alla on div bottom ja nämä molemmat yhteensä yhtä korkeita kuin div left
- div bottom sisältää 700px kokoisen kuvan
- div left sisältää valikon ja jos div rightiin tulee paljon juttua, osaa div leftin alareunaan tulla lisää tyhjää tilaa niin että sivun asioita reunustava kehys on aina suorakulmion muotoinen
- div bottom on joka tilanteessa aivan sivun alareunan kehyksessä kiinni (sisltää kuvan)
Kyselen siksi, kun omien tekeleideni ongelmana näyttää olevan se, että jos div rightiin tulee paljon asiaa, paistaa sivun taustakuva läpi div leftin alle tulevasta tilasta. Se ei siis osaa täyttää tilaa omalla pohjavärillään. Lisäksi kehys ei toimi, se näkyy ainoastaan div upperin yläpuolella ja molemmilla sivuilla. Ei div leftin vasemmalla puolella eikä div rightin oikealla puolella. Ei myöskään alareunassa.
Alla tekemääni koodia, joka on jotenkin viallista:
body { background-image: url(tausta.jpg); color: #000; font-family: verdana; font-size: 12px; line-height: 1.2; scrolling: on }
.page { width: 900px; border: 2px solid #000; background-color: rgb(210,247,255); height: auto; position: fixed; left: 100px; margin-top: 20px; margin-bottom: 20px }
.upper { background-color: #ffffff; width: 900px; clear: both }
.left { background-color: rgb(210,247,255); width: 220px; padding: 20px 0px 0px 0px; float: left; height: auto; position: fixed }
.right { background-color: #ffffff; width: 640px; padding: 20px 20px 20px 20px; float: right; min-height: 350px }
.bottom { background-color: #ffffff; width: 680px; padding: 0px 0px 0px 0px; float: right }
- selaimen keskellä 900px leveä kehys (div page), joka "venyy alaspäin" kehystäen sivulle tulevat asiat
- ylereunassa 900px leveä kuva (omana divinään: div upper)
- sen alta kehyksissä oleva sivu jaettu kahtia 200px ja 700px leveiksi kentiksi (div left ja div right)
- div rightin alla on div bottom ja nämä molemmat yhteensä yhtä korkeita kuin div left
- div bottom sisältää 700px kokoisen kuvan
- div left sisältää valikon ja jos div rightiin tulee paljon juttua, osaa div leftin alareunaan tulla lisää tyhjää tilaa niin että sivun asioita reunustava kehys on aina suorakulmion muotoinen
- div bottom on joka tilanteessa aivan sivun alareunan kehyksessä kiinni (sisltää kuvan)
Kyselen siksi, kun omien tekeleideni ongelmana näyttää olevan se, että jos div rightiin tulee paljon asiaa, paistaa sivun taustakuva läpi div leftin alle tulevasta tilasta. Se ei siis osaa täyttää tilaa omalla pohjavärillään. Lisäksi kehys ei toimi, se näkyy ainoastaan div upperin yläpuolella ja molemmilla sivuilla. Ei div leftin vasemmalla puolella eikä div rightin oikealla puolella. Ei myöskään alareunassa.
Alla tekemääni koodia, joka on jotenkin viallista:
body { background-image: url(tausta.jpg); color: #000; font-family: verdana; font-size: 12px; line-height: 1.2; scrolling: on }
.page { width: 900px; border: 2px solid #000; background-color: rgb(210,247,255); height: auto; position: fixed; left: 100px; margin-top: 20px; margin-bottom: 20px }
.upper { background-color: #ffffff; width: 900px; clear: both }
.left { background-color: rgb(210,247,255); width: 220px; padding: 20px 0px 0px 0px; float: left; height: auto; position: fixed }
.right { background-color: #ffffff; width: 640px; padding: 20px 20px 20px 20px; float: right; min-height: 350px }
.bottom { background-color: #ffffff; width: 680px; padding: 0px 0px 0px 0px; float: right }
Vastaukset 1
Vanhimmat
Tuossa koodissa olevassa position:fixed -jutulla sain sivun toimimaan (ei näy taustakuva ja kehykset rajaavat sivun), mutta se ei asemoidu selaimen keskelle eikä scrollaus toimi vaikka koodissa muka scrolling:on onkin.