Välkkyvä linkkilaatikko

moona

Heippa! Haluaisin tehdä menun, jossa linkit ovat tuollaisia laatikoita, jotka vaihtavat väria kun kursorin vie kohdalle. En osaa muuttaa koodia niin, että se toimisi muillakin selaimilla kun IE:llä. Muilla selaimilla laatikot menevät päällekkain jos laittaa paddingia, eivatka ne tottele leveyden ja korkeuden määrityksiä. Osaisiko joku auttaa?

HTML >>>>>>

loota
laatikko

CSS >>>>>>>

a.box {
width: 100px;
height: 50px;
padding-left: 25px;
padding-top: 15px;
background-color: pink;
text-decoration: none;
border-bottom: solid black 1px;
}

a:hover.box {
background-color: yellow;
}

7

561

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Ruussi
    • Poro1

      kokeilepas tuollaista:
      -----
      a.navi2
      {
      text-decoration: none;
      display: block;
      padding: 2px;
      width: 99%;
      border-bottom: 1px solid #c0c0c0;
      line-height: 25px;
      }
      a:link.navi2 {color: #ffffff;}
      a:visited.navi2 {color: #ffffff;}
      a:hover.navi2 {background-color: #000000;color: white;border-right: 3px solid yellow;}
      -------
      Linkki

      Tämä siis ilman noita --- viivoja ja mahdollisia suomi24:n lisäämiä puolipisteitä ; ja tietysti tarkoittaa esim. pystytasoon linkin allekkain. Voit kokeilla myös vaakaan peräkkäin, mutta vaatii muutoksia...

      :)

    • moona

      Joo, kiitos. Vastaus ongelmaan on siis
      "display: block;" :)

      • Poro1

        Se display block on lähinnä tulostusta varten, ettei kaikki hienoudet tulostettaessa tule mukaan....

        (kaiketi...?)

        :)

        Jos enkku sujuu: http://www.w3schools.com ja sieltä vasemmalta "learn css" ja avautuvalta sivulta "try it yourself" jossa on lista kaikesta kivasta ja näet miten se on tehty ja voit muuttaa koodia ja testata mitä tapahtuu...

        Samoin jos haluat lisää opiskella: "learn html" ja "try it yourself".


      • Höpö
        Poro1 kirjoitti:

        Se display block on lähinnä tulostusta varten, ettei kaikki hienoudet tulostettaessa tule mukaan....

        (kaiketi...?)

        :)

        Jos enkku sujuu: http://www.w3schools.com ja sieltä vasemmalta "learn css" ja avautuvalta sivulta "try it yourself" jossa on lista kaikesta kivasta ja näet miten se on tehty ja voit muuttaa koodia ja testata mitä tapahtuu...

        Samoin jos haluat lisää opiskella: "learn html" ja "try it yourself".

        »Se display block on lähinnä tulostusta varten, ettei kaikki hienoudet tulostettaessa tule mukaan.... »

        Kyllä sitä siihenkin VOI käyttää ( display:no; ), mutta jos display on VAIN tulostusta varten, niin miksi siinä on muitakin vaihtoehtoja joista tärkeimmät ovat block, inline ja list-item.

        block: rivinvaihto ennen ja jälkeen elementin (käytännöstä tekee elementistä ikään kuin lohkoelementin)

        inline: ei rivinvaihtoa ennen eikä jälkeen elementin (käytännössä tekee elementistä ikään kuin in-line elementin)

        list-item: sama kuin block, paitsi että lisätään listamerkki

        none: elementtiä ei näytetä


      • Höpö
        Höpö kirjoitti:

        »Se display block on lähinnä tulostusta varten, ettei kaikki hienoudet tulostettaessa tule mukaan.... »

        Kyllä sitä siihenkin VOI käyttää ( display:no; ), mutta jos display on VAIN tulostusta varten, niin miksi siinä on muitakin vaihtoehtoja joista tärkeimmät ovat block, inline ja list-item.

        block: rivinvaihto ennen ja jälkeen elementin (käytännöstä tekee elementistä ikään kuin lohkoelementin)

        inline: ei rivinvaihtoa ennen eikä jälkeen elementin (käytännössä tekee elementistä ikään kuin in-line elementin)

        list-item: sama kuin block, paitsi että lisätään listamerkki

        none: elementtiä ei näytetä

        Ei tämä nyt välttämättä tähän kuulu, mutta huomasin just äsken mitä tapahtuu kun TopStylessä painaa F1 -nappia kun on jokin css-ominaisuus valittuna. No se tietenkin näyttää mitä mikäkin arvo tarkoittaa. Joka päivä oppii jotain uutta:)


      • Höpö
        Höpö kirjoitti:

        Ei tämä nyt välttämättä tähän kuulu, mutta huomasin just äsken mitä tapahtuu kun TopStylessä painaa F1 -nappia kun on jokin css-ominaisuus valittuna. No se tietenkin näyttää mitä mikäkin arvo tarkoittaa. Joka päivä oppii jotain uutta:)

        TopStylessä ei ole kerrottu läheskään kaikkea. Enemmän displaysta löytää (tietenkin) seuraavasta linkistä:
        http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop


    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
      5164
    2. Huomenta ihana

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

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

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

      torstai? Ajatuksia?
      Ikävä
      37
      1998
    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
      1587
    8. Mukavaa päivää

      Mun rakkauden kohteelle ❤️ toivottavasti olet onnellinen
      Ikävä
      12
      1521
    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
      1247
    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
      1174
    Aihe