CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)


หน้าแรก CSS CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

    ตัวอย่างการเขียน CSS Liquid Layout ต่อไปนี้ ผมจะยังคงแบ่ง Section ของหน้าเว็บหลักออกเป็น 3 ชิ้นเหมือนเดิม คือมีส่วนของ Header, Body และ Footer ซึ่งจะใช้ Element ยอดฮิตคือ Div ในการแบ่งพื้นที่ โดยใช้ แอตทริบิ้ว ID ในการเรียกใช้งาน CSS (ซึ่งจริงๆ แล้วไม่ควรใช้ ID ในการเรียก หรือแม้กระทั่ง Class เองก็ตาม อยากเห็นตัวอย่างว่าการเขียน CSS โดยไม่ใช้ แอตทริบิ้ว ID หรือ Class ในการเรียกใช้งานเป็นอย่างไร สามารถเข้าไปดูได้ในหน้าCSS Online ครับ) ผมแยกโดยการตั้งชื่อ id ให้ใกล้เคียงกับความสมจริงทั่วไปมากที่สุดคือมี #header-warp, #container และ #footer

โดยลักษณะการเขียน CSS ทั้งหมดในฝั่ง CSS มีการใช้

  1. Universal Selector: *
  2. Type Selector: body และ address
  3. ID Selector: #header-warp | #container | #footer
  4. Group Selector: #header-wrap, #container, #footer

1 Column Liquid Layout

สำหรับ Liauid Layout แบบคอลัมน์เดียวนี้ ถึงแม้จะไม่ค่อยถูกนำไปใช้งานมากมายในเชิงธุรกิจหรือทำเว็บเพื่อความสวยงาม แต่เราสามารถนำมาใช้เป็นเรื่องราวพื้นฐานของการทำความเข้าใจ ตามทฤษฎีของไหล ในรูปแบบอื่นๆ ได้เป็นอย่างดี

Code

CSS

  1.     * {    
  2.     padding: 0;    margin: 0;
  3. }
  4. body {    
  5.     color: rgb(33, 33, 33);    
  6.     font-family: Tahoma;    
  7.     font-size: 80%;    
  8.     }
  9. #header-wrap, #container, #footer {    
  10.     min-height: 5em;    border-bottom: solid 1px rgb(50, 50, 50);    
  11.     padding: .5em;
  12.     }
  13. #header-wrap {    
  14.     background: rgb(250, 250, 250);
  15.     }
  16. #container {    
  17.     min-height: 10em;
  18.     }
  19. #footer {    
  20.     background: rgb(150, 150, 150);
  21.     }
  22. address {
  23.     font-style: normal;
  24.     } 

XHTML

  1. <div id="header-wrap">    
  2.     <h1>CSS <em>Liquid Layout</em></h1>    
  3.     <p>การเขียน CSS Layout ในรูปแบบต่างๆ</p></d
  4. iv><div id="container">    
  5.     <h2>เนื้อหาส่วนที่สอง</h2>    <p>พื้นที่สำหรับเนื้อหาส่วนที่สอง หรือส่วน คอนเท้น</p>
  6.     </div>
  7. <div id="footer"
  8.     <address>&copy; 2007 ThaiCSS | 79 หมู่ที่ 2 โรงเรียนบ้านหลุบหวายป่าขาม ตำบลบ้านตาด อำเภอเมือง จังหวัดอุ
  9. ดรธานี</address></div>

สามารถดูได้ที่ ตัวอย่างการเขียน 1 Column Liquid Layout

2 Column Liquid Layout

มาดูกันต่อครับ กับการเขียนแบบ สองคอลัมน์โดยตัวอย่างผมจะแสดงให้เห็นในการทำคอลัมน์แทรกเข้ามาในฝั่งซ้ายอย่างเดียว สำหรับท่านใดที่จะโยกย้ายคอลัมน์ก็ตามแต่ท่านเถิด แน่นอนว่าในการเขียนเราต้องเพิ่ม XHTML เข้ามาเพื่อทำคอลัมน์ โดยผมจะเพิ่มเข้ามาทั้ง 2 divs เพื่อเอาไว้จัดการแยกคอลัมน์ ซ้ายและขวา ใช้ CSS รูปแบบของ Class Selector ในการแยกกล่องทั้งสองออกจากกัน โดยกำหนดเป็น .content สำหรับส่วนของเหนื้อหาหลัก และ .sidebar สำหรับส่วนของเนื้อหาที่อยู่ด้านข้าง

การเขียน CSS ที่เพิ่มเข้ามาจากตอนที่เราใช้แบบ 1 คอลัมน์มี ดังนี้

  1. Class Selector: .content | .sidebar
  2. :after pseudo-class Selector: .content:after

Code

CSS

  1. * {    
  2.     padding: 0;    margin: 0;
  3.     }
  4.  body {    
  5.      color: rgb(33, 33, 33);    
  6.     font-family: Tahoma;    
  7.     font-size: 80%;
  8.     }
  9. #header-wrap, #container, #footer {    
  10.      min-height: 5em;    padding: 0 .5em;
  11.     }
  12. #header-wrap {    
  13.     background: rgb(250, 250, 250);
  14.     }
  15.  #container {/*min-height: 10em;*/}
  16. .content {    
  17.     margin-left: 21%;    
  18.     background: rgb(100, 100, 100);
  19.     }
  20. .content:after {    
  21.      content: " ";    ]
  22.     display: block;    
  23.     clear: both;    
  24.     }
  25. .sidebar {    
  26.     width: 20%;    
  27.     float: left;
  28.     }
  29.  #footer {    
  30.      background: rgb(150, 150, 150);
  31.     }
  32. address {    
  33.     font-style: normal;
  34.     }   

XHTML

ขึ้นไปด้านบน