online: 4; azi: 343; total: 50798 Webdesign - Tutoriale-js - 18

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.
  1. 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.
  2. Includeti-l in documentul HTML, adaugand in sectiunea <head> urmatorul cod:
                <script type="text/javascript" src="DD_roundies.js"></script>
  3. 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