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

ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

ตัวอย่างการเขียน 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

    * {	
	padding: 0;	margin: 0;
}
body {	
	color: rgb(33, 33, 33);	
    font-family: Tahoma;	
    font-size: 80%;	
    }
#header-wrap, #container, #footer {	
	min-height: 5em;	border-bottom: solid 1px rgb(50, 50, 50);	
    padding: .5em;
    }
#header-wrap {	
	background: rgb(250, 250, 250);
    }
#container {	
	min-height: 10em;
    }
#footer {	
	background: rgb(150, 150, 150);
    }
address {
	font-style: normal;
    } 

XHTML

<div id="header-wrap">	
    <h1>CSS <em>Liquid Layout</em></h1>	
    <p>การเขียน CSS Layout ในรูปแบบต่างๆ</p></d
iv><div id="container">	
    <h2>เนื้อหาส่วนที่สอง</h2>	<p>พื้นที่สำหรับเนื้อหาส่วนที่สอง หรือส่วน คอนเท้น</p>

    </div>
<div id="footer"
	<address>&copy; 2007 ThaiCSS | 79 หมู่ที่ 2 โรงเรียนบ้านหลุบหวายป่าขาม ตำบลบ้านตาด อำเภอเมือง จังหวัดอุ
ดรธานี</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

* {	
	padding: 0;	margin: 0;
    }
 body {	
 	color: rgb(33, 33, 33);	
    font-family: Tahoma;	
    font-size: 80%;
    }
#header-wrap, #container, #footer {	
 	min-height: 5em;	padding: 0 .5em;
    }
#header-wrap {	
	background: rgb(250, 250, 250);
    }
 #container {/*min-height: 10em;*/}
.content {	
	margin-left: 21%;	
    background: rgb(100, 100, 100);
    }
.content:after {	
 	content: " ";	]
    display: block;	
    clear: both;	
	}
.sidebar {	
	width: 20%;	
    float: left;
    }
 #footer {	
 	background: rgb(150, 150, 150);
    }
address {	
	font-style: normal;
    }   

XHTML

<div id="header-wrap">	
	<h1>CSS <em>Liquid Layout</em></h1>	
    <p>การเขียน CSS Layout ในรูปแบบต่างๆ</p></div>

<div id="container">
	<div class="sidebar">		
    	<p><strong> ข้อมูลที่อยู่ฝั่งซ้ายมือ</strong></p>		
        <p>เราสามารถนำ เนวิเกชั่นมาใส่ได้</p>		
        <ul>            		
        	<li>เมนู xx</li>            		
            <li>เมนู xx</li>            		
            <li>เมนู xx</li>            		
            <li>เมนู xx</li>		
        </ul>	</div>	
   	<div class="content">		
    	<h2>เนื้อหาหลัก</h2>		
        <p>1. Liquid Layout (การวางหน้าเว็บแบบเต็มหน้า)การเขียน css xhtml layout 
        แบบแสดงผลตามความกว้างของหน้าจอ         โดยกำหนดความกว้างแบบเปอร์เซ็นต์นี้ 
        หมาะสำหรับเว็บที่มุ่งเสนอเนื้อหามากๆ เป็นสำคัญ เช่นเว็บที่นำเสนอข่าว         
        โดยที่รูปแบบการนำเสนอถูกลดบทบาทลงไป แต่เนื้อหาจะถูกดันขึ้นมาทดแทน
        เราจึงไม่สามารถไปกำหนดการออกแบบได้มาก         เพราะขนาดของความกว้างจะขึ้นอยู่กับหน้าจอผุ้ใช้เป็นสำคัญ
         การออกแบบจึงถูกจำกัดลงมาด้วยการเขียน Liquid Layout          
         ข้อจำกัดอีกรูปแบบหนึ่งที่มีคือ การวางโครงสร้างของ Element ในกรณีที่เป็น 3 Columns ทำให้ Column         
          ตรงกลางส่วนของข้อมูลหลัก จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง         
           ข้อดีใช้พื้นที่หน้าจอได้ประโยชน์ อย่างเต็มที่กับการนำเสนอเนื้อหาของเว็บไซท์ 
           ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือ         ได้โดยที่หน้าเว็บไม่ผิดเพี้ยนไปข้อเสียไม่สามารถใช้กราฟฟิคหวือหวา 
           หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้ 
           </p>	
           </div></div>

      <div id="footer">	
      	<address>		&copy; 2007 ThaiCSS | 79 หมู่ที่ 2 โรงเรียนบ้านหลุบหวายป่าขาม ตำบลบ้านตาด อำเภอเมือง จังหวัดอุดรธานี	</address>
     </div>

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

สำหรับเนื้อหาเรื่องการ clear Element โดยการใช้ :after pseudo-class สามารถอ่านเพิ่มเติมได้ที่ แนวทาง ในการแก้ไขปัญหา Float Model

สำหรับแบบ สามคอลัมน์ ขอฝากไว้ก่อนครับ เดี๋ยวกลับมาต่อ