Fluid CSS

fluid.css

/* Asetetaan kaikkien elementtien marginaalit perustilaan,
   nopea tapa varmistaa että millään elementillä ei ole valmiiksi marginaalia.

*/
* { margin: 0; padding: 0}

/* Perustyylit taustalle ja koko asiakirjalle, näitä kannattaa olla lisää!
   mm. listat, lomakkeet, em, strong, yms yms...
 */

body {
  background: white;
  font-size: 100%;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

h1,h2,h3,h4 {
  margin: 1em 0
}

/* Varmistetaan että kuvat eivät ylitä sivun leveyttä */
img {
  width: 95%;
}

/* Taulukoiden tyylit */
table {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  width: 50%;
  margin: 1em;
}

th, td {
  padding: 0.5em;
  text-align: left;
}

/* Listojen perustyylit */
ul {
  margin-left: 2em;
}

/* Sivuston rakenteen määrittely */
  
#page { /* Koko sivun ympäröivä kehys */
  background: white ;
  margin: 0 auto; /* Keskittää sivun sisällön */
  width: 90%; /* Jos haluat kiinteälevyisen sivun, muuta tämä pikseliarvoksi */
}

#header { /* Ylätunniste */
  width: 100%;
}

#header h1 { /* Lisätään #headerin sisällä olevalle h1-elementille vähän ilmaa ympärille */
  margin: 0;
  padding: 0.5em 1em;
}

#content { /* varsinainen sisältö */
  float: left;
  width: 74%;
}

#content > * /* Kaikille suoraan #contentin sisällä oleville elementeille tilaa ympärille */
{
  display: block;
  padding: 0 1em;
}

/* Sivupalkki */

#sidebar { 
  float: right;
  width: 24%;
  max-width: 300px;
  margin-left: 1%;
}

/* Alatunniste */
#footer {
  clear: both; /* Tällä estetään elementin kelluminen */
  width: 100%;
}

/* Navigointipalkin tyylit alkaa */

#nav ul {
  list-style: none;
}

#nav li {
  display: inline; /* Navigointipalkin jälkeen tulevalle elementille on määriteltävä clear: both; */
}

#nav a,
#nav span /* Aktiivinen "linkki" */
{
  display: inline-block; /* Tehdään linkeistä laatikoita */
  padding: 0.5em 1em;
}

#nav a {
  color: white;
}

#nav span,
#nav a:hover /* Näytetään kiva efekti, kun kursori on linkin päällä */
 {
  color: black;
  background-color: #ccc
}

/* Navigointipalkin tyylit loppuvat */