I Say Sabotage

Aluksi Idan pyynnöstä sivupalkin siirtäminen ylemmäs.

Lisätään Custom CSS:ään seuraavat säännöt:

#header {
float: right;
width: 80%;
}

#headerimg {
margin-left: 0px;
}

Mitä tämä tekee? White as Milkissä tulee sivun alkuun header-lohko, joka on koko sivun levyinen. Sen alle tulevat content-, sidebar– ja footer-lohkot. Content-lohko siirretään sidebar-lohkon oikealle puolelle ominaisuudella float: right. Jotta sidebar saataisiin alkamaan aivan sivun alusta, sama asia pitää tehdä header-lohkolle, joka pitää myös kaventaa saman levyiseksi kuin content, eli 80% koko sivusta. Oletustyylissä header-lohkon sisällä olevalla headerimg-lohkolla on vasen marginaali 20%, jotta se alkaisi sivusuunnassa samasta kohdasta kuin content, mutta tämä ei ole enää tarpeen, joten marginaali asetetaan nollaksi.

Tätä testatessani huomasin, etten oikeastaan pidä lainkaan White as Milkin koko ikkunan levyisestä sivusta. Minusta blogipalstan leveyden pitäisi olla vakio, jolloin blogaaja pystyy hallitsemaan mahdollisimman hyvin sitä, miltä blogi näyttää selaimessa.

Mutta määrittämällä vakioleveyden teen blogista lukukelvottoman, jos selainikkuna tai käyttäjän monitori on tiettyä kokoa pienempi. Eikö tämä ole vähän väärin? No, White as Milkin oletustyyli syyllistyy samaan syntiin: Sivupalkin leveys on vakio 200px, mutta sen pitää mahtua sisällöltä yli jäävään 20%:iin. Sivusta tulee siis lukukelvoton, jos ikkunan leveys on alle 1000px.

Muutetaan Custom CSS tämän näköiseksi:

#header {
float: right;
width: 550px;
}

#headerimg {
margin-left: 0px;
}

#page {
width: 800px;
}

#content {
width: 550px;
}

Koko sivu sisältyy page-lohkoon. Asetetaan sille mukavan kompakti leveys 800px. Tällöin siis törmätään yllä mainittuun ongelmaan prosentuaalisten leveysten kanssa. Nyt kuitenkaan header– ja content-lohkojen leveydet eivät riipu tuntemattomasta ikkunan leveydestä, joten nekin voidaan asettaa vakioiksi. Leveydellä 550px saadaan mukava marginaali sivupalkin ja sisällön väliin.

Oletustyylissä page sijoittuu ikkunan keskelle, koska vasen ja oikea marginaali on auto. Muutetaan page-lohkon tyyliksi:

#page {
width: 800px;
margin: 20px auto 0 50px;
}

Nyt sivu pysyy ikkunan vasemmassa reunassa mukavalla 50px marginaalilla.

Samoja kikkoja voi kokeilla myös muissa teemoissa. En ole testannut näitä vielä muilla selaimilla kuin Firefoxilla, joten lisäsäätö saattaa olla vielä tarpeen.

Kategoria: Ylläpito.
Tagit: css, teemat