w3schools.com

• HTML Forms
• HTML Images
• HTML Layout

HTML-osien sijoittelu

Sivun osia on näppärä sijoitella <div>-elementin ja CSS-koodauksen avulla. Alla olevassa esimerkissä on haluttu sijoittaa neljä tekstilohkoa 50 pikseliä leveisiin ja 40 pikseliä korkeisiin (näkymättömiin) ruutuihin, joissa teksti on keskitettynä:

HTML:

<style>
#tekstilohko1 {
  width: 50px;
  height: 40px;
  float: left;
  text-align: center;
}
</style>

<div id="tekstilohko1">1. lohko</div>
<div id="tekstilohko1">2. lohko</div>
<div id="tekstilohko1">3. lohko</div>
<div id="tekstilohko1">4. lohko</div>

Toisessa esimerkissä on tekstilohkot ovat 100 pikseliä leveitä, jolloin tekstit mahtuvat yhdelle riville:

HTML:

<style>
#tekstilohko1 {
  width: 100px;
  height: 40px;
  float: left;
  text-align: center;
}
</style>

<div id="tekstilohko1">1. lohko</div>
<div id="tekstilohko1">2. lohko</div>
<div id="tekstilohko1">3. lohko</div>
<div id="tekstilohko1">4. lohko</div>

Jos teksti halutaan keskittää myös pystysuunnassa, voidaan sitä yrittää määrittämällä elementin ylälaitaan tyhjä tila (padding):