Mikä on oikein tapa

tehdä....

Mikä on oikea tapa tehdä pyöreät kulma DIV-laatikoille?

13

787

Äänestä

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • Yucca

      Esimerkiksi

      div{ border-radius: 1em; border: solid 2px #660; padding: 0.3em;}

      Tuo on "oikein tapa", sillä se on tuoreimman CSS 3 -luonnoksen mukainen. Nyt vain odottamaan jokunen vuosi(kymmen), että selaimet toteuttavat sen. Mozillassa border-radius sentään jo osittain toimii, tosin nimellä -moz-border-radius.

      Jos haluat nyt toimivan tavan niin kovasti, että olet valmis tekemään suttuista koodia ja kuvankäsittelyohjelmalla muutamia kuvia, tee kuten muutkin tämän tekevät eli rakenna 9-alkioinen taulukko, jossa keskimmäisessä solussa on sisältö ja muissa sopivia kuvia.

      • foxytin

        Miksi tehdä taulukolla, kun voisi käyttää esimerkiksi div-elementtejä, joka olisi vieläpä semanttisesti oikein. Taulukoita kun tosiaan tulee käyttää vain taulukkomuotoisen datan esittämiseen.

        Kolme div-elementtiä. Kuva, joka jaetaan kolmeen osaan (ylakuva, keskikuva ja alakuva). Keskimmäisen kuvan, eli "sisältö" alueen kuvan ei tarvitse olla kuin 1px korkea. Ensimmäiseen diviin yläkuva taustakuvaksi, toiseen diviin keskimmäinen kuva ja kolmanteen diviin alakuva.

        Tietenkin jos kuvat ovat valtavan kokoisia, niin taulukko voisi olla viisaanpi, kun voidaan käyttää taustakuvan toistettavuutta ja selvitään muutamalla 1px korkuisella/levyisellä kuvalla ja muutamalla isommalla (reunat) kuvalla. Mutta silloin heitetään "semanttinen web" käsitys roskiin, joka ei ole hyväksi.

      • Yucca
        foxytin kirjoitti:

        Miksi tehdä taulukolla, kun voisi käyttää esimerkiksi div-elementtejä, joka olisi vieläpä semanttisesti oikein. Taulukoita kun tosiaan tulee käyttää vain taulukkomuotoisen datan esittämiseen.

        Kolme div-elementtiä. Kuva, joka jaetaan kolmeen osaan (ylakuva, keskikuva ja alakuva). Keskimmäisen kuvan, eli "sisältö" alueen kuvan ei tarvitse olla kuin 1px korkea. Ensimmäiseen diviin yläkuva taustakuvaksi, toiseen diviin keskimmäinen kuva ja kolmanteen diviin alakuva.

        Tietenkin jos kuvat ovat valtavan kokoisia, niin taulukko voisi olla viisaanpi, kun voidaan käyttää taustakuvan toistettavuutta ja selvitään muutamalla 1px korkuisella/levyisellä kuvalla ja muutamalla isommalla (reunat) kuvalla. Mutta silloin heitetään "semanttinen web" käsitys roskiin, joka ei ole hyväksi.

        Jos yrität oikeasti tehdä noin, huomaat tarvitsevasi kuitenkin yhdeksää div-elementtiä. Sitten sinulla on todellisuudessa 3×3-taulukko silputtuna erillisiksi diveiksi, ja kokonaisuus on sekavampi, vaikeammin hallittavissa ja enemmän koodia vaativa. Eikä diveissä ole mitään semanttista - div on määritelmän mukaan semanttisesti tyhjä lohkoelementti.

        _Looginen_ merkkaus ei tietenkään käyttäisi tässä tapauksessa sen enempää taulukkoa kuin divejäkään vaan elementtiä, joka kuvaa datan sisältöä. Mutta jos sellaisesta haluaa pitää kiinni, pitää hyväksyä se, että kulmat eivät ole pyöristettyjä tai ne pyöristetään selainkohtaisella CSS-koodilla.

        ("Semanttista Webiä" ei kannata tähän sotkea. Se on vain Tim Berners-Leen ja kumppanien iskusana ja haave.)

      • _punk_
        Yucca kirjoitti:

        Jos yrität oikeasti tehdä noin, huomaat tarvitsevasi kuitenkin yhdeksää div-elementtiä. Sitten sinulla on todellisuudessa 3×3-taulukko silputtuna erillisiksi diveiksi, ja kokonaisuus on sekavampi, vaikeammin hallittavissa ja enemmän koodia vaativa. Eikä diveissä ole mitään semanttista - div on määritelmän mukaan semanttisesti tyhjä lohkoelementti.

        _Looginen_ merkkaus ei tietenkään käyttäisi tässä tapauksessa sen enempää taulukkoa kuin divejäkään vaan elementtiä, joka kuvaa datan sisältöä. Mutta jos sellaisesta haluaa pitää kiinni, pitää hyväksyä se, että kulmat eivät ole pyöristettyjä tai ne pyöristetään selainkohtaisella CSS-koodilla.

        ("Semanttista Webiä" ei kannata tähän sotkea. Se on vain Tim Berners-Leen ja kumppanien iskusana ja haave.)

        mihin niitä yhdeksää diviä tarvitaan?

        luonnollisesti halutun boksin ulkonäöstä ja sisällöstä riippuen, voi hyvinkin riittää yksi div ja yksi otsikko -elementti..

      • foxytin
        Yucca kirjoitti:

        Jos yrität oikeasti tehdä noin, huomaat tarvitsevasi kuitenkin yhdeksää div-elementtiä. Sitten sinulla on todellisuudessa 3×3-taulukko silputtuna erillisiksi diveiksi, ja kokonaisuus on sekavampi, vaikeammin hallittavissa ja enemmän koodia vaativa. Eikä diveissä ole mitään semanttista - div on määritelmän mukaan semanttisesti tyhjä lohkoelementti.

        _Looginen_ merkkaus ei tietenkään käyttäisi tässä tapauksessa sen enempää taulukkoa kuin divejäkään vaan elementtiä, joka kuvaa datan sisältöä. Mutta jos sellaisesta haluaa pitää kiinni, pitää hyväksyä se, että kulmat eivät ole pyöristettyjä tai ne pyöristetään selainkohtaisella CSS-koodilla.

        ("Semanttista Webiä" ei kannata tähän sotkea. Se on vain Tim Berners-Leen ja kumppanien iskusana ja haave.)

        Miksi tarvitsisin yhdeksää div-elementtiä?
        http://www.zoorweb.net/foxytin/pyorea_div/

        Kome diviä, joista keskinmäiseen sisältö. Elementti myös venyy sisällön mukaan.

        Vastaavasti miksi tarvitsisi yhdeksän-soluisen taulukon, kun kolmella solullakin pärjää?

        Tarkoitin "semanttisesti oikealla" sitä, että käyttämällä taulukko-taittoa tälläiseen asiaan ei ole millään tavalla semanttisesti oikeata.

        Totta, elementti tulisi pyöristää CSS:llä, tai jättää kokonaan pyöristämättä.

        Vaikka semanttinen web olisi Timin ja kumppaneitten haave, niin haave on mahdollista saavuttaa. Mutta sitä ei saavuteta toimimalla vastoin aatteen periaatteita.

      • Yucca
        foxytin kirjoitti:

        Miksi tehdä taulukolla, kun voisi käyttää esimerkiksi div-elementtejä, joka olisi vieläpä semanttisesti oikein. Taulukoita kun tosiaan tulee käyttää vain taulukkomuotoisen datan esittämiseen.

        Kolme div-elementtiä. Kuva, joka jaetaan kolmeen osaan (ylakuva, keskikuva ja alakuva). Keskimmäisen kuvan, eli "sisältö" alueen kuvan ei tarvitse olla kuin 1px korkea. Ensimmäiseen diviin yläkuva taustakuvaksi, toiseen diviin keskimmäinen kuva ja kolmanteen diviin alakuva.

        Tietenkin jos kuvat ovat valtavan kokoisia, niin taulukko voisi olla viisaanpi, kun voidaan käyttää taustakuvan toistettavuutta ja selvitään muutamalla 1px korkuisella/levyisellä kuvalla ja muutamalla isommalla (reunat) kuvalla. Mutta silloin heitetään "semanttinen web" käsitys roskiin, joka ei ole hyväksi.

        Tuohan ei lainkaan mukaudu tekstin määrään ja kokoon. Jos tuolle tielle lähdetään, niin silloinhan selvitään yhdellä kuvalla, jonka päälle teksti sijoitetaan (asemoinnilla tai taustakuvana käyttämällä). Tai vaikka kirjoitetaan teksti suoraan kuvaan kuvankäsittelyohjelmalla.

        Oikeastihan pyöristetyillä kulmilla tarkoitetaan sitä, että suorakulmaisen reunaviivan sijasta on pyöristetty reunaviiva, ja kokonaisuuden koko elää sisällön vaatimusten mukaan.

      • kertokaa hurut
        foxytin kirjoitti:

        Miksi tarvitsisin yhdeksää div-elementtiä?
        http://www.zoorweb.net/foxytin/pyorea_div/

        Kome diviä, joista keskinmäiseen sisältö. Elementti myös venyy sisällön mukaan.

        Vastaavasti miksi tarvitsisi yhdeksän-soluisen taulukon, kun kolmella solullakin pärjää?

        Tarkoitin "semanttisesti oikealla" sitä, että käyttämällä taulukko-taittoa tälläiseen asiaan ei ole millään tavalla semanttisesti oikeata.

        Totta, elementti tulisi pyöristää CSS:llä, tai jättää kokonaan pyöristämättä.

        Vaikka semanttinen web olisi Timin ja kumppaneitten haave, niin haave on mahdollista saavuttaa. Mutta sitä ei saavuteta toimimalla vastoin aatteen periaatteita.

        Entäs tämä: http://developer.apple.com/wwdc/

        Yritin tutkia tallentamalla Firefoxilla sivun kuvien kanssa levylle, mutta yllätys oli suuri kun huomasin, että esim logokuvassa kulmat olivat SUORAT, mutta selaimessa ne olivat pyöreät. ????

      • _punk_
        Yucca kirjoitti:

        Tuohan ei lainkaan mukaudu tekstin määrään ja kokoon. Jos tuolle tielle lähdetään, niin silloinhan selvitään yhdellä kuvalla, jonka päälle teksti sijoitetaan (asemoinnilla tai taustakuvana käyttämällä). Tai vaikka kirjoitetaan teksti suoraan kuvaan kuvankäsittelyohjelmalla.

        Oikeastihan pyöristetyillä kulmilla tarkoitetaan sitä, että suorakulmaisen reunaviivan sijasta on pyöristetty reunaviiva, ja kokonaisuuden koko elää sisällön vaatimusten mukaan.

        totta tuokin, ei siinä mitn..

        kysymys oli sen verran epämääräinen alunperinkin, että vastauksia oli useampia.. leveyden venymisessä ei parilla divillä kyllä pärjätä.

      • _punk_
        kertokaa hurut kirjoitti:

        Entäs tämä: http://developer.apple.com/wwdc/

        Yritin tutkia tallentamalla Firefoxilla sivun kuvien kanssa levylle, mutta yllätys oli suuri kun huomasin, että esim logokuvassa kulmat olivat SUORAT, mutta selaimessa ne olivat pyöreät. ????

        http://developer.apple.com/main/images/main_bgtop.png

        kuvan päällä on erillinen kuva mikä tekee reunat. näin ei tarvitse jokaista kuvaa pyöristää erikseen vaan päälle laitettu kuva hoitaa homman.

      • hmm...
        _punk_ kirjoitti:

        http://developer.apple.com/main/images/main_bgtop.png

        kuvan päällä on erillinen kuva mikä tekee reunat. näin ei tarvitse jokaista kuvaa pyöristää erikseen vaan päälle laitettu kuva hoitaa homman.

        Toimiiko tuo IE:lla? Muistaakseni IE ei osaa näyttää läpinäkyvät PNG kuvat.

      • Höpö.
        hmm... kirjoitti:

        Toimiiko tuo IE:lla? Muistaakseni IE ei osaa näyttää läpinäkyvät PNG kuvat.

        Kai sää nyt ite osaat kattoa toimiiko vai ei. Kyllä näyttäs toimivan.

        »Muistaakseni IE ei osaa näyttää läpinäkyvät PNG kuvat.»

        Muistaakseni IE osaa näyttää läpinäkyvät png-8 kuvat mutta ei png-24 kuvia.
        Niin no png-8 on 256 värinen joten liekö ero kovin iso verrattuna giffiin..

      • hmm...
        Höpö. kirjoitti:

        Kai sää nyt ite osaat kattoa toimiiko vai ei. Kyllä näyttäs toimivan.

        »Muistaakseni IE ei osaa näyttää läpinäkyvät PNG kuvat.»

        Muistaakseni IE osaa näyttää läpinäkyvät png-8 kuvat mutta ei png-24 kuvia.
        Niin no png-8 on 256 värinen joten liekö ero kovin iso verrattuna giffiin..

        Etten voi katsoa, kun tästä kodista ei löydy Windowsia.

      • Höpö.
        hmm... kirjoitti:

        Etten voi katsoa, kun tästä kodista ei löydy Windowsia.

        Kylä mun mielestä sellanen pitää olla jos kotisivuja meinaa tehdä. Pitää niitä testatakin.

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

    Takaisin ylös

    Luetuimmat keskustelut

    1. Medvedev: Suomi tuhoutuu ydinsodassa ensimmäisenä

      Venäjän ydinaseilla on lyhyin matka Suomeen, joten ydinsodassa Suomi tuhoutuu heti sodan alkuminuuteilla, muilla mailla
      Maailman menoa
      391
      1133

    2. Rakastan sinua

      Anteeksi että epäilin sinua.. ❤️
      Ikävä
      64
      1086

    3. Mitähän meinaat

      Vai meinaatko mitään kohtaamisen suhteen?
      Ikävä
      61
      842

    4. Oletko hyljännyt minut mies?

      Toivottavasti et. 🥺🥺🥺🥺🥺
      Ikävä
      58
      764

    5. Onko se loukkaavaa

      Kun joka kerta tuijotan sun peppua. En mahda sille mitään, että se vangitsee katseeni. Pohdin vain että ei minusta ole k
      Ikävä
      99
      688

    6. Hotellille löytyi ostaja....

      Tämän päivän Kainuun Sanomissa oli uutinen, että pesänhoitajan mukaan Hotelli Kainuu myydään ensiviikolla. Hieno homma,
      Kuhmo
      15
      660

    7. Onko kaivattusi seinäruusu?

      Kun hän saapuu paikalle, huomaako kukaan, vai kääntyvätkö päät? Onko se hyvä vai huono juttu? Oletko sinä huomattu vai
      Ikävä
      49
      651

    8. Jippii ! Zoon konkurssia tutkitaan .

      Vihdoinkin jotakin tietoa.
      Ähtäri
      26
      643

    9. Sinä. Just sinä.

      Palataan ajassa taaksepäin vuosi tai kaksi. Mitä tekisit toisin jos voisit?
      Ikävä
      68
      640

    10. Tiedätkö kaivattusi musiikkimaun?

      Minkälaisesta musiikista hän pitää?
      Ikävä
      58
      613
    Aihe
    TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt