Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Tabele sa zaobljenim ivicama(css atributi)!

[es] :: Web dizajn i CSS :: Tabele sa zaobljenim ivicama(css atributi)!

[ Pregleda: 3067 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

akibono
beograd

Član broj: 79053
Poruke: 195
77.243.16.*



+3 Profil

icon Tabele sa zaobljenim ivicama(css atributi)!20.12.2011. u 16:26 - pre 149 meseci
Zanima me kako se pise kod u html-u kada treba uraditi zaobljene ivice, recimo na tabeli, zanima me kako se ovo radi iz koda, dakle da se napise preko sintakse sa tabelama(td i tr) i da li je zapravo to moguce. Posto sam nesto isprobavao sam transparencijama i mapom al to nije to, evo ovde sam postavio tri primera da se vidi o cemu se radi. Kako se pise kod i css za navedeni problem, zaobljene ivice na tabeli? Hvala


Prikačeni fajlovi
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!20.12.2011. u 16:57 - pre 149 meseci
Likovi sa StackOverflow-a kažu ovako nešto..

Citat:
You can only apply border-radius to td, not tr or table. I've gotten around this for rounded corner tables by using these styles:

css border radius on tr

Code:


table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-left-radius: 10px; }
tr:last-child td:first-child { border-top-left-radius: 10px; }
tr:last-child td:last-child { border-top-left-radius: 10px; }



Ja još uvek nisam probao da se majem sa tabelama i zaobljenim ivicama.
Kako gore piše da se border-radius pravilo može primeniti samo na td elemente, onda ispada da je najbolje i najlogičnije da se oslanjaš na border-collapse:collapse i slike koje imitiraju zaobljene ivice.
about:networking
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!20.12.2011. u 20:15 - pre 149 meseci
ne bih preporucio da se koriste slike za zaobljene ivice, podrska za border-radius je sasvim dovoljna (od trenutnih major browsera jedino IE8 ne podrzava border-radius, inace ja IE6 i IE7 odavno vise ne racunam u major browsere..) da moze da se koristi u danasnje vreme..

evo recimo primer tabele na kojoj sam koristio border-radius da dobijem zaobljene ivice (svuda osim u IE <= 8): http://krcko.net/work/xem/account-types.html (tabela ispod "XEMarkets Account Types" naslova)


 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!20.12.2011. u 21:11 - pre 149 meseci
Ah.. da se ja pitam ... zašto koristiti tabele ( i internet explorer) uopšte?

Kako god, akibono, ovo bi moglo da bude jako korisno za tebe.
Edit this Fiddle

Taj je link inače od iste osobe koju sam citirao u prethodnoj poruci.
about:networking
 
Odgovor na temu

Aleksandar Ružičić
Software Architect, Appricot d.o.o.
Beograd

Član broj: 26939
Poruke: 2881

Jabber: krckoorascic@gmail.com
Sajt: krcko.net


+44 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!21.12.2011. u 01:08 - pre 149 meseci
Citat:
plus_minus: Ah.. da se ja pitam ... zašto koristiti tabele ( i internet explorer) uopšte? :p


tabele treba koristiti za ono cemu i sluze - za prikaz tabelarnih podataka.
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!21.12.2011. u 01:16 - pre 149 meseci
Da. To i jeste namena tih elemenata, međutim, ne mora da bude da su samo tabele pogodne za tabelarne podatke. Jedan od valjanih razloga jeste npr. border-radius.

Ako ideš na mimiku <ul><li> ili <div><span> ili <div><div> onda stil, izgled tabele, jako, jako zanimljiviji može da bude. Maletene nisi ograničen svojstvima kojima bi raspolagao, što sa tabelama, kao što i sam vidiš, jeste slučaj ponekad.

Evo priloženog prostog primera kako lepo može izgledati ul li tabela. :)
Sa vrlo malo css-a i svega ostalog.

Naravno, nemoj da misliš da ja kojim slučajem smatram da ti ne znaš oko toga ili nisi upućen.. :D heh..

Čisto da se podsetimo ponekad, što da ne? :)



about:networking
Prikačeni fajlovi
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!21.12.2011. u 01:39 - pre 149 meseci
To što sam priložio treba da se nađe u sastavu jednog objašnjenja za jedan sistem koji pravim.
Sve što treba, ako bi recimo hteo da prikažem tabelu sa 2 ili 3 ili više različitih kolona,
jeste samo još jedna linija u foreach() delu ili više linija (zavisi od "tabele") i naravno, još par css pravila.
about:networking
 
Odgovor na temu

Insider_m
Web developer

Član broj: 290688
Poruke: 98
77.28.196.*



+7 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!29.12.2011. u 15:18 - pre 149 meseci
evo ti kod za zaobljenim ivicama:

border-radius: 5px;
-moz-border-radius: 5px; //firefox
-webkit-border-radius: 5px; //chrome, safari
-ms-border-radius: 5px; //IE
-o-border-radius: 5px; //opera


postavi go na tabelu.
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!03.01.2012. u 11:04 - pre 148 meseci
....

-o-border-radius ?
about:networking
 
Odgovor na temu

Insider_m
Web developer

Član broj: 290688
Poruke: 98
77.28.204.*



+7 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!11.01.2012. u 09:42 - pre 148 meseci
-o-border-radius je za Operu.

Sve ove linije se iste, ali za razlicni browseri
 
Odgovor na temu

kelja

Član broj: 70429
Poruke: 1416
*.dynamic.isp.telekom.rs.



+35 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!11.01.2012. u 10:31 - pre 148 meseci
Jedno javascript resenje za sve browsere, pa i omrazeni IE:

http://www.curvycorners.net/
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Tabele sa zaobljenim ivicama(css atributi)!16.01.2012. u 16:44 - pre 148 meseci
Citat:
Insider_m: -o-border-radius je za Operu.

Sve ove linije se iste, ali za razlicni browseri


A zašta ti je -ms-border-radius? .. za IE .. ?

Momčino, znam koji prefix za šta ide,
poenta je u tome da ti nisi shvatio moje prvo pitanje, to jest čuđenje..

Kada hoćeš da daš border-radius koristiš samo -webkit i -moz (za starije verzije ff-a) pored glavnog pravila.

-ms- i -o- za border-radius - ne postoji.
Možeš i to da stavljaš, ali nema svrhe.

IE9, Opera i ff (preko verzije 4) koriste čisto - border-radius.

Ako misliš da je -o- potrebno za starije verzije opere, varaš se...
Opera tada nije imala tu opciju za zaobljene ivice, kao ni IE a ni ostali.. tada.

Inače, prefix -o- se koristi npr. za:

-o-transform:rotate(-10deg);
kada hoćeš da rotiraš tekst..

-o-transition:background 1s;
kada se igraš sa css animacijama umesto javaskripte

onda imaš
background-image:-o-linear-gradient(left, #fff, #ccc);

kada hoćeš css gradient kao background, a ne gradient sliku...

i tako dalje, i tako dalje....

Dakle, za osnovna najupotrebljavanija css3 pravila,
border-radius i box-shadow... prefix -o- kao i prefix -ms- ..
.. to sam prvi put pročitao od tebe.. na ovoj temi.








[Ovu poruku je menjao plus_minus dana 16.01.2012. u 17:55 GMT+1]
about:networking
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Tabele sa zaobljenim ivicama(css atributi)!

[ Pregleda: 3067 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.