linkin leveys

miten onnistuu

Miten linkille voi määritellä korkeuden, leveyden ja taustakuvan?

Eli sivulla on kymmeniä linkkejä, ja haluan että kaikilla olisi sama leveys ja korkeus (joka olisi sama kuin linkin taustakuvat koko) ja linkit näyttäisivät nappuloilta.

Onnistuuko tämä mitenkään?

7

472

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Höpö.

      html:

      linkki


      css:

         .link {
            height: 20px;
            width: 100px;
            background: url(kuva.jpg);
            text-align: center;
         }

      • foxytin

        Kaikkihan tietävät että linkit tulee sijoittaa lista-elementtiin, joten tehkäämme niin.


        linkki1
        linkki2
        jne...


        li {
        height: 20px;
        width: 100px;
        background: url(kuva.jpg);
        }


      • Höpö.
        foxytin kirjoitti:

        Kaikkihan tietävät että linkit tulee sijoittaa lista-elementtiin, joten tehkäämme niin.


        linkki1
        linkki2
        jne...


        li {
        height: 20px;
        width: 100px;
        background: url(kuva.jpg);
        }

        ei ollenkaan huono tapa, mutta ei suinkaan ainoa oikea tapa.

        Tapauskohtaisesti.


      • foxytin
        Höpö. kirjoitti:

        ei ollenkaan huono tapa, mutta ei suinkaan ainoa oikea tapa.

        Tapauskohtaisesti.

        Ei tietenkään ainoa oikea tapa. Tuon vain erilaisia vaihtoehtoja esille, josta sitten valita :)

        Periaatteessa suuremmat linkki määrät, kuten navigaatio olisi hyvä sijoittaa listaan. Se olisi semanttisesti oikein. Jos linkit ovat listassa, ne voidaan siirtää muihin medioihin kerralla, helposti. Aivan kuten taulukkomuotoinen data tulee laittaa taulukkoon, josta se on helposti siirrettävissä muihin medioihin (kuten tekstinkäsittelyohjelmat).

        Yksittäiset linkit voidaan laittaa ihan suoraan esimerkiksi p-elementtiin, tai esimerkiksi mainitsemaasi span-elementtiin.

        Tapauskohtainenhan se tottakait on, aivan kuten sanoit.


      • Pilkuton pilkunviilaaja
        foxytin kirjoitti:

        Ei tietenkään ainoa oikea tapa. Tuon vain erilaisia vaihtoehtoja esille, josta sitten valita :)

        Periaatteessa suuremmat linkki määrät, kuten navigaatio olisi hyvä sijoittaa listaan. Se olisi semanttisesti oikein. Jos linkit ovat listassa, ne voidaan siirtää muihin medioihin kerralla, helposti. Aivan kuten taulukkomuotoinen data tulee laittaa taulukkoon, josta se on helposti siirrettävissä muihin medioihin (kuten tekstinkäsittelyohjelmat).

        Yksittäiset linkit voidaan laittaa ihan suoraan esimerkiksi p-elementtiin, tai esimerkiksi mainitsemaasi span-elementtiin.

        Tapauskohtainenhan se tottakait on, aivan kuten sanoit.

        "Periaatteessa suuremmat linkki määrät, kuten navigaatio olisi hyvä sijoittaa listaan. Se olisi semanttisesti oikein."

        Ei se ole semanttisesti sen väärempää laittaa linkkejä muuhun kuin listaan vaikka niitä olisi suurempia määriä sivulla. Tärkein asia on että ovatko linkit listamuotoista tietoa, kuten navigaatiot ovat. Kuten sanoit tapauskohtasta.


        "Yksittäiset linkit voidaan laittaa ihan suoraan esimerkiksi p-elementtiin, tai esimerkiksi mainitsemaasi span-elementtiin."
        "linkki"

        Kun kyse on yksittäisistä linkeistä niin eikös silloin semanttisin ole laittaa ihan semanttinen linkki

        Tietenkin voi tehdä myös


        linkki tekstiä linkki....


        #teksti a{
        height: 20px;
        width: 100px;
        background: url(kuva.jpg);
        text-align: center;
        }


      • Oikein toimivassa selaimessa height- ja width-ominaisuus eivät vaikuta span-elementtiin (ellei sen perusesitysmuotoa muuteta display-ominaisuudella). Tässä span olisi myös turha, koska ominaisuudet voisi antaa suoraan a-elementeille.


    • Jos sivulla on kymmeniä linkkejä, sillä on todennäköisesti aivan liikaa linkkejä.

      Jos haluat linkkien näyttävän nappuloilta, leikit väärässä paikassa väärillä palikoilla. "Links want to be links."

      Linkkien taustakuva on myös varsin huono ajatus.

      Linkille saa toki korkeuden, leveyden ja taustakuvankin, kunhan asettaa sille display: block ja height-, width- ja background-ominaisuuden.

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

    Luetuimmat keskustelut

    1. Tänään pyörit ajatuksissa enemmän, kun erehdyin lukemaan palstaa

      En saisi, silti toivon että sinä vielä palaat ja otetaan oikeasti selvää, hioituuko särmät ja sulaudummeko yhteen. Vuod
      Ikävä
      22
      5214
    2. Huomenta ihana

      Kauniskasvoinen ihanuus 😘 saan sut vielä
      Ikävä
      25
      4378
    3. Hei rakas...

      Miten on työpäivä sujunut? Rakastan sinua 💗
      Ikävä
      27
      2501
    4. Edelleen sitä on vaikea uskoa

      Että olisit oikeasti rakastunut muhun
      Ikävä
      34
      2264
    5. Toiveikas vai toivoton

      torstai? Ajatuksia?
      Ikävä
      37
      2008
    6. Vitsi mihin menit. Heti takasin.

      Mä näin sut tuu takasin! Oli kiire, niin en ehtiny sin perään!
      Ikävä
      15
      1918
    7. En ole koskaan kokenut

      Ennen mitään tällaista rakastumista. Tiedän että kaipaan sinua varmaan loppu elämän. Toivottavasti ei tarvitsisi vain ka
      Ikävä
      19
      1607
    8. Mukavaa päivää

      Mun rakkauden kohteelle ❤️ toivottavasti olet onnellinen
      Ikävä
      12
      1531
    9. Voi ei! Jari Sillanpää heitti keikan Helsingissä - Hämmästyttävä hetki lavalla...

      Ex-tangokuningas on parhaillaan konserttikiertueella. Hän esiintyi Savoy teatterissa äitienpäivänä. Sillanpää jakoi kons
      Suomalaiset julkkikset
      21
      1267
    10. Kerranki asiat oikein

      Ilkka ja muut pienpuolueeet...teitte hyvän työn kun valitsitte pätevän henkilön virkaan eikä kepulle passelia!! Jatkakaa
      Haapavesi
      10
      1184
    Aihe