Colturi rotunjite in Internet Explorer
Pentru a crea colturi si margini rotunjite in Mozilla Firefox, Opera, Google Chrome si Safari, puteti folosi proprietati CSS:
Selector {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}
Problema este cu Internet Explorer (IE6, IE7, IE 8), aceasta nu recunoaste proprietatile CSS pentru colt rotunjit. O solutie buna pentru a afisa colturi rotunjite in IE este de a aplica JavaScript, DD_roundies.
• DD_roundies este o biblioteca Javascript (
autor: Drew Diller), care face crearea de colturi rotunjite in HTML mai usoara, cu accent pe Internet Explorer.
- In primul rand, descarcati arhiva Javascript cu fisierul DD_roundies, de aici -> Download, extrageti fisierul "DD_roundies.js" si copiati-l pe server unde e site-ul dv.
- Includeti-l in documentul HTML, adaugand in sectiunea <head> urmatorul cod:
<script type="text/javascript" src="DD_roundies.js"></script>
- In corpul documentului HTML adaugati un alt cod de script JS, si apelati functia DD_roundies.addRule().
Iata un exemplu:
<script src="DD_roundies.js" type="text/javascript"></script>
<script type="text/javascript">
/* doar IE */
DD_roundies.addRule('.selector', '10px');
/* raze diferite, doar IE */
DD_roundies.addRule('#id_selector', '10px 4px');
/* "toate" browser-ele */
DD_roundies.addRule('.alt_selector', '8px', true);
</script>
Puteti seta o raza pentru toate colturile, sau separat pentru fiecare.
- '10px' - defineste o raza de 10px pentru toate colturile
- '8px 5px' - defineste o raza de 8px pt. colturile stanga-sus, dreapta-jos, iar 5px pentru celelalte.
- '12px 8px 5px' - 12px pt. coltul stanga-sus, 8px in coltul dreapta-sus, 5px la cel din dreapta-jos, si 8px stanga-jos.
- '12px 8px 5px 0' - 12px pt. coltul stanga-sus, 8px in coltul dreapta-sus, 5px la cel din dreapta-jos, si 0px stanga-jos
-
Examplu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Colturi rotunjite</title>
<style type="text/css"><!--
/* adauga colturi rotunjite pentrua #id si .cli, pt.: Mozilla Firefox, Opera, Google chrome */
#idd, .cli {
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
border-radius:10px;
}
/* definire si alte stiluri CSS la #id si .cli */
#idd {
width:300px;
height:100px;
border:2px solid blue;
}
.cli {
margin:2px auto;
width:250px;
background-color:#daedfe;
padding:2px;
}
--></style>
<script type="text/javascript" src="DD_roundies.js"></script>
</head>
<body>
<div id="idd">
Cursuri si tutoriale e<br />
http://www.discant.ro - Web Development.
</div>
<br />
<ul>
<li class="cli">Curs PHP MySQL</li>
<li class="cli">Cursuri HTML CSS</li>
<li class="cli">JavaScript si AJAX</li>
</ul>
<script type="text/javascript">
// seteaza colturi rotunjite pt. Internet Explorer (IE 6, 7, 8)
DD_roundies.addRule('#idd', '10px'); // pt. tag-ul cu id="idd"
DD_roundies.addRule('.cli', '10px'); // pt. elementele cu class="cli"
</script>
</body>
</html>
Acest cod va afisa:
Cursuri si tutoriale e
http://www.discant.ro - Web Development.
- Curs PHP MySQL
- Cursuri HTML CSS
- JavaScript si AJAX