Blogissa kuvien asemointi

avuton_

Käytän bloggeria, ja siinähän ei periaatteessa tarvitse kirjoittajan html:ää osata. Firefoxilla bloggeria käytän ja kirjoitan ja itse luen tekstejä, muittenkin tekstejä siis.

Mutta nyt kuin katson omia sepustuksiani muilla selaimilla eivät kuvat niissä välttämättä asetu siististi tekstiin nähden, teksti saattaa mennä kuvan laitaan sen sijaan että se olisi kuvan alla niin kuin Firefoxissa olen enteriä käyttämällä saanut sen menemään.

Bloggerissa pystyy html-koodin katsomaan. Ja näissä kuvissa koodi imageanchorin suhteen menee näin:
imageanchor= "1" style = "clear": left: float: left; left marginbottom: 1em; margin-right: 1em.

No, googlaten löysin tekstin jossa puhuttiin juuri tästä tekstin asemoimisesta kuvaan nähden. Ja siinä tekstissä oli mainittu sana full.
No, jos vaihdan tuossa koodissa float-sanan jälkeisen left-sanan full-sanaan, onko tämä oikea konsti, vai tuleeko siitä lisää ongelmia jossakin vaiheessa?

Mitä nuo marginaalit 1em tarkoittavat? Lisäkysymys tuo siis.

7

494

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • full-arvoa float-ominaisuudelle en tunne, ei sitä ainakaan ole standardoitu. Voisit kokeilla mielummin korvata tuon style-attribuutin arvon kokonaisuudessaan (eli lainausmerrkien koko sisällön) muotoon:

      style = "display block;margin:1em;"

      jolloin kuva ei enää olisi sidoksissa tekstiin, vaan se esitettäisiin omana lohkonaan. 1em:n marginaali käytännössä komputoituu 16-kuvapisteeseen, jollei käyttäjä ole tehnyt kirjasinkokomuutoksia (1em vastaa 100%-fonttikokoa), eli ehdotuksessani kuvalle tulisi käyttäjän fonttiko'on mukainen marginaali joka suuntaan.

      Lisätietoja margin- ja display -ominaisuuksista:
      http://weppipakki.com/css/css2/margin.htm
      http://weppipakki.com/css/css2/display.htm

      • kysyjä_kiittää

        Kiitos. Laitoin jo tuon full-määrityksen jokaiseen Edgessä ja Chromessa pieleen menneeltä näyttäneeseen kuvaan. Ainakin omalla koneella blogin selattuani kaikki näyttäisi olevan kunnossa. Pieni juttu tuohon alkuperäiseen ongelmaan nähden tosin on, sillä jos olen alun perin asettanut kuvan sivun vasempaan marginaaliin, tehty muutos siirtää sen keskelle sivua. Mutta siitä nyt jatkossa pääsee, jos asettaa kaikki kuvat alun alkaenkin keskelle. Ja toinen juttu on sitten se, että en ole jokaista kuvaa edes ladannut erittäin suurena, vaan teksteissä on kuvia myös pieninä, suurina Bloggerin omien kuvanlatausmääritysten mukaan asetettuina.

        Pistän antamasi vinkin ainakin talteen. Ja taidan jopa seuraavaa blogitekstiä tehdessäni sitä kokeilla.

        Kiitän asiallisesta vastauksesta.


      • Sen verran jäi kaivelemaan tuo 'float:full', kun se ei edes tunnu kovin loogiselta, pikemminkin ristiriitaiselta. Tarkistin juuri suunnitteillakin olevat float-ominaisuuden arvot, eikä full-arvoa sille löydy. Veikkaampa siis että nyt selaimet yksinkertaisesti ohittavat (virheellisen) deklaraation. Voit itsekin kokeilla nähdäksesi olenko oikeassa, esim. vaihtamalla full-arvo joksikin siansaksaksi (float:siansaksa)... lopputulos pitäisi olla sama kuin full-arvollakin.


      • kiitos_lisätiedoista

        No, kyllä tuon full-arvon löysin ihan luotettavasta lähteestä, mielestäni. Ja kun sen lisättyäni katsoin tekstini Operalla, Edgellä, Chromella ja Firefoxilla, asettui teksti oikein kuvan alapuolelle eikä ollut rivittynyt kuvan viereen liian pieneen tilaan.

        Toisaalta hoksasin itsekin nyt, että voin hieman vilkaista miten toisissa, lukemissani blogiteksteissä kuville on annettu html:ää, klikkaamalla kyseissä blogissa kuvan päällä hiiren oikealla ja valitsemalla valikosta Tarkista.




        Tuossa yllä yksi esimerkki, ja samanlaisia näytti olevan parissa muussakin blogissa. Näissä tosin on sitten se kuva tarkoitettu olemaankin tekstien välissä. Itse olen joihinkin teksteihini ympännyt myös pienempiä kuvia, jolloin teksti voi kulkea joko sen oikealla tai vasemmalla puolella.

        Ja näissä blogeissa tietenkään se blogin malli ulkoasultaan, siis taustan värit ja kuviot ja niin päin pois, ei tietenkään ole sama kuin minulla.

        Sen full-määrityksen löysin tästä ja sovelsin vain omaan blogger-blogiini.
        http://aamulehdenblogit.ning.com/profiles/blogs/blogin-muotoilua

        Vielä tästä omasta blogistani. Sen jälkeen kun olin vaihtanut pielessä olleiden kuvien ja tekstien kohtiin tuon full-arvon, Chromessa se ei ihan täysin joissakin kohdin kyllä toiminut. Toisaalta kyllä sitten kun olin ensin katsonut Chromessa yhden kerran tällaista kohtaa, jossa vielä jotakin pientä heittoa asettelussa oli, ja sitten katsoin uudelleen, niin kaikki oli tällä uudemmalla katselukerralla sitten kuitenkin ok. Omituista.


      • kiitos_lisätiedoista

        Ja tuo muitten blogeista Tarkasta-komennolla katsomani html-määritys tulee kun kuva asetetaan keskelle kirjoitustilaa. Jos sen siellä tekstiä kirjoittaessa bloggerin tarjoaminen kuvan asetteluvaihtoehtojen kautta asettaa oikealle tai vasemmalle niin siinä vaiheessa tulee sitten tuo monimutkaisempi html-koodi float-määrityksin.

        Joten ilmisesti, kun ei html:ää osaa, niin varmin keino saada blogin asettelu pysymään kondiksessa on käyttää vain tuota keskelle kirjoitustilaa asetettua kuvaa, ja kokokin on sitten kaiketi paras olla se erittäin suuri tarjotuista vaihtoehdoista. Omat kuvien kokojen ja asetteluiden kanssa leikkimiset on viisainta tehdä vain jos osaa html:ää :)


      • Tuosta antamastasi linkistä selvisi väärinkäsitys. Kyse ei ole float-ominaisuuden full-arvosta, vaan class-attribuutin luokkanimestä:

        *Lainaus alkaa:*
        Tässä blogisysteemissä img-tagin class-attribuutin CSS-luokkanimi voi olla (kuvan asettelu):

        align-left (vasemmalla) - kuva on vasemmalla ja teksti voi olla myös kuvan vieressä.
        align-center (keskelle) - kuva on keskellä ja teksti sijoittuu kuvan ylä- ja alapuolelle.
        align-right (oikealla) - kuva on oikealla ja teksti voi olla myös kuvan vieressä.
        align-full (täysi) - kuva on vasemmalla ja teksti sijoittuu kuvan ylä- ja alapuolelle.
        *Lainaus loppuu.*

        Ts. kuvaan tulee tuo class-attribuutti, esim.:

        <img class="align-full"...

        ja sitten jossakin tyylitiedostossa on määritelty deklaraatiot (joiden mukaan kuvat asemoituvat) noille align-*-luokille.

        Vielä siellä luki:

        "Näitä blogeja voi kirjoittaa Visuaalisessa tilassa, joka riittää monelle, jos haluaa itse enemmänkin säätää blogin sisällön ulkoasua, niin silloin otetaan käyttöön HTML-muokkain -tila."

        Tuota alustaa en tunne, mutta oletan että se sallii lennossa vaihdon "visuaalisesta" "HTML" -tilaan, joten ehkäpä, mikäli mielenkiintoa riittää, pääset heti tarkastelemaan miten visuaalisessa tilassa tehdyt muutokset vaikuttavat koodipuolella.


      • kiitos_lisätiedoista

        Mielestäni Blogger on juuri tuollainen, tekstiä voi kirjoittaa, no, verrataan nyt vaikkapa Wordiin, eli samaan tapaan suoraan sivulle ja lisätä siihen kuvia Bloggerin Lisää kuva-toiminnolla ja kuvan lisättyä voi kuvaa klikaten sitten siirtää kuvan sivulla vasemmalle, oikealle tai keskelle ja määrittää myös kuvan koon pieni, keskikokoinen, suuri, erittäin suuri, alkuperäinen koko.
        Ja sitten siinä kirjoitusalustan valikoissa löytyy nappi josta voi vaihtaa html:ään.

        Eli mielestäni tämä on juuri sellainen visuaalinen vs. html -alusta.

        Kiitän sinua asiallisista ohjeistasi.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Stubb jo paljon tunnetumpi kuin kaikki persut yhteensä

      Nyt on aika ottaa mittaa tunnettavuudesta, herrat ja narrit! Joku tuolla toisessa ketjussa väitti, että "persujen rivimi
      Maailman menoa
      79
      10311
    2. Miksi persuilla ei ole firmoja?

      Kuten vasemmisstolaisilla, esim. Sannalla MA\PI. Eikö ole aika erikoista?
      Maailman menoa
      82
      7066
    3. Persut hommasivat Suomeen 35 000 pientä lasta v. 2015

      Onko Riikka Purra nyt tavoittelemassa tätä samaa historiallista persujen utopiaa? Purram kaksinaamaisessa pelissä vaadit
      Maailman menoa
      26
      7033
    4. Persu Keskisarja on politiikan Uuno Turhapuro

      Asiantuntija luonnehtii Keskisarjaa Trumpin ajan Turhapuroksi, joka ärsyttää kokoomusta. – Keskisarjan känni-imago j
      Maailman menoa
      101
      6285
    5. Purran tuhoja tuskin saadaan koskaan korjatuksikaan

      Purra on aiheuttanut Suomen taloudelle karmaisevat tuhot. Sen lisäksi Purra on ajanut myös suuren osan Suomen kansasta k
      Maailman menoa
      106
      6143
    6. Tutkielma Marinin hallituksen epäonnistumisista rankkaa luettavaa

      Marinin hallituksen epäonnistumiset voi tiivistää negatiivisessa sävyssä seuraavasti: Hallitus teki useita vakavia virh
      Maailman menoa
      94
      5817
    7. Persujen kaksoisstandardit: Räsäsen uhkailu paha, Virran uhkailu hyvä

      Tässä taas nähdään kuinka kaksinaamaista porukkaa persut ovat. Mitäs persut tähän?
      Maailman menoa
      45
      5384
    8. Miksette persut irtisanoudu Kirkin lausunnoista?

      Kirkhän muun muassa vaati raiskattuja naisia pidättäytymään abortista ja vaimoja alistumaan aviomiestensä tahtoon. Mik
      Maailman menoa
      84
      5218
    9. Demarikultin uhri kertoo

      Demarikultin uhri kertoo: “En saanut mennä edes suihkuun ilman lupaa” – Seksuaalisen hyväksikäytön uhri kertoo vuosistaa
      Maailman menoa
      60
      5153
    10. Miksi vasemmistolaiset eivät omista yhtään firmaa?

      Vasemmistolaiset eivät omista yhtään firmaa joka työllistäisi ihmisiä. Miksi? No siksi, että jos vasemmistolainen perus
      Maailman menoa
      40
      5088
    Aihe