Tema
Boje
Pismo
Registracija

Novo

Forum kao aplikacija na telefonu

Dodajte forum na početni ekran i koristite ga kao aplikaciju, sa menijem na dnu ekrana.

Kako se dodaje

Tabele sa zaobljenim ivicama(css atributi)!

Odgovori Nova tema
Štampanje RSS teme Kopiraj vezu do teme Podeli na Facebook-u Podeli na X-u (Twitter) Idi na poslednju poruku
  • 11 odgovora
  • 4.466 pregleda

Najnovija ↓

Tabele sa zaobljenim ivicama(css atributi)! 20.12.2011. u 17:26 · pre 180 meseci #1
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


tabela_ivice01.jpg24.09kivice02.jpg18.03kivice03.jpg17.66k
Re: Tabele sa zaobljenim ivicama(css atributi)! 20.12.2011. u 17:57 · pre 180 meseci #2
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.
Potpis
about:networking
Re: Tabele sa zaobljenim ivicama(css atributi)! 20.12.2011. u 21:15 · pre 180 meseci #3
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)

Potpis
rafforum.rs - Forum Računarskog Fakulteta
Re: Tabele sa zaobljenim ivicama(css atributi)! 21.12.2011. u 02:16 · pre 180 meseci #6
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? :)


Potpis
about:networking
css3_color_names.php3.33k
Re: Tabele sa zaobljenim ivicama(css atributi)! 21.12.2011. u 02:39 · pre 180 meseci #7
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.
Potpis
about:networking
Re: Tabele sa zaobljenim ivicama(css atributi)! 29.12.2011. u 16:18 · pre 180 meseci #8
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.
Re: Tabele sa zaobljenim ivicama(css atributi)! 16.01.2012. u 17:44 · pre 180 meseci
izmenjeno 1 put, poslednji put plus_minus 16.01.2012. u 17:55
Izmene poruke
  1. plus_minus16.01.2012. u 17:55zapis iz teksta poruke
#12
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 .. ? :D

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. :)
Potpis
about:networking
Odgovori
Prijavite se da biste odgovorili u ovoj temi.PrijavaRegistracija

Premeštanje teme