Miten luodaan: blogipohja

Edellinen sivu Käänteinen muotoilu
Seuraava sivu Painon muunnos

Opit, miten luodaan reagoiva blogipohja CSS:n avulla.

Opit, miten luodaan reagoiva blogipohja, joka muuttuu kahden ja täyden leveyden sarakkeiden välillä näytön leveyden mukaan.

Aseta selaimen ikkuna suuremmaksi nähdäksesi reagoivan vaikutuksen:

Kokeile itse

Miten luodaan blogipohja

Vaihe 1 - Lisää HTML:

<div class="header">
  <h2>Blogin nimi</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Otsikkopäätös</h2>
      <h5>Otsikko kuvaus, 7. joulukuuta 2017</h5>
      <div class="fakeimg" style="korkeus:200px;">Kuva</div>
      <p>Jotain tekstiä..</p>
    </div>
    <div class="card">
      <h2>Otsikkopäätös</h2>
      <h5>Otsikko kuvaus, 2. syyskuuta 2017</h5>
      <div class="fakeimg" style="korkeus:200px;">Kuva</div>
      <p>Jotain tekstiä..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Tietoani</h2>
      <div class="fakeimg" style="korkeus:100px;">Kuva</div>
      <p>Joitakin tekstejä minusta vastuullisuudesta, joka koskee virkaa, jota ei ole suoritettu, mollit animi...</p>
    </div>
    <div class="card">
      <h3>Suosituimmat artikkelit</h3>
      <div class="fakeimg">Kuva</div><br>
      <div class="fakeimg">Kuva</div><br>
      <div class="fakeimg">Kuva</div>
    </div>
    <div class="card">
      <h3>Seuraa minua</h3>
      <p>Jotain tekstiä..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Alatunniste</h2>
</div>

Toinen vaihe - Lisää CSS:ää:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Otsikkopalkki / blogin otsikko */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Luo kaksi eri leveää saraketta, jotka liikkuvat toisiaan vasten */
/* Vasen sarake */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Oikea sarake */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Todellinen kuva */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Lisää artikkeleille korttipainotus */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Poista sarakkeiden jälkeen liikkuminen */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Alatunniste */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Responnisivurakenne - Kun näyttöleveys on alle 800px, aseta kaksi saraketta rinnakkain eikä rinnakkain */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Kokeile itse