Prava nadloga v oblikovanju div blokov so zaokroženi robovi. Vsak brskalnik zahteva svoje nastavitve. Denimo, da želim izrisati preprost div blok razreda div-blok z robom radija 4px. Da bi nalogo rešil s pripravljenimi fancy css rešitvami, lahko nad blokom uporabim
.div-blok{
border: 1 px solid black /* Izrišem črn rob okoli bloka div */
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Safari in Google Chrome */
border-radius: 4px; /* Opera 10.5+, bodoči brskalniki, in tudi Internet Explorer 6+, ki uporablja IE-CSS3 */
}Designing css borders can be a real nuisance. Each web browser requires its own settings. Suppose you want to plot a simple div block with class -block and an edge radius of 4px. In order to solve the task a fancy CSS developed solutions can be used:
.div-block{
border: 1 px solid black /* Black corner surronding a div block */
-moz-border-radius: 4px; /* Firefox */
-webkit-border-radius: 4px; /* Safari in Google Chrome */
border-radius: 4px; /* Opera 10.5+, future browsers, Internet Explorer 6+ that uses IE-CSS3 */
}Takoj naletim na problem IE brskalnikov, ki uporabljajo CSS2. Zaokroženi robovi odpadejo. Na strani http://fetchak.com/ie-css3/ sicer najdemo lepo rešitev, ki pa zna biti v več gnezdenih div blokih težavna. Na strani, kjer uporabim zaokrožen div blok, namreč najpogosteje uporabim več zaokroženih elementov (gumbi, menu, bloki za naslov, telo članka, stranski menu, komentarji, noga,… ). Stvar postane tečna, tudi z-indeksi morajo biti usklajeni in se hitro tepejo s kakšnimi vtičniki za prikaz galerij, ipd.
Rešitev je seveda na dlani – div bloki, ki uporabijo za robove slike. Toda: to lahko preide v pretirano zapravljanje časa. Naknadno prilagojevanje barv še posebej, ko je treba uskaditi vse elemente na strani in je vsak izmed njih sestavljen iz več slik.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Funkcionalen div blok z robovi brez slik <div id="div-blok"><strong class="div-blok-zgoraj"> </strong> <div class="div-blok-vsebina"> <h2>Zaokroženi robovi div bloka</h2> Pred vami je css div blok z zaokroženimi robovi brez uporabe slik, funkcionalen v vseh brskalnikih. </div> <strong class="div-blok-spodaj"> </strong> </div>
A new problem is recognised. IE browser using CSS2 does not support that kind of solution. On the page http://fetchak.com/ie-css3/ we can find another nice solution, howewer it can become difficult to implement it on the page using several nested div blocks. On the page where I use the rounded div block, frequently I don’t use just one of them, If you use several rounded div elements for buttons, menues, blocks for the title, article body, side menu, comments, footer, things becomes complicated. CSS z-indexes have to be set for elements. Consequenlty a new problem appears – different browsers requires different settings for z-indexes. What is more, consistency with some plug-ins (like galleries) has to be checked.
To avoid that kind of complications the solution is of course obvious – use images to make div borders. But: that can bring us to the excessive waste of time. Subsequently readaptation of colors, reshaping, changing sizes, especially dealing with many elements that consists of several images, can become a real nightmare. I would use this kind of solution for the site from which design won’t change in the future.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Functional div block with borders without using images <div id="div-block"><strong class="div-block-top"> </strong> <div class="div-block-content"> <h2>Rounded div blocks</h2> There is a css div block with rounded borders designed without using images, functional in all web browsers. </div> <strong class="div-block-bottom"> </strong> </div>