CSS-opas, CSS - Mittasuhteet kuntoon

Mittasuhteet ja mittojen asettaminen

Mittasuhteissa esitellään CSS-ohjeet joilla asetetaan yleensä leveys sekä tarvittaessa korkeus erilaisille HTML-elementeille.

Esimerkissä asetetaan CSS-ohjeilla, leveys1 div-elementin leveyksi 100% siitä tilasta johon div-elementti on sijoitettu
leveys2 div-elementin leveyksi 50% kun div-elementti on sijoitettu leveys1-ohjeella muotoillun sisään

Huomaa ! Sisempi poksi ei ole tarkalleen 50% ulomman poksin leveydestä.

Div jolla CSS-ohje leveys100.
Div jolla CSS-ohje leveys50.

Esimerkin koodaus:


  CSS-ohjeet
  
  .leveys100 {
    width: 100%;
    border: 1px solid BLUE;
  }
  .leveys50 {
    width: 50%;
    border: 1px solid RED;
  }
  
  HTML-koodaus
    
  <div class="leveys100"> 
    Div jolla CSS-ohje <i>leveys100</i>. 
    <div class="leveys50"> 
      Div jolla CSS-ohje <i>leveys50</i>.
    </div>
  </div>
  

Leveys % ja korkeus px

Mobiililaitteiden takia on hyvä määritellä HTML-elementin leveys prosetteina sekä tarvittaessa korkeus pikseleinä. Huomaa kuitenkin kuvien sekä videoiden vääristyvän jos korkeus määritellään.
Korkeuden lukitseminen johonkin pikselilukuun voi aiheuttaa mobiililaitteissa elementin sisällön "valumisen ulos" elementistä tai liukusäätimen ilmestymisen elementin reunaan.

Elementille määritelty korkeudeksi 150px ja leveydeksi 60%

Esimerkin koodaus:


  CSS-ohjeet
  
  div.loota {
    height: 100px;
    width: 50%;
    border: 1px solid GREEN;
    background-color: RGB(249, 255, 230);
  }
  p.tayte {
    padding: 15px;
  }
  
  HTML-koodaus
    
  <div class="loota"> 
    <p class="tayte"> Elementille määritelty korkeudeksi 150px ja leveydeksi 60% </p>
  </div>
  

Maksimileveys

Maksimileveyden asettaminen estää elementin esittämisen asetettua suurempana mutta sallii elementin esittämisen kapeampana.

Elementille määritelty korkeudeksi 100px ja maksimi leveydeksi 300px

Esimerkin koodaus:


  CSS-ohjeet
  
  .lootaA {
    max-width: 300px;
    height: 100px;
    background-color: rgb(204, 255, 230);
  }
  p.tayte {
    padding: 15px;
  }
  
  HTML-koodaus
    
  <div class="lootaA"> 
    <p class="tayte"> Elementille määritelty korkeudeksi 100px ja 
	     maksimi leveydeksi 300px </p>
  </div>
  

CSS-ohjeella min-width voidaan asettaa elementille minimi leveydelle, leveys josta elementti ei enään kapene.