apu-va

gigigi

Jos laitat ton kuva.jpg kohdalle jonkun kuvan, niin miksi mozilla venyttää laatikon kuvaa pidemmäksi? Haluaisin että pinkki laatikko olisi tasan kuvan mittainen molemmilla selaimilla. Kiitos paljon!
----------------------






#box {
background-color: pink;
}

5

423

    Vastaukset

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

      Minun tietääkseni Mozillan lisäksi on enemmänkin kuin yksi selain.

      Sinänsä hassu juttu että Moz (ja ainakin Opera myös) näyttää sen noin. Ongelman saa ratkaistua ainakin siten, että antaa boxille saman korkeuden kuin siihen laitettavalle kuvalle. Ja jos leveyden antaa kans niin box pysyy leveyssuunnassakin kuvan kokoisena.

      • gigigi

        Joo niin onhan niitä muitakin selaimia...Sivuja tehdessä testaan yleensä vaan mozillaa ja IE:tä.

        En haluaisi antaa laatikolle pituutta siksi, että halusin erottaa php:n avulla rakenteen ja sisällön omiin tiedostoihin...Eli yritän laittaa sellaisia css määrityksiä, että sisällöstä riippumatta laatikko näyttäisi siltä kun haluan, olipa siinä kuvaa tai tekstiä. Mutta pitää varmaan sitten tehdä vähän eri tavalla.

        Minä kun ajattelin, että tässä on taas joku tosi yksinkertainen ratkaisu, jota en vaan keksi...mutta ei sitten varmaan ole jos Höpökään ei tiedä.


      • gigigi kirjoitti:

        Joo niin onhan niitä muitakin selaimia...Sivuja tehdessä testaan yleensä vaan mozillaa ja IE:tä.

        En haluaisi antaa laatikolle pituutta siksi, että halusin erottaa php:n avulla rakenteen ja sisällön omiin tiedostoihin...Eli yritän laittaa sellaisia css määrityksiä, että sisällöstä riippumatta laatikko näyttäisi siltä kun haluan, olipa siinä kuvaa tai tekstiä. Mutta pitää varmaan sitten tehdä vähän eri tavalla.

        Minä kun ajattelin, että tässä on taas joku tosi yksinkertainen ratkaisu, jota en vaan keksi...mutta ei sitten varmaan ole jos Höpökään ei tiedä.

        Ilmeisesti yrität sanoa, että laatikon taustaväri ulottuu kuvan _alapuolelle_ eli laatikko on _korkeampi_ kuin kuva, vaikka kirjoitit alkuperäisessä viestissä, että se on _pitempi_ ja nytkin kirjoitat laatikon _pituudesta_. Kyllä suorakulmion pituus tarkoittaa normaalikielessä sen _leveyttä_ (width), ja toinen ulottuvuus on korkeus (height).

        Muotoilusi "sisällöstä riippumatta laatikko näyttäisi siltä kun haluan, olipa siinä kuvaa tai tekstiä" on kaikessa hilpeydessäänkin - pitäisikö meidän lukea ajatuksiasi sen jälkeen, kun olemme itse rakentaneet testisivun, kun et viitsinyt kertoa URLia, ja lukea niitä vielä vastoin sitä, mitä kirjoitit - paradoksaalisen oikeaan osuva (vrt. sokea kana ja jyvä).

        Kyse nimittäin on siitä, että Mozilla todellakin esittää pelkän kuvan sisältävän laatikon samalla tavalla kuin sellaisen, jossa on (myös) tekstiä. Lisävihje: mikä on vertical-align-ominaisuuden oletusarvo?

        Kuva on Mozillan mielestä kuin erikoinen kirjain, ja se jököttää tekstin perusrivillä. Perusrivin alle selain varaa tilaa merkkien alapidennyksille. Huomaat tämän, jos kirjoitat kuvan viereen tekstiä, jossa on kirjaimia, joissa on alapidennyksiä (j, g, þ tms.).

        Niinpä siistein ratkaisu _tähän_ ongelmaan lienee
        #box img { vertical-align: bottom; }


    • Lohkon kuten div-elementin oletusleveys on auto eli koko käytettävissä oleva tila. Kyllä niin käy IE:lläkin. Olet tehnyt jotain, joka ei ilmene koodileikkeestä. Vihje: kertomalla URLin autat muita auttamaan sinua ja säästät kaikki noin kolmelta tyhjäkäyntikierrokselta keskustelussa.

      Ja mitähän tarkoitat, että laatikko olisi kuvan levyinen? Silloinhan se jää tasan kuvan alle. Jos nyt kuitenkin haluat niin tehdä (koska kuvassa on läpinäkyvyyttä?), aseta CSS:ssä div-elementille sama leveys kuin kuvalla on, siis tyyliin .

      Ja sitten muita vihjeitä, noin kymmenen ensin mieleen tullutta:
      1) Opettele kirjoittamaan järjellinen otsikko kysymyksellesi.
      2) Opettele kirjoittamaan (järjellinen) title-elementti jokaiselle HTML-dokumentille.
      3) Älä leiki XHTML:llä, kun et kuitenkaan osaa. Käytä XHTML 4.01:tä.
      4) Älä kirjoita lang-määritteitä, jos et viitsi kirjoittaa niihin oikeaa kieltä.
      5) Älä unohda alt-määritettä. Edes testeistä.
      6) Älä leiki värinnimillä. Esimerkiksi pink on standardoimaton. Käytä numerokoodeja ja värisuunnittelutyökaluja (avainsana: color picker).
      7) Aseta background: ... mieluummin kuin background-color: ... ihan periaatteen vuoksi (tulet nimittäin näin asettaneeksi varmuuden vuoksi background-image: none).
      8) Aseta color aina kun aseteta background-ominaisuudet, ja kääntäen. Pelkän kuvan sisältävä elementti ole poikkeus. Vihje: ks. vinkkiä 5.
      9) Käytä yleensä mieluummin class- kuin id-määritettä, ellei ole varmaa, että tarvitsee viita vain yhteen elementtiin.

      • vois

        olla luetun ymmärtäminen ennen viisasteluja..!


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

    Luetuimmat keskustelut

    1. Seksuuaalivinksataneiden toimintaa rahoitetaan valtion varoilla.

      Setan toimintaa rahoitetaan valtionavustuksilla, joilla mm kierretään kouluissa haalimassa alaikäisiä mukaan perverssii
      Maailman menoa
      29
      4621
    2. Perintovero 100 prosenttiin, työeläkkeet ja maataloustuet pois

      Noilla eväillä lähden tasapainottamaan valtiontaloutta ja korjaamaan työntekijöiden palkkakuoppaa nostamatta työnantajie
      Maailman menoa
      128
      3982
    3. Riikka runnoo: polttoöljyn hinta nousi maaliskuussa 40 prosenttia

      Onko irvistelijällä sakset hävinneet, vai miksei osaa leikata polttoaineiden hintaa kansalaisten kukkarolle sopivalle ta
      Maailman menoa
      33
      3707
    4. Demariskandaali! Eveliina Heinäluoma (sdp) kahmii kaikki Hitas asunnot itselleen!

      Heinäluoma on ostanut useita yhteiskunnan tukemia, hintasäännösteltyjä asuntoja itselleen! Ei ihme, että Hitas on ollut
      Maailman menoa
      146
      2699
    5. Mökkejä ostellaan nyt ihan hulluna!

      Tyypilliset lainamäärät on yli 500 000€ mökkejä ostellessa eli erityisesti tuollaiset miljoonamökit on nyt suomalaisten
      Maailman menoa
      86
      2573
    6. Purra ryöväsi Marinin Itä.-Suomelle neuvottelemat EU-rahat

      Perust vihaavat suomalaisia, mutta eritoten itäsuomalaisia. "Osa kaksikäyttörahoista on alun perin Itä- ja Pohjois-Suom
      Maailman menoa
      13
      2451
    7. Miksi persut hyökkäävät jatkuvasti henkilöitä päin?

      Miksei persut yritä lainkaan korjata asioita, vaan koko ajan haukkuvat henkilöitä? Ei tuollaisilla turvanpieksäjillä ole
      Maailman menoa
      27
      2429
    8. Demarien sanoin kuvaamaton ahneus - Eveliina Heinäluoma vain yksi esimerkki

      Mutta näin se on demari-eliitissä aina ollut, käytännössä siis nämä eliittiin kuuluvat ovat puhtaasti porvareita - Marin
      Maailman menoa
      65
      2297
    9. Ranskan vasemmistojohtaja tunnustaa, että väestö on vaihtumassa

      ja se on vaan hyvä asia hänen mielestään. Kyseessä siis Ranskan vasemmistojohtaja Jean-Luc Mélenchon jonka puheet järkyt
      Maailman menoa
      53
      1957
    10. Abdullah iski Citycenterin vessassa

      Miksi näitä juttuja pitää lukea lähes päivittäin? https://www.hs.fi/helsinki/art-2000011913632.html
      Maailman menoa
      144
      1766
    Aihe