TAILIEUCHUNG - Creating Cool Web Sites with HTML, XHTML, and CSS apr phần 8

Tôi không biết về bạn, nhưng hình 12-9 mang lại cho tôi một chút đau đầu! Tin tốt là bạn có một vài cách khác nhau để giải quyết vấn đề container chồng chéo. Các giải pháp nhanh nhất là chỉ đơn giản là khôi phục lại màu nền để bạn không thể nhìn thấy văn bản của đoạn thứ hai, ví dụ sau đây hoàn thành: | 276 Creating Cool Web Sites with HTML XHTML and CSS I don t know about you but Figure 12-9 gives me a bit of a headache The good news is that you have a couple of different ways to address the overlapping container problem. The fastest solution is to simply restore the background color so that you can t see the text of the second paragraph which the following example accomplishes p style width 50 margin 10px background-color C9F position absolute top -6px left -6px border 1px solid padding 2px When the preceding code replaces the previous p tag and style attributes the result is as shown in Figure 12-10. You can see this is considerably easier on the eye. Figure 12-10 Specifying a background color hides the overlapping text problem. It s not a completely satisfying solution however because you still face the issue of the missing text. In this particular example the best solution is to use the float left CSS attribute. Experiment with it yourself and find what works best for you. Relative positioning Absolute positioning is absolute only within the parent container and most DHTML designers prefer relative positioning which they consider part of the normal flow of the document for layout. In the example in the preceding section switching from absolute to relative solves the overlap problem but in a somewhat inelegant manner leaving a big empty space to the right of the purple box as follows p style width 50 margin 10px background-color C9F position relative top -6px left -6px border 1px solid padding 2px Figure 12-11 shows the result of replacing the existing p tag style attribute with the values shown in the preceding code. Chapter 12 Advanced Cascading Style Sheets Figure 12-11 Relative positioning makes the container part of the regular document flow. In this case float left produces a more attractive result. So what s the point To see why the positioning of elements can prove so useful I need to change the perspective a bit. Instead of merely providing you with a

• Đồ họa - Thiết kế - Flash
• học thiết kế web
• ứng dụng văn phòng
• vi tính văn phòng
• lập trình C
• lập trình windows
• lập trình ứng dụng
• lập trình máy tính
• lập trình Java
• lập trình dot Net
• lập trình C#
• ứng dụng máy tính
• mẹo vặt cho windows 7
• thủ thuật máy tính
• Thiết kế Web
• Bài giảng Thiết kế Web
• Đại cương Thiết kế Web
• Tổng quan Thiết kế Web
• Môn học Thiết kế Web
• Mục tiêu Thiết kế Web
• tài liệu về thiết kế web
• hướng dẫn học thiết kế web
• giáo trình thiết kế web
• thiết kế web nhanh
• thiết kế web đẹp
• kỹ thuật thiết kế web
• Bài giảng Ứng dụng Web
• Ứng dụng Web trong dạy học
• Thuật ngữ Web
• Bài tập thiết kế Web
• Web giảng viên
• xây dựng website
• Nguyên tắc thiết kế web
• tài liệu học thiết kế web
• quy luật cơ bản thiết kế web
• thiết kế trang Web
• hướng dẫn thiết kế trang Web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế trang Web
• cẩm nang thiết kế trang Web