Kodulehe loomine, 7. kord

CSS kastide mudel (box model)

Lehe kujundamisel tuleb arvestada CSSi üldise kastide mudeliga. Lehe kõige olulisemaks osaks on sisu. Selleks aga et sisu ka kenasti esitleda, kujundatakse ruumi sisu ümber.

CSS kastide mudel näeb välja järgmine:

Ehk siis, sisu ümber on võimalik määratleda:

margin – vahe teiste elementidega,

border – piirjoon kasti ümber

padding – vahe piirjoone ja sisu vahel

NB! Kui määratletakse elemendi laius ja kõrgus, siis määratleb see sisu laiuse ja kõrguse – st sellele lisanduvad padding, border ja margin väärtused. Näiteks, kui soovida seda, et üks konkreetne kast võtaks enda alla lehe terve laiuse (st 100 %), siis võiksid olla protsendid sellised:

sisu – 80%;

padding – 5% (5 % nii paremalt kui ka vasakult, ülevalt ja alt), lisandub 10 % kogusummasse

margin – 5% (5 % nii paremalt kui ka vasakult, ülevalt ja alt), lisandub 10 % kogusummasse

Eelneva pildi loomiseks vajalik kood, esmalt HTML-elemendid, mis on üksteise sees:

<div id="margin">
  Ääris (<i>margin</i>) - elementide vaheline ala
    <div id="border">
      Joon (<i>border</i>) - joon elemendi ümber
        <div id="padding">
          Joone ja sisu vaheline ala (<i>padding</i>)
            <div id="content">
              Sisu
            </div>
          <br>
        </div>
      <br>
    </div>
  <br>
</div>

Ja selle jaoks kasutatav CSS:

#margin
{
  background-color: lightgrey; 
  text-align: center;
  vertical-align: center;
  border: 0.1em dashed grey;
  padding: 10px 10%;
  line-height: 200%;
  width: 80%;
}
#border
{
  background-color: green;
  text-align: center;
  vertical-align: center;
  padding: 10px 20px;
  margin: 10px 20px;
}
#padding
{
  background-color: lightgrey;
  vertical-align: center;
  padding: 10px 20px;
  margin: 10px 20px;
}
#content 
{
  background-color: white;
  text-align: center;
  vertical-align: center;
  padding: 10px 20px;
  margin: 10px 20px;
}

Elementide paigutus

CSS võimaldab elemente paigutada üksteise kõrvale. Selleks kasutatakse omadust float, väärtused võivad olla left, right, inherit, none.

Nt kui meil on lehel tekst ja pilt selliselt:

<div id="lugu">
  <img id="portree" src="luik.jpg" alt="luigeportree">
  See luik tegeleb väga kenasti ujumisega, mis talle hirmsasti meeldib!<br>
  Võta või jäta, ujuda on ikkagi väga mõnus!
</div>

Siis kasutades CSSi saame luigepildi teksti ette paigutada nt selliselt:

#portree
{
  width: 100px;
  float: left;
  margin-right: 1%;
}
#lugu
{
  padding: 5%;
  background-color: white;
}