Toisen rivin sisennys

Jarkko Karhunen

Jos katsotte sivun http://www.suklaayhdistys.com/ vasenta laitaa, niin näette "Suklaalevyraati"-otsikon alla luettelon valmistajista. Jotkut noista valmistajanimistä (esim. Arnolds Bakery & Coffeeshop) ovat niin pitkiä, että ne jakautuvat kahdelle riville. Kun noin käy, niin tuo jälkimmäinen rivi alkaa aina ihan vasemmasta reunasta ensimmäisen rivin alkaessa hieman sisennettynä.

Miten saisin toisen (ja mahdollisen kolmannenkin) rivin alkamaan jopa vielä muutama pikseliä enemmän sisennettynä kuin ensimmäisen, tai edes samalta tasolta?

8

1018

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • fsfsdfsdf

      Auttaisko ja

    • ---------------------

      Itse teen tuollaiset käyttämällä vaikkapa tätä:


      .
      .
      .



      Sitten tyylitiedostossa voi määritellä halutessaan esim. näin:
      list-style-type:none;

      Tuo on siis omasta mielestäni helpoin keino.

    • Padding-left...

      Esim:

      -------------------
      Lisää tyyli padding-left ja poista nyt sisennyksen virkaa ajavat välilyönnit!
      -------------------


      A. Korkunov
      Alaeddin
      Albert Heijn
      Amanie...
      ............

      • Jarkko Karhunen

        Kyllä toimii, kiitos paljon vinkistä.

        Kun pahin ongelma on nyt saatu korjattua, niin mites on, onnistuisko tuo mainitsemani mahdollisen toisen rivin lisäsisentäminen jotenkin CSS:llä vai vaatiiko jo ohjelmointia?


      • sisennys
        Jarkko Karhunen kirjoitti:

        Kyllä toimii, kiitos paljon vinkistä.

        Kun pahin ongelma on nyt saatu korjattua, niin mites on, onnistuisko tuo mainitsemani mahdollisen toisen rivin lisäsisentäminen jotenkin CSS:llä vai vaatiiko jo ohjelmointia?

        esim: {text-indent:20px}

        Tuota nyt voisi jotenkin yrittää viritellä. En tiedä onko sääntöjen mukaista mutta ainakin IE:ssä toimii myös miinus (-) merkkiset sisennykset.

        Toimisi ainakin jos nuo sinun linkit olisivat erillisiä kappaleita ja kappaleen väliä säätäisi seuraavasti:



        Kuten sanoin, voipi olla hieman epävalidia ;))

        ------------------
        Tällä kokeilin:
        ------------------




        p {text-indent: -20px}






        This is some text in a paragraph
        This is some text in a paragraph


        This is some text in a paragraph
        This is some text in a paragraph
        This is some text in a paragraph
        This is some text in a paragraph






        ------------------

        http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent


    • Poista -tägit (huonoa koodausta joka tapauksessa tällaisessa) ja lisää CSS-koodiin

      .scroll_raati a { display: block; text-indent: -0.5em; padding-left: 0.5em; }

      Jippona on se, että asetetaan negatiivinen 1. rivin sisennys, esim. puoli em-yksikköä, ja samansuuruinen vasen täyte. Nettovaikutus on 1. rivin osalta nolla ja muiden rivien osalta se, että ne on sisennetty esim. tuon puolen em:n verran.

      Sisennyksen tulisi olla niin suuri, että se ei näytä virheeltä eli että se on selvästi _tarkoitettu_ sisennys. Siksi muutama pikseli ei riitä, varsinkaan kun pikselin koko esimerkiksi nykyaikaisessa laatunäytössä sen natiivitilassa on varsin pieni. Ja fiksuahan on asettaa tällaiset asiat suhteessa fonttikokoon eikä pikseleinä.

      • Jarkko Karhunen

        Kiitos tästä vinkistä, tämä oli juuri se mitä kaipasin. Näyttäisi toimivan hyvin (toiveiden mukaisesti) myös silloin, kun nimi jakautuu kolmannellekin riville. IE7 näyttää jakavan yhden valmistajanimen noin pitkäksi.

        Testasin hommaa IE7:lla, Opera 9.52:lla, Google Chromen betalla ja Firefox 3.01:llä ja jostakin syystä ainoastaan Firefox käyttäytyy näin:

        Kun klikkaan valmistajan nimeä, pitäen hiiren nappia alhaalla, valmistajaluettelon alareunaan ilmestyy vaakavierityspalkki. Se häviää kyllä kun hiiren napin normaalisti löysää, mutta tietyllä lailla kikkailemalla (nappi pohjassa vedä kursori pois listan päältä) palkki jää näkyviinkin. Mistähän tuo johtuu ja olisiko siihen lääkettä, vaikka ongelma ei vakava olekaan?


      • Jarkko Karhunen kirjoitti:

        Kiitos tästä vinkistä, tämä oli juuri se mitä kaipasin. Näyttäisi toimivan hyvin (toiveiden mukaisesti) myös silloin, kun nimi jakautuu kolmannellekin riville. IE7 näyttää jakavan yhden valmistajanimen noin pitkäksi.

        Testasin hommaa IE7:lla, Opera 9.52:lla, Google Chromen betalla ja Firefox 3.01:llä ja jostakin syystä ainoastaan Firefox käyttäytyy näin:

        Kun klikkaan valmistajan nimeä, pitäen hiiren nappia alhaalla, valmistajaluettelon alareunaan ilmestyy vaakavierityspalkki. Se häviää kyllä kun hiiren napin normaalisti löysää, mutta tietyllä lailla kikkailemalla (nappi pohjassa vedä kursori pois listan päältä) palkki jää näkyviinkin. Mistähän tuo johtuu ja olisiko siihen lääkettä, vaikka ongelma ei vakava olekaan?

        Kiehtovan outo ilmiö, johon tekisi mieli paneutua, mutta aikataulut eivät oikein salli. Toisaalta en olisi kovin huolissani: ongelma on lähinnä esteettinen. Ilmeisesti Firefox jostain syystä analysoi, että aktiivisessa tilassa (”klikattuna”) linkkiteksti on vähän leveämpi kuin muuten, mikä luo vaakavierityspalkin tarpeen.

        Huomasin kuitenkin pari ongelmaa, jotka mielestäni kannattaisi korjata. Sivulla väitetään koodauksen olevan UTF-8, HTTP-otsakkeissa (ks. esim. palvelun http://www.rexswain.com/httpview.html avulla) taas ISO-8859-1, joka vastannee todellisuutta. Ristiriitatilanteissa HTTP hakkaa metatägit, mutta silti asia kannattaa korjata. Lisäksi alussa on DOCTYPE, jonka mukaan merkkaus on HTML 3.2:ta, jota se varmasti ei ole. Firefoxin tämä näyttää saavan ns. yhteensopivuustilaan eli quirks-tilaan.


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

    Luetuimmat keskustelut

    1. Vesikin maksaa, miksei hengitysilma?

      Jatkuvasti itketään ettei ole rahaa mihinkään, mutta tilastojen mukaan rahaa on enemmän kuin koskaan, joten miksei asial
      Maailman menoa
      28
      1838
    2. Satuolennoista tarinointi ei kuulu peruskoulun tehtäviin

      Opetustunteja on muutenkin käytössä vain rajallinen määrä. Eli nämä satuhommat koulun ulkopuolelle vapaaehtoisiin harras
      Maailman menoa
      157
      1802
    3. Suomalainen perheenisä vaatii Suvivirren esittämisestä hyvityksiä

      Itse lapsena uskonnonopetuksesta vissiin traumoja saanut ihka suomalainen (!) perheenisä vaatii Espoon kaupungilta korva
      Maailman menoa
      352
      1565
    4. Mitä haluaisit

      Tehdä kaivattusi kanssa?
      Ikävä
      147
      1181
    5. Mies profiloin sinut

      Etsit täysin hallittavaa mutta samalla poikkeuksellista ihmistä. Etsit jotain mitä et koskaan tule saamaan.
      Ikävä
      213
      1164
    6. Lahkokasteen ja kristillisen kasteen erot

      Raamatun mukaan Kristillisessä yhdessä kasteessa Jumala pesee ja puhdistaa ihmisen sydämen ja poistaa perisynnin kirouks
      Kaste
      422
      1128
    7. Känsäkoura ja hotelli

      Tietoa kuka ostanut?
      Kuhmo
      11
      1014
    8. Salainen kastekoulutus

      Millainen on helluntailainen kastekoulutus ja kauanko se kestää ?
      Kaste
      285
      995
    9. Heikki Paasosen Marita-vaimo jätti tunteikkaat jäähyväiset: "Tällä kertaa me..."

      Heikki Paasonen on naimisissa Marita Paasosen (os. Alatalo) kanssa ja heillä on kaksi pientä lasta. Nyt koitti aika jätt
      Suomalaiset julkkikset
      4
      989
    10. Pirkanlinna yleisötapahtuma

      Oli todella hyvä tilaisuus. Ja EERO. L. Aivan mahtava tyyppi. Veti rennosti ja asiallisesti. Ja yleisöltä hyviä kysymyks
      Ähtäri
      49
      938
    Aihe