Julkiset tietoverkot

Sorakuilu

CSS-demo 2, 2-osainen layout

Asemointi voi olla hankalaa, sillä osa dokumenttityypeistä käsittelee eri selaimilla elementtejä eri tavalla.
Jos haluat saada ulkoasun samanlaiseksi kaikilla selaimilla, laita dokumenttityypiksi html5.

<!DOCTYPE html>

Laadi seuraavan karkean luonnoksen mukainen asemointi.
luonnos

Huomaa valkoisella tehdyt, uudet html5:n mukaiset aluemääritykset. Niitä on muitakin.

Osat

  1. runko
    • keltainen
    • sen sisälle laitetaan kaikki muut - mahdollistaa keskitetyn layoutin
  2. ylaosa
    • vaaleanpunainen
  3. valikko
    • vaaleansininen
  4. sisalto
    • vaaleanvihrea
    • sisalto sijoitetaan paikalleen ja sille yksinkertaisesti annetaan valikon verran marginaalia vasempaan reunaan, jolloin se sijoittuu valikon oikealle puolelle
    • violetti

Rakenne html:ssä

<div id="runko"> 

        <header>
            ylaosa
        </header>
        
        <div class="flex-container">
            <aside>
                sivuosa
            </aside>
            <article>
                sisalto
            </article>
        </div>

        <footer>
            alaosa
        </footer>

</div>

css-lähdekoodi, asemointiin käytetty flexboxia

header {
    width:100%;
    height:30px;
    background-color:#add8e6;
    border: 1px solid #000000;
}

#runko {
    text-align:left;
    width:80%;
    margin: 0 auto;
    position:relative;
    padding:0;
    background-color:#ffd700;
    border: 2px dashed #ff0000;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-container > aside {
    width:20%;
    min-height:600px;
    background-color:#db7093;
    border: 1px solid #000000;
}

.flexcontainer > article {
    width:79%;
    min-height:600px;    
    border: 1px solid #000000;
    background-color: #8fbc8f
}

footer {
    width:100%;
    height:30px;
    background-color:#dda0dd;
    border: 1px solid #000000;
}

css-lähdekoodi, asemointiin käytetty float:ia (toimii pienillä ruuduilla hiukan epämääräisesti)

body {
    text-align:center;
}

#runko {
    text-align:left;
    width:80%;
    margin: 0 auto;
    position:relative;
    padding:0;
    background-color:#ffd700;
    border: 2px dashed #ff0000;
}

header {
    width:100%;
    height:30px;
    background-color:#add8e6;
    border: 1px solid #000000;
}

aside {
    width:20%;
    min-height:600px;
    float:left;
    background-color:#db7093;
    border: 1px solid #000000;
}

article {
    width:79%;
    float:left;
    min-height:600px;    
    border: 1px solid #000000;
    background-color: #8fbc8f
}

footer {
    width:100%;
    height:30px;
    background-color:#dda0dd;
    border: 1px solid #000000;
    clear:left;
}