Kỹ Năng Web http://kynangweb.com Chào mừng bạn đến với website Kỹ Năng Web Mon, 07 Jun 2010 01:48:56 +0000 http://wordpress.org/?v=2.9 en hourly 1 Phương thuốc đặc trị về PNG trên IE6 http://kynangweb.com/2010/06/06/ph%c6%b0%c6%a1ng-thu%e1%bb%91c-d%e1%ba%b7c-tr%e1%bb%8b-v%e1%bb%81-png-tren-ie6/ http://kynangweb.com/2010/06/06/ph%c6%b0%c6%a1ng-thu%e1%bb%91c-d%e1%ba%b7c-tr%e1%bb%8b-v%e1%bb%81-png-tren-ie6/#comments Sun, 06 Jun 2010 12:32:15 +0000 admin http://kynangweb.com/?p=19 Như các bạn đã biết cái một trong cái đáng ghét của IE6 là nó không hiện thị hình png được chính xác cùng với những vấn đề khác như canh center, background-position cũng bị lỗi đã làm cho những người làm web như chúng ta đau đầu và mong muốn IE6 chết càng sớm càng tốt như buồn thay nó vẫn sống dai và chiếm một tỉ lệ cũng tương đối nhiều.

Vấn đề chúng ta buộc phải tìm cách khắc phục nó thôi. Hôm nay mình xin giới thiệu một cách có thể xử đẹp những lỗi trên. Đó chính là DD_belatedPNG

Cách sử dụng:

  • Download 1 trong 2 file sau: DD_belatedPNG_0.0.8a hoặc DD_belatedPNG_0.0.8a-min
  • Sau đó trong file HTML ta khai báo trong tag <head>…</head> đoạn code sau:
    <!–[if IE 6]>
    <script src=”DD_belatedPNG.js”></script>
    <script>
    DD_belatedPNG.fix(‘.png_bg, #container, img’);
    </script>
    <![endif]–>

    Đoạn code trên sẽ giúp ta tìm đến class tên là .png_bg , id có tên là container (dĩ nhiên là các class và id này phải có background-image là hình PNG), và các hình ảnh trên web thông qua tag <img> sẽ fix hết các hình ảnh PNG và các hình ảnh này sẽ hiện thị đúng như chúng ta mong muốn.

Đơn giản quá phải không các bạn. Hi vọng sẽ giúp được các bạn trong việc trị IE “cổ” này

]]> http://kynangweb.com/2010/06/06/ph%c6%b0%c6%a1ng-thu%e1%bb%91c-d%e1%ba%b7c-tr%e1%bb%8b-v%e1%bb%81-png-tren-ie6/feed/ 0 14 kho ảnh miễn phí không thể thiếu cho Designer ! http://kynangweb.com/2010/02/28/14-kho-%e1%ba%a3nh-mi%e1%bb%85n-phi-khong-th%e1%bb%83-thi%e1%ba%bfu-cho-designer/ http://kynangweb.com/2010/02/28/14-kho-%e1%ba%a3nh-mi%e1%bb%85n-phi-khong-th%e1%bb%83-thi%e1%ba%bfu-cho-designer/#comments Sun, 28 Feb 2010 11:54:44 +0000 admin http://kynangweb.com/?p=12 Đối với việc thiết kế web thì hình ảnh đẹp là không thể thiếu, vì thế tôi xin list ra đây một số trang web cung cấp hình ảnh để chúng ta có thể dễ dàng tìm kiếm hình ảnh phục vụ cho công việc của mình.

1. Photocase:

2. StockXchange:

3. StockVault:

4. Dreamstime

5. Open Photo

6. morgueFile

7. Every Stock Photo

8. Studio 25

9. Woophy

10. DexHaus

11. Photogen

12. About Pixels

13. FreeFoto

14. Free Photos Bank

Theo Dzine’s blog

]]> http://kynangweb.com/2010/02/28/14-kho-%e1%ba%a3nh-mi%e1%bb%85n-phi-khong-th%e1%bb%83-thi%e1%ba%bfu-cho-designer/feed/ 0 Khắc phục lỗi double-margin trên IE6 http://kynangweb.com/2010/02/28/kh%e1%ba%afc-ph%e1%bb%a5c-l%e1%bb%97i-double-margin-tren-ie6/ http://kynangweb.com/2010/02/28/kh%e1%ba%afc-ph%e1%bb%a5c-l%e1%bb%97i-double-margin-tren-ie6/#comments Sun, 28 Feb 2010 11:53:58 +0000 admin http://kynangweb.com/?p=10 Đây là lỗi khi ta khi ta khai báo margin-left cho 1 element có float:left or margin-right cho 1 element có float:right thì trên các trình duyệt như IE7, FF , Safari, Chrome thì không sao nhưng trên IE6 lại có chuyện xảy ra là margin-left (margin-right) có giá trị gấp đôi giá trị ta khai báo ban đầu

Vd:

<style type=”text/css”>
.content{
float:left;
margin-left:50px;
background:#3399FF; }</style>
<div class=”content”>Nội dung ở đây</div>

Trên IE6 ta thấy box Content này cách lề trái trình duyệt những 100px.
Khắc phục

  • Gắn thêm thuộc tính:

Ta cho thêm thuộc tính display: inline;
<style type=”text/css”>
.content{
float:left;
margin-left:50px;
background:#3399FF;
display: inline;
} </style>
  • Star hack:

Tuy nhiên có nhiều lúc ta không thể dùng thuộc tính display:inline được , khi đó ta sẽ dùng đến cách này.

.content{
float:left;
margin-left:50px;
_margin-left:25px;
background:#3399FF;
margin-right:50px;
}

Cách làm này là ta khai báo giá trị còn phân nữa để gặp IE6 thì nó gấp đôi bằng với giá trị ta mong muốn. Nhược điểm của cách này là khi muốn margin-left là số lẻ thì không được

  • Chèn thêm một div:

Ở cách này có vẻ mất công nhất đó là ta tách thuộc tính float:left ra ngoài một div , div bên trong thì gồm có các thuộc tính còn lại.

.wrapper{float:left}
.content{
margin-left:50px;
background:#3399FF;
margin-right:50px;
}

Lúc này HTML sẽ trở thành
<div class=”wrapper”>
<div class=”content”>noi dung o day</div>
</div>

]]> http://kynangweb.com/2010/02/28/kh%e1%ba%afc-ph%e1%bb%a5c-l%e1%bb%97i-double-margin-tren-ie6/feed/ 0 Cách tính thứ tự ưu tiên trong CSS http://kynangweb.com/2010/02/28/cach-tinh-th%e1%bb%a9-t%e1%bb%b1-%c6%b0u-tien-trong-css/ http://kynangweb.com/2010/02/28/cach-tinh-th%e1%bb%a9-t%e1%bb%b1-%c6%b0u-tien-trong-css/#comments Sun, 28 Feb 2010 11:43:14 +0000 admin http://kynangweb.com/?p=8 Khi ta áp dụng CSS cho một element trong file HTML thì điều đầu tiên chúng ta cần quan tâm đó là thứ tự ưu tiên của CSS vì có những lúc ta viết CSS đúng hết nhưng khi ra chạy file HTML thì lại không thấy kết quả gì cả, đó là vì CSS mà chúng ta đang viết nó không được áp dụng mà nó lại được áp dụng bởi một CSS khác.

Chúng ta hãy xem qua đoạn code sau

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>

ul#menu li a:link,
ul#menu li a:visited{color:#999;}

ul#menu li.Active a:link,
ul#menu li.Active a:visited{color:#ff0000;}

ul#menu li a:hover{color:#ccc;}

ul#menu li ul li a:hover{color:#000}
</style>
</head>

<body>
<ul id=”menu”>
<li><a href=”#” title=”Parent”>Parent</a>
<ul>
<li><a href=”#” title=”Child”>Child</a></li>
</ul>
</li>
</ul>

</body>
</html>

Trước khi các bạn chạy file này trên trình duyệt chúng ta hãy thử nghĩ xem khi ta mouseover lên “Child” thì nó sẽ có mảu gì? Có ai nghĩ nó là màu đen không? Lúc trước mình cũng nghĩ nó là màu đen, nhưng khi chạy file này thực tế thì nó lại cho mình màu đỏ ban đầu không hề thay đổi.

Vậy thì sao lại thế nhỉ?

CSS có một cách tính thứ tự ưu tiên như sau:

Pseudo-elements và element (VD: a, p, a:hover …) có giá trị là 1
class …………………………………………………………có giá trị là 10
id……………………………………………………………..có giá trị là 100
inline style………………………………………………….có giá trị là 1000

Bây giờ ta thử áp dụng để tính giá tri của CSS trên nhé.
ul#menu li ul li a:hover{color:#000} có giá trị 1(ul) + 100(#menu) + 1(li) + 1(ul) + 1(li) + 1(a:hover) = 105

Còn:
ul#menu li.Active a:link có giá trị 1(ul) + 100(#menu) + 1(li) + 10(.Active) + 1(a:hover) = 113

Vậy 113>105 nên CSS bên dưới sẽ được áp dụng .

Nếu chúng ta muốn khi mousever lên Child có màu vàng thì ta chỉ cần viết:
ul#menu li.Active a:hover{color:#fff000;}

]]> http://kynangweb.com/2010/02/28/cach-tinh-th%e1%bb%a9-t%e1%bb%b1-%c6%b0u-tien-trong-css/feed/ 1 Một số thủ thuật fix CSS trong IE6 http://kynangweb.com/2010/02/28/m%e1%bb%99t-s%e1%bb%91-th%e1%bb%a7-thu%e1%ba%adt-fix-css-trong-ie6/ http://kynangweb.com/2010/02/28/m%e1%bb%99t-s%e1%bb%91-th%e1%bb%a7-thu%e1%ba%adt-fix-css-trong-ie6/#comments Sun, 28 Feb 2010 11:31:26 +0000 admin http://kynangweb.com/?p=6
  • Inability to Have Elements with Small Heights

    • #element{
    # background: #95CFEF;
    # border: solid 1px #36F;
    # width: 300px;
    # height: 2px;
    # margin: 30px 0;
    # }4-2

    4-1

    Fix #1

    The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.

    # #element{
    # background: #95CFEF;
    # border: solid 1px #36F;
    # width: 300px;
    # height: 2px;
    # margin: 30px 0;
    # font-size: 0;
    # }

    Fix #2

    The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.

    # #element{
    # background: #95CFEF;
    # border: solid 1px #36F;
    # width: 300px;
    # height: 2px;
    # margin: 30px 0;
    # overflow: hidden
    # }

    ]]>     http://kynangweb.com/2010/02/28/m%e1%bb%99t-s%e1%bb%91-th%e1%bb%a7-thu%e1%ba%adt-fix-css-trong-ie6/feed/ 0     Rewrite URL với htacess http://kynangweb.com/2010/02/28/rewrite-url-v%e1%bb%9bi-htacess/ http://kynangweb.com/2010/02/28/rewrite-url-v%e1%bb%9bi-htacess/#comments Sun, 28 Feb 2010 11:29:34 +0000 admin http://kynangweb.com/?p=4 Chắc hẳn các bạn đã từng thấ y các website với link (URL) đơn giản như: http://www.yoursite.com/news/1.html hoặc link phức tạp: www.yoursite.com/mod=news&id=1, nếu đem so thì URL đầu tiên trông đẹp mắt và dễ nhớ hơn so với URL thứ hai. Ngoài ra URL thứ nhất nó còn giúp cho website mình thoát khỏi cặp mắt tò mò của những kẻ phá phách biết cấu trúc website của mình mà phá hoại, hơn nữa nó còn một lợi nữa là khi các Search Engine (Google, Yahoo) index thì chúng sẽ ưu tiên với những URL dễ nhớ như trường hợp URL thứ nhất. Từ đó website chúng ta sẽ dễ dàng lọt vào danh sách tìm kiếm của chúng.

    Chúng ta có thể hiểu như sau: khi chúng ta gõ link : http://www.yoursite.com/news/1.html và khi requyest tới webserver nó sẽ chuyển thành link thật sự như sau: www.yoursite.com/mod=news&id=1. Bây giờ chúng ta hãy bắt tay vào thực hiện công việc đó nhé.

    Đối với Apache Server.
    Trước tiên cần bật mod mod_rewrite trong file httpd.conf lên nếu chưa bật chúng ta sẽ nhận thông báo lỗi như hình bên dưới. Kích hoạt mod mod_rewrite có sẵn trong Apache bằng cách sữa trong file httpd.conf, bạn Find dòng chứa rewrite_module rồii bỏ dấu # (nếu có) đi. Sau đó restart Apache. Nếu bạn dùng các host trên internet thì có thì đã có sẵn rồi.

    htaccess-img


    Sau khi đã bật mod rewrite xong, công việc kế tiếp là tạo file .htaccess (Lưu ý rằng tên file là .htaccess và không có phần mở rộng) với nội dung sau:

    RewriteEngine on
    Options +FollowSymlinks
    RewriteBase /

    Tiếp theo là viết cú pháp RewriteRule:
    RewriteRule ^Virtual_Path Real_Path

    Ví dụ:
    RewriteRule ^topic_([0-9]*).html index.php?topic=$1
    ví dụ: topic_1.html thành index.php?topic

    RewriteRule ^article/([0-9]*)/page/([0-9]*) index.php?article=$1&page=$2
    ví d?: article/1/page/2 thành index.php?article=1&page=2

    Cú pháp viết các Rule này giống như cách viết câu biểu thức Regular Expression. ví dụ như sau:

    (.*) nhận tất cả các giá trị.
    ([0-9]*) chỉ nhận các giá trị là số từ 0-9.
    ([a-zA-Z]*) chỉ nhận các giá trị là chữ cái, từ a-z và A-Z.

    Sau khi tạo file htaccess bạn copy nó vào thư mục gốc của website là có thể chạy được.

    ]]>     http://kynangweb.com/2010/02/28/rewrite-url-v%e1%bb%9bi-htacess/feed/ 0     Tài liệu Javascript cơ bản http://kynangweb.com/2010/02/21/chao-moi-nguoi/ http://kynangweb.com/2010/02/21/chao-moi-nguoi/#comments Sun, 21 Feb 2010 17:11:27 +0000 admin http://kynangweb.com/?p=1 Đây là cuốn ebook Javascript do trường Đại học qốc gia Hà Nội biên soạn , sách viết khá chi tiết và cơ bản kèm theo các ví dụ giúp người mới học có thể học Javascript một cách nhanh chóng.

    Chúc các bạn có thể học Javascript được dễ dàng và nhanh chóng

    Download tại đây

    ]]>     http://kynangweb.com/2010/02/21/chao-moi-nguoi/feed/ 0