Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

Harjoitus 1

 Harjoittele CSS-asemointia W3Schoolsin sivuilla:

 http://www.w3schools.com/css/css_positioning.aspImage Removed

Harjoitus 2

Tee tyylitiedostoilla absoluuttisesti asemoitu sivu, jonka ulkoasu on seuraavan mallin mukainen:

 http://www.ironspider.ca/webdesign102/tables4layout2.htm#twocolhdftnav

Tarkoituksena on siis muuttaa taulukkotaitto CSS-taitoksi.

Vinkkejä:

Tee kaikista osioista lohkoja (div-elementti) ja asemoi kukin position:absolute -arvolla.

Harjoitus 3

Kokeile kelluvan taiton tekemistä. Tee CSS-taitto seuraavan mallin mukaisesti:

 http://www.ironspider.ca/webdesign102/tables4layout2.htm#two_col

Määritä lohkojen leveysarvot prosentteina, niin leveys määrittyy selainikkunen koon mukaan.

Esimerkki kelluvasta taitosta:

http://www.maxdesign.com.au/presentation/liquid/example10.htm