sunnuntai 25. tammikuuta 2015

Tekstin ja kuvien alkaminen samasta kohdasta

Alla oleva kuva hahmottaa, mitä ajan tällä kertaa takaa:


Tästä tulee usein avunpyyntöjä - miten saisi blogikirjoituksen tekstin ja kuvat alkamaan samasta kohdasta? Minulla on teille tässä muutama ratkaisu kyseiseen ongelmaan.

1. TAPA: Tarkista, onko blogitekstisi kuvilla kehykset. Voit tarkistaa sen maalaamalla vasemmalla hiirellä blogitekstejäsi kuvineen päivineen ja katsoa, onko kuvien ympärillä jotain ns. ylimääräistä. Nuo kuvien kehykset saattavat olla läpinäkyvät, jolloin niitä ei voi ilman kuvan maalaamista havaita. 

Jos kuvissasi on kehykset, voit poistaa ne tällä koodilla, jolloin kuvien ja tekstin pitäisi alkaa samasta kohdasta (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: 0px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
box-shadow: 1px 1px 1px rgba(0, 0, 0, .0);
}


2. TAPA: Voit siirtää kuvaa lähemmäs tekstiä tällä koodilla (malli -> mukauta -> lisäasetukset -> lisää css:ään alla oleva koodi):

.post-body img{
margin-left: -10px;
}


Lukua -10 voi muuttaa pienemmäksi tai suuremmaksi. Kyseistä lukua muuttamalla blogitekstin kuvat siirtyvät vasemmalle tai oikealle riippuen siitä, suurentaako vai pienentääkö lukua.

22 kommenttia:

  1. Hei oon pitkään miettinyt miten saan banneria siirrettyä alemmas että se yhdistyisi tekstipohjaan? Osaatko auttaa?

    VastaaPoista
  2. Unohdin linkata blogini...

    Eli miten saisin siirrettyä banneria alas päin sillein että se yhdistyisi teksti pohjaan?
    Emmiinblogi.blogspot.fi

    VastaaPoista
    Vastaukset
    1. Mooi :)! Koitas tätä koodia:

      .header-outer{
      margin-bottom: -40px;
      }

      Tuota lukua -40 voi muuttaa pienemmäksi tai suuremmaksi :)

      Poista
    2. Moi! Oon Käksyn vuokraaja. Olis kiva nähä sun blogia käksy ajoilta, mut en pääse sinne sisää. kun mua ei oo "kutsuttu" :(

      Poista
  3. Miten bloggerissa saa ylätunnisteen taustan läpinäkyväksi? Tai siis, haluaisin läpinäkyvän bannerin blogin taustaa vasten, en valkoista ylätunnistetta vasten. Ajatellaan nyt, että haluaisin tämän hetkisen kultatassut -tekstin suoraan blogin taustaa vasten, mutta siinähän on nyt tuo valkoinen tausta, vaikka banneri on tehty läpinäkyväksi (ja tallennettu PNG-tiedostoon). http://kultatassut.blogspot.fi/

    VastaaPoista
    Vastaukset
    1. Mooi! Lisääs nää sun blogin mallin työkalun CSS:ään:
      .content-inner{
      background:transparent;
      }
      .main-inner{
      background:white;
      }

      Poista
    2. Kiitos koodista. Toimi, mutta taustaan jää haaleat reunat, jotka haluaisin vielä pois.. http://emmiyztestaa.blogspot.fi/

      Poista
    3. Kokeiles vielä lisätä noiden aiempien koodien lisäksi tämä:

      .content-outer{
      box-shadow: none;
      }

      Poista
  4. Moikka! Tarvitsisin todella nopeasti apua en ole nyt kirjautunut omalla koneella googleen mutta aitan anona eli miten saa tuollaiset viivat sivujen/välilehtien ympärille kuin tässä blogissa http://essi-bltn.blogspot.fi tai sitten jos et tuolle ohjetta tiedä niin ihan vaan sivujen alle yhden viivan :--) joko ccs tai html!

    VastaaPoista
    Vastaukset
    1. Heei! Tällaisella koodilla saa samantyyliset (css):
      .tabs-inner .section:first-child ul {
      border-top: 1px solid grey;
      border-bottom: 1px solid grey;
      }
      Värit, tyylit ja paksuudet on täysin muokattavissa :-)

      Poista
    2. Moi! Mistä löysit ton koodin/ohjeen mietin vaan jos voisin muokata etsiä siitä lisää tietoa sillä mulla toi ei toiminut ccs koodissa eikä myöskään html :(

      Poista
    3. Moi taas! Outoa, ettei toiminut, koska mulla kyllä toimii ihan moitteettomasti :o Kehittelin koodin itse, joten mulla ei oikein ole mitään vinkkejä, mistä voisit etsiä tosta lisää tietoa :/ Toimiiko sulla muuten mikään koodi blogissasi? Voit myös linkata blogisi - sen lähdekoodia tutkimalla voin yrittää etsiä jotain syytä, miksei koodi toimi :-)

      Poista
  5. Moikka! Kuvissasi on vielä kehykset - ne kannattaa poistaa ensin. Jos se ei auta, suosittelen, että selvität, minkä levyisiä sun blogin kuvat on. Sen jälkeen lisää tämä koodi CSS:ään:
    .post-body{
    width: 640px;
    }

    Width'n jälkeinen luku 640 pitää muuttaa siihen lukuun, mikä on kuviesi pikselileveys :-) Leveyden voi selvittää esim. Paintissa.

    VastaaPoista
  6. mitä sitten pitää tehä ku se linkki on liitetty siihen css kentään? :o

    VastaaPoista
  7. Moikka! Onkohan sulla mitään vinkkiä siihen, miten mä voisin tätä ohjetta hyödyntää. Kokeilin jo siirtää kuvia, niin että ne olisi linjassa tekstin kanssa, mutta ongelma tulee siinä, että mulla on sekä vasemmalle tasattuja, että keskitettyjä tekstejä. Keskitetyt tekstit on siis ihan oikealla paikallaan, mutta vasemmalle keskitetyt liian reunassa kuviin nähden. Sitten kun noita kuvia lähtee siirtämään, niin keskitetyt tekstit siirtyy väärälle paikalle. Saiskohan niitä mitenkään pysymään paikallaan? :D

    VastaaPoista
    Vastaukset
    1. Heips!
      Suosittelen ainakin ensimmäiseksi poistamaan kuvista kehykset :) Sitten ehkä itse kokeilisin, mitä seuraavan koodin lukujen vaihtelu tuo tullessaan;
      .post-body{
      text-align: justify;
      width: 630px;
      }

      Ongelmaan on hankala antaa yhtä oikeaa vastausta, sillä välttämättä postausten eri "tyylien" takia ongelmaa ei edes saa korjattua kuin yksitellen, mikä onkin sitten pidempi prosessi.

      Poista
  8. Käytin tuota antamaasi koodia, mutta se ei silti antanut haluttua tulosta. Poistin koodin sitten kokonaan. Esimerkiksi asupostauksissani varmasti näet, mikä on ongelmana. Osaisitko auttaa minua ratkaisemaan sen?
    elamanierikana.blogspot.fi

    VastaaPoista
  9. Itse yritin tätä, lisäsin tuon pidemmän koodin css:ääni mallin mukauttamistyökaluun, mutta reunukset ei pahemmin poistu kuvista tai kuvien reuna ei vaihdu samaan kohtaan kuin teksti. Onko mitä neuvoksi? Kiitos jos voit auttaa.
    terveisinelina.blogspot.fi

    VastaaPoista
  10. Mä en kommenteista päätellen oo ainoa, joka ei saa tolla koodilla pois kehyksiä ja ylimääräistä varjostusta. :/
    www.tiiaemilia.blogspot.com

    VastaaPoista
  11. Todella hyviä vinkkejä! Kiitos :) :) :)

    VastaaPoista

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