Mikä on oikea tapa tehdä pyöreät kulma DIV-laatikoille?
Mikä on oikein tapa
tehdä....
13788
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Turvaa tilisi vahvistamalla puhelinnumerosi. Voit silloin palauttaa unohtuneen salasanan tekstiviestillä.
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 13
Vanhimmat
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.
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.)
mihin niitä yhdeksää diviä tarvitaan?
luonnollisesti halutun boksin ulkonäöstä ja sisällöstä riippuen, voi hyvinkin riittää yksi div ja yksi otsikko -elementti..
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.
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.
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. ????
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ä.
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.
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.
Kylä mun mielestä sellanen pitää olla jos kotisivuja meinaa tehdä. Pitää niitä testatakin.