lauantai 6. joulukuuta 2014

Miten pienennetään marginaaleja?

Tämän postauksen aiempi versio hävisi tuhkatuuleen huonon tietokoneeni takia kommentteineen - pahoittelut vielä siitä hässäkästä! Jouduin siis tekemään tämän uudestaan. Jospa tästä saisi selvää yhtä hyvin kuin edellisestäkin!

Marginaalit ovat teille varmasti jostain yhteydestä tuttuja - jo ala-asteen ekoilla luokilla opettajat neuvoivat piirtämään marginaaleja matikan vihkon reunoihin. Toiset piirsivät marginaaleistaan leveämpiä, toiset taas kapeampia. Yksinkertaisesti sanottuna marginaalit ovat reunoja, joita voi pienentää tai suurentaa. Alla oleva kuva havainnollistaa teille, mitä marginaalien pienentäminen blogimaailmassa tarkoittaa.




Marginaalien pienentämiseen on olemassa erilaisia tekniikoita. Olen kuitenkin mieltänyt seuraavan koodin kätevimmäksi tähän hommaan. Toimi siis näin:
Malli -> mukauta -> lisää css:ään alla oleva koodi:

.content-inner {
padding: 0px;
}


Punaista lukua 0 voi muuttaa. Jos käytät siis arvoa 0, marginaalit ovat olemattomat. Nolla on tässä koodissa pienin mahdollinen arvo. Jos muutat lukua 0 suuremmaksi, marginaalit levenevät eli valkoiset reunat kasvavat. Kannattaa kokeilla erilaisia vaihtoehtoja, jotta löytää sen arvon, joka miellyttää eniten omaa silmää. Muistakaa muuten pienentää blogin leveyksiä samalla, kun käytätte tätä koodia!


Jos sivupalkki ei mene tarpeeksi reunaan, voitte muuttaa sivupalkin siirtymistä enemmän reunaa kohti lisäämällä tämän koodin suunnittelutyökalun CSS:ään:

.sidebar {
margin-left: 10px;
}


Punaista lukua 10 voi muuttaa.

Toivottavasti tämän postauksen koodit auttoivat! :)

18 kommenttia:

  1. Mulla on nyt sellainen ongelma blogissani, että kun kokeilin tuota otsikotonta kuvagadgetia, mutta ongelmana vain, etten saa sitä mahtumaan reunan sisään järkevästi, toivottovasti osaat auttaa, olisi hyvä jos sulla olisi jonkinlainen keskityskoodi, jolla kuvan saisi suunnilleen aseteltua keskelle..
    http://matskuntallielamaa.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Moi Matilda! Jos siis haluat keskittää otsikottoman (kuulostaapa oudolta :D) kuvagadgetin, lisää koodin alkuun < center > ja loppuun < / center > ilman välilyöntejä, niin kuvan pitäisi keskittyä :)

      Poista
    2. kokeilin tuota, mutta ei tapahtunut mitään, mistäköhän kiikastaa?

      Poista
    3. Mmm... Nyt en kyllä osaa vastata! Kävin vilkaisemassa blogisi HTML-koodista ko. kuvan koodin, ja se näytti ainakin tältä seisomalta ihan normaalilta koodilta, jonka pitäisi toimia. Jos kuitenkin haluat, voit ottaa muhun yhteyttä sähköpostilla (iltsudolly@gmail.com) ja kopsata oheen vielä ko. gadgetin koodin. Oon muutaman muunkin gadget-koodin ratkonut tuolla tavalla, sillä HTML:ssä koodi on hippusen verran erilainen.
      / edit. en tiiä, vaikuttaako tää, mutta ne centerit ainakin itse laitoin omille riveilleen esim. näin:
      center
      tässä koodi
      center

      enkä näin miten sulla taisi oli:

      center koodi center

      Kannattaa vielä kokeilla, kiikastiko ongelma tuosta :-)

      Poista
  2. Oon jo aika kauan ettiny kivaa taustaa blogiin, mutta mitään ei ole oikein löytynyt. Olisiko sinulla jotain vinkkejä mistä taustaa etsiä? ;)

    VastaaPoista
    Vastaukset
    1. Mäkin toivoisin vinkkejä tähän! (:

      Poista
    2. Voisin yrittää tehdä tästä lähiaikoina postauksen, sillä tästä olisi monelle varmasti hyötyä. Tässä teille kuitenkin vinkkejä, mistä löytää kivoja taustoja:
      1. http://vintagebackgrounds.tumblr.com/
      - Tuosta linkistä löytyy vaikka miten monta taustaa. Hakua voi myös suodattaa oikeasta laidasta löytyvällä valikolla.
      2. http://weheartit.com/search/entries?utf8=%E2%9C%93&ac=0&query=blog%20background&commit=
      - Tuosta linkistä löytyy joitain kivoja blogiin sopivia taustoja
      3. http://www.lillivoitto.fi/2013/08/taustakuvia-blogiisi.html
      - Tuolta löytyy Tiian itse tekemiä yksinkertaisia taustoja
      4. http://www.templates.com/blog/25-free-floral-textures/
      - Tuolta löytyy kukallisia taustoja
      5. http://webtreats.mysitemyway.com/category/patterns/
      - Tuolta löytyy vaikka mitä, kun vaan jaksaa etsiä :-) Nuo tuon osoitteen taustat pitää purkaa, mutta zip-pakettien purkamiseen löytyy netistä ohjeita.

      Jos tästä saisitte jotain ensiapua! Yritän postaukseen löytää vielä lisää sivustoja :)

      /kaikki taustat eivät ole automaattisesti toistuvia!

      Poista
  3. Heei täällä tarvitsisin apua! Selailin jo äsken tätä blogia läpi enkä löytänyt apua kysymykseeni. Miten postauksen ala-reunaan saa ne raksi ruutuun jutut? Ruutujen yläpuolella lukee sitten tyyliin just: kiva postaus, ihan jees postaus ja huono postaus. Esimerkkinä tästä blogista löytyy ne: http://issujaponit.blogspot.fi/2014/12/211-luukku-12.html
    Tässä vielä oma blogini: http://incompletesanna.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Mooi :)! Pitääkin yrittää tehdä tästä postausta joululomalla, kun silloin on aikaa, jotta mahdollisimman suuri osa tätä tietoa tarvitsevista löytää tiedon helposti. Mutta homma toimii yksinkertaisuudessaan näin:
      1. Mene blogisi ulkoasuun.
      2. Klikkaa blogitekstin "muokkaa"-kohtaa.
      3. Ruksita toiminnot.

      Homma on siis yllättävänkin simppeli - siksi ongelmasi on varmasti myös usein kysytty. Muistan itsekin, miten kauan etsin toimintojen löytämistä, mutta loppujen lopuksi ne löytyivät tosi läheltä.

      Poista
    2. Joo mä arvasin että se löytyy jostain tuolta. Kiitos kun kerroit ja löysin helposti!(:

      Poista
    3. Kiva, että musta oli apua!

      Poista
  4. Jälleen hyödyllinen postaus itselleni. Yleisvinkkinä vaan, että voi myös kokeilla mitä tämä tekee (eli negatiivinen luku)

    .sidebar {
    margin-left: -10px;
    }

    VastaaPoista
  5. Hei, mulla tää koodi ei toimi :( ! Olen yrittänyt mallissa hento ote, mutta mitään ei tapahdu.. Missä vika ?

    VastaaPoista
    Vastaukset
    1. Moi! Toimiiko sulla mikään koodi? Jos ei, nollaa mallisi valitsemalla uusi malli / uudelleen tämänhetkinen mallisi ja kokeile sitten, toimisko!

      Poista
    2. Toimi! Jouduin vaihtamaan malliin yksinkertainen, mutta taas tuli ongelma! Haluan siitä mallista ne ärsyttävät viivat pois, eli päivämäärän ja bannerin keskellä oleva harmaa viiva ja sivupalkkia pitkin menee harmaa viiva.. Oiskos niihin mitään koodia :) ? Kiitos hirmusesti avusta !

      Poista
  6. Hanna Viitanen: En jostain syystä pysty painamaan juuri nyt tuota Vastaa-painiketta, joten vastaan uudella kommentilla! Ongelmasi hoituu sillä, että menet vain mallin suunnittelukaluun > lisäasetukset > aksentit ja valitset sieltä väriksi transparent eli läpinäkyvä :)

    VastaaPoista
  7. Tässä oleva koodi ei täsin toimi :/ Oikealta puolelta ottaa tuon välin, mutta vasemmalla ei. Yritin muuttaa lukuja monta kertaa, ja laittaa miinusta luvun eteen mutta ei.

    Mulla on blogissa musta tausta, ja valkoinen pohja yksinkertaisella mallilla. Kun muutan lukua isommaksi, väittämättä siitä onko siinä miinus edessä vai ei, valkoinen alue "venyy" koko ajan vain enemmän vasemmalle päin.

    Oisko sulla tähän vinkkiä?

    VastaaPoista

MUISTA LINKATA BLOGISI !! -> näin ongelman ratkominen / auttaminen osaltani onnistuu parhaalla mahdollisella tavalla! :-)