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

524

    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. Paras olisi vain unohtaa

      Tuleekohan tähän meidän tilanteeseen ikinä mitään selvyyttä. Epätoivo iskee taas, enkä jaksaisi enää odottaa. Kohta lop
      Ikävä
      81
      1770
    2. Voisitko laittaa

      Nimesi ensimmäisen ja kaksi viimeistä kirjainta tähän?
      Ikävä
      77
      1388
    3. Suomalaisia naisia lennätetään seksimatkoille

      https://www.iltalehti.fi/kotimaa/a/1f5f5e20-8c36-4907-9640-8e0c3b017c5a Gambia on jo vuosia ollut yhtä kuin munanhaku ma
      Lieksa
      193
      1356
    4. Mietitikö nainen koskaan

      Miksi me ollaan päädytty tähän pisteeseen. Lähestmistapaa ei ole. Tarvitaanko me oikeasti enää tätä.
      Ikävä
      106
      1308
    5. Nämä kaikki alla olevat aloitukset on saman naisen aloituksia

      Kuinka paljon täytyy vintissä viheltää että esiintyy välillä jopa miehenä, ja sitten itse vastailee omiin kysymyksiinsä?
      Ikävä
      163
      1081
    6. huono omatunto

      johtuu siitä, että minulla on tunteita sinua kohtaan. Se vaikuttaa asiaan. Kaipasin sinua tänäänkin.
      Ikävä
      64
      1063
    7. Päätin juuri että

      En odota että meidän välillä enää tapahtuisi mitään. Tämä on aivan liian monimutkaista ja kyllä sinäkin olisit joskus mi
      Ikävä
      32
      912
    8. Onnistuit sohaisemaan mua

      Kaikkein herkimpään kohtaan ja kyseenalaistamaan mun luottamuksellisuuden. Kun sitä ei ole niin ei ole mitään muutakaan
      Ikävä
      62
      896
    9. Huomenna se

      Tulee kohta, odotatko?
      Ikävä
      61
      836
    10. Mitä kaipaat

      Usein elämässäsi
      Ikävä
      94
      804
    Aihe