Moro! Miten voisin pyöristää laatikon kulmat siten, että laatikon sisällä on vielä kaksi tai enemmän (riippuu tietokannasta saadusta tuloksesta) laatikkoa. Onglemana on se, että nämä kaksi laatikkoa eivät ole pyöristettyjä, joten parent ei voi tehdä pyöristettyjä kulmia. Enkä voi laittaa vain
border-radius: 2px;
koska, pyöristetyt kulmat pitäisi olla vaan parentin kulmissa. Nykyinen:
|------------------| | 1.BOX | 2.BOX | |------------------|
Tältä sen pitäisi näyttää:
/-----------------\ | 1.BOX | 2.BOX | \-----------------/
Kuten sanoin, border-radiusta ei sisemmille laatikoille voi jokaiselle kulmalle laitaa, eikä pikseleitä esim. 2px 0px 0px 2px, koska elementit voi olla toisessa järjestyksessä.
joah kirjoitti:
Onglemana on se, että nämä kaksi laatikkoa eivät ole pyöristettyjä, joten parent ei voi tehdä pyöristettyjä kulmia.
En ymmärrä virkettäsi. Minulla ainakin toimii ihan hyvin sellainen, että laatikolla on pyöristetyt kulmat ja sisällä on lisää laatikoita.
Jos nyt kuitenkin olet tuosta ihan vakuuttunut etkä suostu edes yrittämään, voit sen sijaan käyttää CSS:n pseudoluokkia :first-child ja :last-child, jos laatikoita on vain yhdellä rivillä tai yhdessä sarakkeessa.
Voisiko tyylin luoda lennossa tulostuvaiheessa?
Tosin tällöin joutuisi käyttämään seuraavankaltaista tapaa:
<div style="tyylit tähän"></div>
Vasemamlle tulostuviin boxeihin asetettaisiin pyöristys vasempaan ylä ja alakulmaan kun taas oikealle tulostuviin oikeaan ylä ja alakulmaan. Jos nyt olin oikein tajunnut sen, mihin kohtaan pyöristykset tulisi asettua.
Metabolix kirjoitti:
joah kirjoitti:
Onglemana on se, että nämä kaksi laatikkoa eivät ole pyöristettyjä, joten parent ei voi tehdä pyöristettyjä kulmia.
En ymmärrä virkettäsi. Minulla ainakin toimii ihan hyvin sellainen, että laatikolla on pyöristetyt kulmat ja sisällä on lisää laatikoita.
Kyllä, mutta silloin (ainakaan minulla) ei ainakaan alemman parentin pyöristykset näy. Nuo kaksi laatikkoa menevät pyöristyksien päälle, joten pyöristys ei näy... Ja korkeus on siis sama kuin parentin kansssa.
Lisäys:
pistemies kirjoitti:
Voisiko tyylin luoda lennossa tulostuvaiheessa?
Tosin tällöin joutuisi käyttämään seuraavankaltaista tapaa:<div style="tyylit tähän"></div>Vasemamlle tulostuviin boxeihin asetettaisiin pyöristys vasempaan ylä ja alakulmaan kun taas oikealle tulostuviin oikeaan ylä ja alakulmaan. Jos nyt olin oikein tajunnut sen, mihin kohtaan pyöristykset tulisi asettua.
Tätä juuri yritin sanoa, että nounou, koska olisi monenmonta vaihtoehtoa. Esimerkissä kuvaan vain kahdella laatikolla, mutta laatikkoja voisi olla vaikka kuusi.
Ymmärsinkö oikein että nuo laatikot ovat vierekkäin ja vain laitimmasiin tarvitaan tuo pyöristys?
Kun tulostat sivulle, voit silmukassa tarkistaa, mikä on eka- ja mikä viimeinen "löytö". Voit ekalle asetaa oman class-tyylinsä ja viimeiselle omansa.
Siis pitäisikö uloimmalla laatikolla olla "paddingiä", jotta sisemmät laatikot eivät menisi pyöristysten päälle?
Miten olisi parentille ”overflow: hidden” tai Lebe80:n ehdottama padding?
pistemies kirjoitti:
Kun tulostat sivulle, voit silmukassa tarkistaa, mikä on eka- ja mikä viimeinen "löytö". Voit ekalle asetaa oman class-tyylinsä ja viimeiselle omansa.
Mikä ihmeen vimma nyt on heittää noita purkkaratkaisuja? Jo ties kuinka vanhat selaimet tukevat pseudoluokkia :first-child ja :last-child.
Metabolix kirjoitti:
Jo ties kuinka vanhat selaimet tukevat pseudoluokkia :first-child ja :last-child.
Tuki tosin monella on mutta ei IE6:lla
pistemies kirjoitti:
Metabolix kirjoitti:
Jo ties kuinka vanhat selaimet tukevat pseudoluokkia :first-child ja :last-child.
Tuki tosin monella on mutta ei IE6:lla
Mitähän järkeä on kikkailla IE6:lle last-child-purkkaa, jos se ei kuitenkaan ymmärrä varsinaista border-radius-tyyliä, tai ylipäänsä muutenkaan nykyään? Jos pitää välttämättä saada IE6:lle tuki uudemmille tyyleille, kannattaa vain käyttää jotain valmista JS-kirjastoa, joka emuloi ominaisuuksia ilman lisätyötä. Pääsääntöisesti IE6 on kuitenkin historiaa ja pitäisi suosiolla kuopata tällaisissa asioissa.
Lebe80 kirjoitti:
Siis pitäisikö uloimmalla laatikolla olla "paddingiä", jotta sisemmät laatikot eivät menisi pyöristysten päälle?
Ei paddingiä, vaan pitäisi reunojen olla päällekkäin.
Metabolix kirjoitti:
Miten olisi parentille ”overflow: hidden”...
Ei toiminut...eikun toimihan se! Kiitos ja kumarrus!
Kunhan näytän toisenlaisen tavan tehdä asian:
<div class="pyoristetty"> <div>Möö!</div> <div>Mää!</div> <div>UUU!</div> </div>
.pyoristetty {
border-radius: 9px;
}
.pyoristetty > * {
padding: 5px;
}
.pyoristetty > :first-child {
background: blue;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
color: white;
}
.pyoristetty > :last-child {
background: red;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: white;
}Overflow: hidden; voi joissain tapauksissa olla haitaksi, esimerkiksi jos tahdot jonkin elementin venyvän isännöivän elementin ulkopuolelle.
Metabolix kirjoitti:
Mitähän järkeä on kikkailla IE6:lle last-child-purkkaa, jos se ei kuitenkaan ymmärrä varsinaista border-radius-tyyliä, tai ylipäänsä muutenkaan nykyään?
Mites IE7 ja IE8? Eihän nekään ole ymmärtäneet border-radiusta, vai...?
pistemies kirjoitti:
Mites IE7 ja IE8? Eihän nekään ole ymmärtäneet border-radiusta, vai...?
Eivät, mutta jos se on ongelma, niin esimerkiksi CSS3PIE-pakkeli auttaa.
Lisäys:
joah kirjoitti:
Moro! Miten voisin pyöristää laatikon kulmat siten, että laatikon sisällä on vielä kaksi tai enemmän (riippuu tietokannasta saadusta tuloksesta) laatikkoa. Onglemana on se, että nämä kaksi laatikkoa eivät ole pyöristettyjä, joten parent ei voi tehdä pyöristettyjä kulmia.
Siis kuinka? HTML-koodi (tiivistetty esimerkki) auttaisi enemmän kuin tuhat sanaa. Siitä näkisi, mitä sivulla oikeasti on. Ascii-kuviesi perusteella näyttää siltä, että sinulla on pikemminkin samankorkuisia laatikoita vierekkäin kuin laatikoita sisäkkäin. Toki ne vierekkäiset lodjut saattavat olla jonkin elementin sisällä, mutta sillä ei välttämättä ole merkitystä (muuten kuin sen kannalta, miten niihin voi sujuvimmin viitata CSS:llä).
Ja miksi ”parent ei voi tehdä pyöristettyjä kulmia”? Jos asetat parentille reunaviivan ja siihen pyöreät nurkat, niin sitten voit asettaa laatikoille vain pystysuorat reunaviivat (ja niistäkin pari pois).
Nuo selectorit tulee ainakin käyttöön mm. eCSStenderin kautta. Extensioita onkin nykyisin runsaasti jo saatavilla IE tuen parantamiseksi, tsekkaa:
groovyb kirjoitti:
Nuo selectorit tulee ainakin käyttöön mm. eCSStenderin kautta. Extensioita onkin nykyisin runsaasti jo saatavilla IE tuen parantamiseksi, tsekkaa:
Tuo oli hyvä linkki. Laitoin sen talteen.
Olisi hyvä pysähtyä ajattelemaan ja kysyä itseltään, että miksi haluaisi tukea mitään IE:tä ysistä alaspäin. Jos on tekemässä palvelua, jonka pitäisi toimia julkisen sektorin työntekijöiden työkoneilla, niin silloin on vielä perusteltua tukea IE8:a. Muissa tapauksissa on ihan turha miettiä moisia asioita.
The Alchemist kirjoitti:
Olisi hyvä pysähtyä ajattelemaan ja kysyä itseltään, että miksi haluaisi tukea mitään IE:tä ysistä alaspäin. Jos on tekemässä palvelua, jonka pitäisi toimia julkisen sektorin työntekijöiden työkoneilla, niin silloin on vielä perusteltua tukea IE8:a. Muissa tapauksissa on ihan turha miettiä moisia asioita.
Voihan tässä hiukan antaa tilastoja. Minun sivustoni syyskuun IE-käynnit:
Versio IE 5.0 - IE 8.0: 73.5 % kaikista IE-selaimilla käynneistä.
Versio IE 7.0: 60.3 % kaikista IE-selaimilla käynneistä.
Tosin tähän voi olla syynä se, että vain noin 30 % sivullani kävijöistä tulee Suomesta, n. 70 % ulkomailta.
pistemies kirjoitti:
The Alchemist kirjoitti:
Olisi hyvä pysähtyä ajattelemaan ja kysyä itseltään, että miksi haluaisi tukea mitään IE:tä ysistä alaspäin. Jos on tekemässä palvelua, jonka pitäisi toimia julkisen sektorin työntekijöiden työkoneilla, niin silloin on vielä perusteltua tukea IE8:a. Muissa tapauksissa on ihan turha miettiä moisia asioita.
Voihan tässä hiukan antaa tilastoja. Minun sivustoni syyskuun IE-käynnit:
Versio IE 5.0 - IE 8.0: 73.5 % kaikista IE-selaimilla käynneistä.
Versio IE 7.0: 60.3 % kaikista IE-selaimilla käynneistä.Tosin tähän voi olla syynä se, että vain noin 30 % sivullani kävijöistä tulee Suomesta, n. 70 % ulkomailta.
Ja se että niille ei näytetä pyöreitä kulmia haittaa?
qeijo kirjoitti:
Ja se että niille ei näytetä pyöreitä kulmia haittaa?
No ei se minua haittaa. En tiä, haittaako muita.
Voihan niillä näyttää pyöreitä kulmia. Onhan noita laajennoksia kuten yllä on monesti sanottu. Kokonaisvaltaista html5 tukea saadaan varmaan vielä odottaa (Missä canvakset ja muut on wräpätty joksikin javascriptin päällä toimivaksi härpäkkeeksi), mutta suurimman osan css3:sen ominaisuuksista saa IE6:seen asti.
pistemies kirjoitti:
The Alchemist kirjoitti:
Olisi hyvä pysähtyä ajattelemaan ja kysyä itseltään, että miksi haluaisi tukea mitään IE:tä ysistä alaspäin. Jos on tekemässä palvelua, jonka pitäisi toimia julkisen sektorin työntekijöiden työkoneilla, niin silloin on vielä perusteltua tukea IE8:a. Muissa tapauksissa on ihan turha miettiä moisia asioita.
Voihan tässä hiukan antaa tilastoja. Minun sivustoni syyskuun IE-käynnit:
Versio IE 5.0 - IE 8.0: 73.5 % kaikista IE-selaimilla käynneistä.
Versio IE 7.0: 60.3 % kaikista IE-selaimilla käynneistä.Tosin tähän voi olla syynä se, että vain noin 30 % sivullani kävijöistä tulee Suomesta, n. 70 % ulkomailta.
Eipä nuo IE-luvut vielä yksinään mitään merkkaa. Olkoot vaikka 100,0 % kaikista IE:n käyttäjistä seiskaversion varassa, niin jos yhteensä selaimen käyttäjämäärät jäävät muutamiin prosentteihin, niin jättäisin tukematta.
IE 8:ia pitää mielestäni tukea, koska Windows XP:seen ei ysiä saa asennettua. Se kun sattuu olemaan vielä aika yleinen käyttis.
pistemies kirjoitti:
Metabolix kirjoitti:
Mitähän järkeä on kikkailla IE6:lle last-child-purkkaa, jos se ei kuitenkaan ymmärrä varsinaista border-radius-tyyliä, tai ylipäänsä muutenkaan nykyään?
Mites IE7 ja IE8? Eihän nekään ole ymmärtäneet border-radiusta, vai...?
Kysyin, miksi sinusta IE6:lle kannattaisi laittaa omatekoinen last-child-luokka. Vastasit, että IE7 ei tue border-radiusta. En ymmärrä.
Yritetään uudestaan. Miksi sinusta IE6:lle kannattaisi laittaa omatekoinen last-child-luokka?
The Alchemist kirjoitti:
Eipä nuo IE-luvut vielä yksinään mitään merkkaa. Olkoot vaikka 100,0 % kaikista IE:n käyttäjistä seiskaversion varassa, niin jos yhteensä selaimen käyttäjämäärät jäävät muutamiin prosentteihin, niin jättäisin tukematta.
Kovimpa sinä haluat elää modernia aikaa :)
No minulla nuo IE seiskalla kävijöitä on keskim. 5-7 % kaikista kävijöistä. Tosin syyskuussa niitä oli 15 %, tavallista enemmän. Vaikka se prosenteissa näyttää vähältä, niin kävijämäärissä se on kuitenkin ihan kohtalainen luku, ei muutama sekalainen kävijä.
Ihmettelen, miksi pitäis jättää täysin tukematta, kun noita apu-laajennuksiakin on sitä varten tehty.
pistemies kirjoitti:
Ihmettelen, miksi pitäis jättää täysin tukematta, kun noita apu-laajennuksiakin on sitä varten tehty.
No jos noiden apulaajennusten ylläpidosta ei tule yhtäkkiä se isoin työmäärä koko sivustolla, niin miksei.
Itse esim. olen eräässä niin perseelleen speksatussa sivustoprojektissa mukana, jossa juuri haluttiin käyttää uusimpien selainten tukemia efektejä, ja joita ei sitten oikeiden käyttäjien selaimet tukeneetkaan. Soppa oli valmis, kun suurimman osan ajasta debuggasin vanhoilla selaimilla näitä efektejä, jotka eivät toimineetkaan esim. animoituina, eivätkä tukeneet "hover"-tyylejä ja jumittivat pitempiä sivuja.
Sain kyllä hienosti puhuttua ulkoasusta vastaavan kanssa, että kaikki pyöristykset lähtivät hittoon vanhemmilta selaimilta.
Lebe80 kirjoitti:
Sain kyllä hienosti puhuttua ulkoasusta vastaavan kanssa, että kaikki pyöristykset lähtivät hittoon vanhemmilta selaimilta.
No hyvä että sait ympäripuhuttua :)
En ole itse vielä kokeillut, miten käyttökelpoisia tai isotöisiä nuo mainostetut laajennokset ovat joten olen jäävi niiden erinomaisuudesta puhumaan.
Ihan turhaa asennella jotain border-radius-plugareita vanhoille IE:ille, kun yhteensopivuudessa tulee todennäköisesti olemaan paljon kriittisempiäkin ongelmia. Pyöristettyjen reunojen ynnä muun puuterin puute ei edes ole mikään ongelma, koska se harvoin heikentää käytettävyyttä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.