TAILIEUCHUNG - HTML Utopia: Designing Without Tables Using CSS- P9

HTML Utopia: Designing Without Tables Using CSS- P9: I’ve been around the Web for a while now some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. | The Markup File excerpt h3 Move of the Month h3 h4 The Outer Stall h4 img src img alt player demonstrating the outer stall move height 110 width 60 class motm-image p Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo. p p class more a href more a p div div -- sidebar -- div id sidebar2 div class inner ul id nav li a href Freestyle a li li a href Tournaments a li li a href Results a li li a href Rules a li li a href Blog a li li a href FAQ a li li a href Forums a li li a href Organisations a li ul h3 The BagBlog h3 div id bloglatest h4 10 Apr 06 h4 p a href A New Season On the Road Again a p p Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Praesent henrerit iaculis arcu. p div ul id blog li 5 Apr a href Ouch. That Really Hurt a li li 3 Apr a href Experimental Moves From Spain a li li 29 Mar a href 5 Ways to Lighten Up Training a li ul h3 Newsletter h3 p To get all the latest news tips results and new footbag products sign up to our free newsletter. p form method post action id newsletterform div 219 Licensed to siowchen@ Chapter 9 Three-column Layouts input type text name email id newsletter-email value email@here class text div div class searchbutton input type submit name btnSubmit id newsletter-submit value SUBSCRIBE class btn div form div div -- sidebar2 -- div -- main -- div -- wrapper -- body html You can see that I ve wrapped this section in a div with the id sidebar2 within that is a div with a class of inner. I ve also added some classes to the different elements so they re ready for us to add the CSS. Once we add this markup the column will display below the main content area in the browser as shown in Figure . 220 Licensed to siowchen@ Positioning the Sidebar Figure . Viewing the page in the browser after adding the sidebar2 div and contents Positioning the Sidebar We can now use CSS to position this sidebar and style its .

• Đồ họa - Thiết kế - Flash
• thiết kế web
• giáo trình CSS
• thủ thuật cắt html
• photoshop căn bản
• đồ họa máy tính
• Thiết kế trang web
• hướng dẫn Thiết kế trang web
• kinh nghiệm Thiết kế trang web
• tài liệu Thiết kế trang web
• cẩm nang Thiết kế trang web
• kỹ thuật Thiết kế trang 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
• Giáo trình Thiết kế giao diện web
• Thiết kế và quản lý website
• Thiết kế giao diện web
• Nhận dạng các trang web
• Cấu trúc trang web
• phương pháp thiết kế trang Web
• kỹ thuật thiết kế Web
• thiết kế web nhanh
• thực hành thiết kế web
• thiết kế web đẹp
• tài liệu về thiết kế web
• thủ thuật thiết kế web
• mẹo dùng web
• học thiết kế web
• Thiết kế web động
• tài liệu Thiết kế web động
• hướng dẫn Thiết kế web động
• kinh nghiệm Thiết kế web động
• cẩm nang Thiết kế web động