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

567

    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. Hengenvaaralliset kiihdytysajot päättyivät karmealla tavalla, kilpailija kuoli

      Onnettomuudesta on aloitettu selvitys. Tapahtuma keskeytettiin onnettomuuteen. Tapahtumaa tutkitaan paikan päällä yhtei
      Kauhava
      172
      6293
    2. Ootko rakastunut?

      Kerro pois nyt
      Ikävä
      147
      1744
    3. Onhan sulla nainen parempi mieli

      Nyt? Ainakin toivon niin.
      Ikävä
      113
      1528
    4. Ujosteletko tosissaan vai mitä oikeen

      Himmailet???? Mitä pelkäät?????
      Ikävä
      51
      1280
    5. Suureksi onneksesi on myönnettävä

      Että olen nyt sitten mennyt rakastumaan sinuun. Ei tässä mitään, olen kärsivällinen ❤️
      Ikävä
      46
      962
    6. Möykkähulluus vaati kuolonuhrin

      Nuori elämä menettiin täysin turhaan tällä järjettömyydellä! Toivottavasti näitä ei enää koskaan nähdä Kauhavalla! 😢
      Kauhava
      32
      879
    7. Älä mies pidä mua pettäjänä

      En petä ketään. Älä mies ajattele niin. Anteeksi että ihastuin suhun varattuna. Pettänyt en ole koskaan ketään vaikka hu
      Ikävä
      97
      856
    8. Reeniähororeeniä

      Helvetillisen vaikeaa työskennellä hoitajana,kun ei kestä silmissään yhtään läskiä. Saati hoitaa sellaista. Mitä tehdä?
      Kouvola
      5
      809
    9. Tarvitsemme lisää maahanmuuttoa.

      Väestö eläköityy, eli tarvitsemme lisää tekeviä käsiä ja veronmaksajia. Ainut ratkaisu löytyy maahanmuutosta. Nimenomaan
      Maailman menoa
      231
      775
    10. Kävit nainen näemmä mun

      Facessa katsomassa....
      Ikävä
      41
      759
    Aihe