Klausimas karpytojams dėl apvalių kampukų

Kai elementas fiksuoto dydžio, tai viskas paprasta ir aišku - pakišam po juo nupieštą užapvalintą figurą ir ramu, o ką darote, kai, tarkime, norit užapvalint kampus kokiam elementui, kurios plotis arba aukštis arba abu - nežinomi? Mane domina, kaip tai atrodo tvarkingam CSS/HTML'e, nes so far aš galvoju jog paprasčiausia, bet gan netvarkinga, išeitis yra įdėt keturis absolute elementukus-kampukus į tėvinio elemento, kurį apvalinu vidų.

Bet galbūt yra dar paprastesnis ir dar tvarkingesnis sprendimas?

Kol lauksiu atsakymų - googlinsiuos, taigi "this is the race!" :unsure:

Aš kai kodinau savo puslapį ir man reikėjo sukodint šešėlį, tai dariau kaip tu parašei, taip man patarė gana patyręs žmogus, todėl vargu ar tvarkingesnį būdą rasi. :unsure:

Aš kai kodinau savo puslapį ir man reikėjo sukodint šešėlį, tai dariau kaip tu parašei, taip man patarė gana patyręs žmogus, todėl vargu ar tvarkingesnį būdą rasi. :unsure:

Tobulumui ribų nėra, bet, ko gero, nelabai čia ką ištobulint pavyks ;)

Nors už keturis kampukus daug geriau būtų šitas būdas: http://www.alistapart.com/articles/slidingdoors/

Šiaip Google rounded corners labai daug visokių būdų.

Yra pvz. su Javascriptu kažkoks būdas (visas kodas valid). Po to yra, kur image'us sugeneruoja netgi saitai.

Šiaip tai man pačiam irgi būtų įdomu, nes niekaip nepadarau tokios struktūros su valid div'ais:

[divas1] [divas2]

kur būtų rounded kampai, neapibrėžtas ilgis, valid ir normaliai veiktų

Šiaip tai man pačiam irgi būtų įdomu, nes niekaip nepadarau tokios struktūros su valid div'ais:

 

[divas1] [divas2]

 

kur būtų rounded kampai, neapibrėžtas ilgis, valid ir normaliai veiktų

Nūūū kodėl?

[apvalainas divas]

[absolute left top]

[absolute right top]

content

[absolute left bottom]

[absolute right bottom]

[/div]

Turėtųt būt validu :unsure: nors aš čia painiai pavariau ;)

Oops, ne taip pasakiau.

[ [div3] ] [ ]

[ ] [[div2]]

[ [div4] ] [ ]

[ ] ....

[ [div5] ]

[ ]

[ [div6] ]

[ ]

Ir dar jų spalvos turėtų skirtis.

Labai nepatogu būtų dėti kiekvienam divui atskirai atributus dėt. Būtų geriausia div class="rounded" ir užapvalina.

Anyway, bandžiau visokiais būdais, bet kad būtų negremėzdiška ir kuriam nors browsery kas nors neišsikraipytų nebūna...

EDIT: Nieko nebesimato poste. Whatever.

Jai turim aisku ploti arba auksti, 3 divai eilutem arba stulpeliais. Jai nera nieko aiskaus 5 divai, uzapvalinimai i kampus ir textas vidury. Dazniausiai buna pirma varijantas.

picu - pataikyk skype arba msn kai as online ir neuzsiemes ir padarysiu tau kad rodytu visos narsykles vienodai :unsure:

Kiek man teko ieškoti, supratau, kad tokio universalaus ir "taisyklingo" ("Visi darykit būtent taip, kiti būdai sux") būdo pasidaryti suapvalintus divus lyg ir nėra. Vakar gaminausi css'ą komentarams - žinomi tik min-width, min-height, o jau nuo to ką prirašys, turi išsiplėsti. Kadangi kampukai, kuriuos naudoju, yra nedideli, pasirinkau tokį variantą:

Viršuje - Div'as su nustatytu 100% width, background'o dešinėje pusėje paveiksliukas su kampuku. Viduje div'o į kairę pusę nustumtas kitas div'as su kitu kampuku.

Viduryje - div'as (irgi 100%) pranešimo turiniui.

Apačioje - tas pats, kas viršuje, tik kiti kampų paveiksliukai.

Aišku šie div'ai yra pataplinti didesniame div'e (body), pagal kurį automatiškai keičiasi jo viduje esančių div'ų plotis. Jei pasikeičia nors vieno iš komentarų width, automatiškai pasikeičia ir body, ir jame esančių div'ų plotis. Jei nereikia, kad visų div'ų plotis keistus, galimą apsieiti be to 100% width.

Kiek browserių bandžiau, visi atvaizduoja vienodai (tiesa, IE reikalavo nedidelio hack'o, kad veiktų min-width parametras).

Kol kas geresnio būdo šiam variantui nesugalvojau. Jei kas turi geresnę idėja, būtų įdomu išgirsti :unsure: