thumbnailit/kuvat liikkuu kun vien osoittimen päälle

Tuce

Eli mulla on kuvia rivissä ja kun vien osoittimen kuvan päälle ja tuo hoverin määrrittämä border tulee näkyviin, niin kuvan reunuksen koko muuttuu ja se ilmeisesti vie alla olevan kuvan tilaa, jolloin ne järjestyy uudelleen. Millä koodilla siis saan noi pysyy paikallaan? Olen koittanu koodilla saada väliin rivin mutta ei onnistu id:llä olen määrittäny 1em ei auta...

Toinen juttu olisi miten saan IE:ssä hoverin toimimaan tai/ja jotenkin fiksusti edes kuvia irti taustasta? IEllä en saa kuvan ympärille kunnolla edes reunusta näkymään, kun Firefoxilla toimii tällänen koodi, joka tekee hienon varjon kuvan alle:

.item .thumb
{
height: 130px;
width:auto;
padding:3px;
border:1px ;
solid #DDD;
-moz-box-shadow: 5px 5px 7px #000000;
box-shadow: 5px 5px 7px #000000;
-webkit-box-shadow: 5px 5px 7px #000000;
}

8

388

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • weretty

      >> ja tuo hoverin määrrittämä border tulee näkyviin

      Jospa laitat ne kaikki koodit esille nyt ensalkuun koska sitä ei ollut tuossa mainittu. Lisäksi antamasi koodi sisältää jo itsessään virheen joten en ihmettele jos se ei toimi. Pääperiaate on kuitenkin se, että jos elementin leveyttä kasvatetaan, vaikka vain reunaviivalla, se siirtää jäljessään tulevia eteenpäin.

      • Jejej

        "Pääperiaate on kuitenkin se, että jos elementin leveyttä kasvatetaan, vaikka vain reunaviivalla, se siirtää jäljessään tulevia eteenpäin."
        Niin käyttämällä http://css-tricks.com/box-sizing/ elementin leveys pysyy määriteltynä vaikka viivanpaksuus muuttuu.


    • Jejej

      Niin helppohan toi on korjata.
      img {
      border: none;
      margin: 30px;
      }

      img:hover {
      border: 3px solid #505050;
      margin: 27px;

      -webkit-box-shadow: 5px 5px 7px #000000;
      -moz-box-shadow: 5px 5px 7px #000000;
      -o-box-shadow: 5px 5px 7px #000000;
      box-shadow: 5px 5px 7px #000000;

      behavior: url("/tunnuksesi/public_html/js/PIE.htc");
      }

      Siis marginaalista vähennetään viivan leveys, jolloin tila pysyy samana eikä pompi.
      Varjot kannattaa luotelle tossa järjestyksessä, koska tällöin standarti määritys jää voimaan jos selain tukee sitä.
      Sekä käytetään http://css3pie.com/ jolloin IE:llä saa varjot, kulmien pyöristykset... toimimaan.

      Osaat varmaankin soveltaa ton omaan tarkoitukseesi.

      • tuce

        Kiitti!, muuten hyvä mozillalla tuntuisi toimivan, mutta IE:ssä menee noi varjot vääriin kohtiin eli ei ole noiden kuva thumbnailien alla. Miten ne korjataan thumbnailien alle?
        Tässä toi css teksti noiden osalta:




        /* thumbsit */
        .item
        {
        border: none;
        margin: 30px;
        float: left;
        }

        .item:hover
        {
        border: 3px;
        margin: 27px;

        }



        .item .thumb
        {

        height: 130px;
        width:auto;
        background: #f9f9f9;
        border: none;
        margin: 30px;

        -webkit-box-shadow: 5px 5px 7px #000000;
        -moz-box-shadow: 5px 5px 7px #000000;
        -o-box-shadow: 5px 5px 7px #000000;
        box-shadow: 5px 5px 7px #000000;

        behavior: url("PIE/PIE.htc");
        }




        .item img:hover
        {
        height: 130px;
        width:auto;
        background: #f9f9f9;
        border: 3px solid #505050;
        margin: 27px;

        -webkit-box-shadow: 5px 5px 7px #000000;
        -moz-box-shadow: 5px 5px 7px #000000;
        -o-box-shadow: 5px 5px 7px #000000;
        box-shadow: 5px 5px 7px #000000;
        behavior: url("PIE/PIE.htc");
        }


      • tuce
        tuce kirjoitti:

        Kiitti!, muuten hyvä mozillalla tuntuisi toimivan, mutta IE:ssä menee noi varjot vääriin kohtiin eli ei ole noiden kuva thumbnailien alla. Miten ne korjataan thumbnailien alle?
        Tässä toi css teksti noiden osalta:




        /* thumbsit */
        .item
        {
        border: none;
        margin: 30px;
        float: left;
        }

        .item:hover
        {
        border: 3px;
        margin: 27px;

        }



        .item .thumb
        {

        height: 130px;
        width:auto;
        background: #f9f9f9;
        border: none;
        margin: 30px;

        -webkit-box-shadow: 5px 5px 7px #000000;
        -moz-box-shadow: 5px 5px 7px #000000;
        -o-box-shadow: 5px 5px 7px #000000;
        box-shadow: 5px 5px 7px #000000;

        behavior: url("PIE/PIE.htc");
        }




        .item img:hover
        {
        height: 130px;
        width:auto;
        background: #f9f9f9;
        border: 3px solid #505050;
        margin: 27px;

        -webkit-box-shadow: 5px 5px 7px #000000;
        -moz-box-shadow: 5px 5px 7px #000000;
        -o-box-shadow: 5px 5px 7px #000000;
        box-shadow: 5px 5px 7px #000000;
        behavior: url("PIE/PIE.htc");
        }

        Nii ja toi on muutenki outo, kun ei toimi ilman noita kaikkia, vaikka tossahan on oikeestaan kaksi turhaa määritystä. En tajuu mikä vikana.


      • tuce
        tuce kirjoitti:

        Nii ja toi on muutenki outo, kun ei toimi ilman noita kaikkia, vaikka tossahan on oikeestaan kaksi turhaa määritystä. En tajuu mikä vikana.

        Jos laitan doctypeksi tän:



        , niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:


      • tuce
        tuce kirjoitti:

        Jos laitan doctypeksi tän:



        , niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:

        Eli jos laitan tän, niin toimii: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        Nyt on: PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


      • Jejej
        tuce kirjoitti:

        Jos laitan doctypeksi tän:



        , niin toimii varjot oikeilla kohdilla IE:ssä, Mutta silloin menee mozillassa taas valikoiden ulkonäkö sekasin. Voiko siis doctypeä vaihtaa noin vaan vai mitä muuta pitää vaihtaa? nyt on:

        Niin doctypeksi kannattaa valita semmoinen millä selaimet toimii standarti tilassa näin eri selaimet toimivat hyvin samallatavalla. Nykyään huoletta voi käyttää !DOCTYPE html> vaikka ei käyttäisi mitään HTML 5 jutuista. Ei doctypeä tarvitse vaihdella kun kerralla valitsee toimivan. http://hsivonen.iki.fi/doctype/

        Katsomalla tota taulukkoa niin huomaat PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" todella huono valinta, sillä IE toimii todella epästandartisti joka aiheuttaa paljon ongelmia, muiden selainten kohdilla ongelmat pienempiä. Vaihda kunnollinen doctype niin autellaan sitten ongelmissa mikäli niitä tulee.

        "Eli jos laitan tän, niin toimii: PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        Nyt on: PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">"

        Et voi vaihtaa noin, sillä toinen on XHTML ja toinen HTML, XHTML:ssä tagit pitää sulkea esim br /> ei br>. !DOCTYPE html> on siitä hyvä että voi kirjoittaa kumpaa tahansa, vaikka XHTML suosittelisin selkeempä.

        Turhaa määrität varjot molemmissa koska ne menevä päällekkäin joten .item .thumb tai mielummin .item img riittää.

        Jos liität koodia niin muista korvata kaikki < (pienempi kuin) merkit muuten ei näy. Tai sitten lisäät keskustelun vaikkapa http://www.menthal27.net/keskustelu/ jossa ei tämmöistä turhaa ongelmaa ole.


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

    Luetuimmat keskustelut

    1. Sanna Marin kysyi hämmästyneenä: Onko Suomessa jäänmurtajia?

      Nettilehden toimittaja kysyi Sanna Marinilta suoraan, että sovittiinko nuo jäänmurtajien kaupat jo 2019, jolloin Marin k
      Maailman menoa
      117
      4326
    2. Voiko normaali ihminen ryhtyä vasemmistolaiseksi?

      Tätä jäin pohdiskelemaan.
      Maailman menoa
      150
      3689
    3. SDP haluaa 40 000 nettomaahanmuuttajaa

      SDP:n Suunnanmuutos-vaihtoehtobudjetissa, käy ilmi, että demarit itse asiassa vaativat räjähdysmäistä ”työperäisen” maah
      Maailman menoa
      90
      3450
    4. Mikä tuota vasemmistolaisista jankkaavaa vaivaa?

      Pahasti on ihon alle, siis korvien väliin, päässeet kummittelemaan. Ei ole terveen ihmisen merkki jankata yhdestä asia
      Maailman menoa
      39
      2829
    5. Mitä ajattelit kun näit

      kaivattusi ensimmäisen kerran? xd
      Ikävä
      129
      1740
    6. Nyt meni lopulliset lämmöt.

      Alan käyttäytymään yhtä kylmästi miehiä kohtaan kuin mua kohtaan on käyttäydytty ja vain käytetty viimeiset pari vuotta
      Sinkut
      37
      1568
    7. Orpo loukkaantui fasismiin viittaavasta sanavalinnasta

      Mutta miksi loukkaantui? Orpohan on tehnyt yhteistyötä fasistien kanssa jo vuonna 2019, siis jo neljä vuotta ennen loukk
      Maailman menoa
      14
      1211
    8. Sulla on avaimet ja keinot

      Jos haluat jatkaa tutustumista. Itse olen niin jäässä etten pysty tekemään enää mitään. Pidempi keppi johon on helpompi
      Ikävä
      19
      1184
    9. Meitä ei tule

      Koska periaatteemme ovat rakkautta vahvempia. Tämä on siis koettelemus, jonka tarkoitus on vahvistaa meitä yksilöinä 😌
      Ikävä
      22
      1154
    10. Onko erityinen paikka jossa haluaisit nyt olla

      Onko joku spesiaali lempipaikka missä mieluiten olisit?
      Ikävä
      42
      1140
    Aihe