Trong bài này tôi sử dụng rất nhiều Absolute Position và Z-index. Nếu bạn chưa biết về 2 khái niệm này của CSS, bạn hãy xem lại 2 bài này để biết thêm chi tiết. Phần còn lại rất đơn giản. Tất nhiên đây chỉ là khung sườn thôi, bạn có thể thêm thắt hoa lá cành vào cho thêm đẹp và áp dụng vào nhiều project khác. Nếu bạn biết nguyên lý là vậy thì chỉ cần tư duy một chút là bạn có thể biến nó theo ý của mình.

Có bạn hôm nay email hỏi tôi cách căn chỉnh tabs ra giữa, tôi nghĩ đây là câu hỏi hay và có thể nhiều người quan tâm nên quyết định làm một video về nó. Trong bài này tôi sẽ không giải thích chi tiết cách tạo Sliding Door, tuy tôi có làm trong vieo, nếu bạn không hiểu nguyên lý thì bạn hãy xem video Nút Giãn Nở để biết thêm chi tiết.

Nếu bạn chạy thử phần này trong IE 6 và IE 7 thì sẽ bị lỗi, dưới đây là cách hack. Bạn chèn đoạn code này vào phần Head của tài liệu HTML

<!--[if IE]>
<style type="text/css">
    ul#tabs li a {
        padding: 0px 0px 0px 10px;
       }
</style>
<![endif]-->

Trong bài này tôi sẽ không làm kỹ phần xây dựng code HTML và giải thích kỹ phần CSS. Bởi vì trong video trước tôi đã nói rất kỹ về vấn đề này. Do vậy trong phần này nếu có chỗ nào bạn không hiểu hoặc thấy lờ mờ. Hãy xem video trước để biết thêm chi tiết. Để Menu có thể hiển thị được với trình duyệt IE 6, bạn cần download file whatever.htc đi kèm với source code của tut này. Bạn cũng có thể dùng Javascript để khắc phục. Nhưng đơn giản hơn có lẽ là sử dụng file .htc.

Đây là Video đầu tiên của Clackken Smith hướng dẫn các bạn cách làm cho 2 cột Div có độ dài bằng nhau. Với kiểu nói chuyện hài hước và hướng dẫn chi tiết tỉ mỉ. Đảm bảo các bạn sẽ hiểu được nguyên lý một cách đơn giản và hiệu quả. Là Video đầu tiên cho nên cũng không tránh khỏi cảm giác bị “camaroon”. Izwebz cũng mong nhận được nhiều hơn sự đóng góp bài vở khác của các bạn.

Ngoài cách này ra, các bạn cũng có thể tham khảo thêm bài Faux Column để biết thêm một cách nữa sử dụng CSS phòng khi trình duyệt của người dùng không bật Javascript.

Thực vậy, nếu ai đó mẫn cán có thể gom tất cả các hình vào làm một và sử dụng background-position để cho hiển thị các thành phần mà không cần sử dụng nhiều hình. Tuy nhiên, nó cũng có một hạn chế là bạn không thể sử dụng sprite image để tạo hình nền. Uhhh, thực ra, cũng có thể nhưng rắc rối hơn nhiều khi bạn muốn repeat-x hoặc repeat-y với Sprite Image. Tuy nhiên trong bài này bạn cũng sẽ học được cách sử dụng Sprite Image và hy vọng sẽ tăng tính hiệu quả trang web của bạn.

Trong Video tutorial này tôi sẽ chỉ ra những khái niệm cơ bản nhất của CSS Selectors. Tuy video chưa thể bao quát hết tất cả các CSS Selectors, nhưng tôi cũng đã cố gắng chọn ra những Selectors quan trọng nhất và hay được sử dụng nhất.

Trong bài này tôi sẽ hướng dẫn đến những Selector như sau:

• Khái niệm về quan hệ “gia đình” trong CSS
• Universal selector
• Type selectors
• Class selectors
• ID selectors
• Giống và khác nhau giữa Class và ID
• Descendant selectors
• Child selectors
• Universal selectors
• Adjacent sibling selectors
• Attribute selectors
• Pseudo-classes

Trong bài này bạn sẽ học được cách cơ bản nhất để tạo ra giao diện 2 cột bằng nhau. Tuy vậy, bạn có thể áp dụng cho tất cả các loại giao diện 2 cột, 3 cột, co giãn cũng như cố định. Trên izwebz đã có các tutorial hướng dẫn bạn cách tạo giao diện 2 cột, 3 cột. Cho nên trong bài này tôi sẽ chỉ tập trung vào kỹ thuật dùng hình ảnh để tạo ra “ảo giác” hai cột.