HTML kehyksen koon määrittäminen

[Pasi80]

Osaisiko joku neuvoa miten HTML:ssä saa "kehyksen" pysymään vakio kokoisena riippumatta ikkunan tai näytön koosta? Oikea sanasto hukassa, mutta ymmärrätte pointin kun katsotte liite kuvia.

kehys1 olisi oikean kokoinen, mutta jos laitan ikkunan koko näytölle niin se venyy leveys suunnassa. Miten saisin sen pysymään "vakio" kokoisena tai niin, että kaikki muuttuu samassa suhteessa?

Tällä hetkellä kehys on määritelty style osiossa.
.kehys
background-color: ..
margin-left: 40%
margin-right: 40%

Ymmärrän, että % todennäköisesti muuttaa kokoa aina ikkuna koon muuttuessa, mutta en tiedä oikeita komentoja tähän? Olen kyllä yrittänyt etsiä tietoa netistä, mutta ei oikein natsaa...

Kiitollinen avusta.

 

[Macu]

width: 300px tai minkä kokoisena sen haluatkaan näyttää. Myös max/min-width (ja height)
Ja tuolta lisää

 

[Pasi80]

width: 300px tai minkä kokoisena sen haluatkaan näyttää. Myös max/min-width (ja height)
Ja tuolta lisää

Kiitos, minä tutustun tähän ja palaan jos ei onnistu

 

[aleksejjj]

Se on juurikin tuo %-merkin käyttö, joka saa tuon divin venymään selainikkunan kokoa muutettaessa. Kuten sanottu, siirry käyttämään fiksattuja pikselimääriä (esim. width: 300px).

Tästä linkistä lisää infoa, käy checkaamassa tuo kätevä Try It -minisovellus: CSS width property

Voit myös käyttää pelkästään max-width: 300px, jolloin divi ei veny liikaa, mutta sallii sen koon pienentämisen, jos selainikkuna piennetään tosi kapeaksi.

 

[Paapaa]

Ja px:n sijaan kannattaa siirtyä ehkä käyttämään fonttikokoon suhteutettuja kokoja rem ja em. Niillä elämä helpottuu monessa tilanteessa. Ja keskitykseen kannattaa opetella suosiolla flexbox niin moni asia muuttaa paljon helpommaksi.

 

[Letuk]

Saitko jo tehtyä? Tuli innostuttua ja sain tämmöisen tehtyä: Tässä pari flexbox opetus peliä:

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

www.flexboxdefense.com

 

[Pasi80]

Saitko jo tehtyä? Tuli innostuttua ja sain tämmöisen tehtyä: Tässä pari flexbox opetus peliä:

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Flexbox Defense

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

www.flexboxdefense.com

Hupaisa opetus peli. Täytyy huomenna tutustua vielä paremmin noihin koodeihin

 

[Pasi80]

Kiitos vain kaikille muillekin, hienoa, että osaajilta saa tarvittaessa apua.