การเขียน Liquid Layouts 3 Columns

ผมค้างเอาไว้จากบทความก่อนหน้า เกี่ยวกับการเขียน CSS Layout แบบ เต็มหน้า ตอนนี้มาดูกันต่อว่า ถ้าจะทำเป็นแบบ สามคอลัมน์ต้องลดและเพิ่มตรงไหนบ้าง เพื่อที่จะจัดหน้าให้เข้าที่ได้ง่ายที่สุด

สำหรับคนที่ยังไม่ได้อ่านรูปแบบการเขียนเลย์เอ้าท์ แบบต่างๆ สามารถอ่านเพิ่มเติมได้ที่ CSS Layout ในรูปแบบต่างๆ และ CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%) จะได้เข้าใจการเขียน สามคอลัมน์แบบนี้มากยิ่งขึ้น

สิ่งที่เพิ่มเข้ามาในการเขียนแบบ สามคอลัมน์ีนี้ก็คือ ข้อมูลฝั่งขวามือ ซึ่งผมใช้ คลาส .added-content ลักษณะการเขียน ผมเขียนต่อจาก class .sidebar ก่อนที่จะขึ้น content จริง แล้วสั่ง float: right เพื่อที่จะให้กล่องลอยไปอยู่ด้านขวา และกลับไปที่ class .content จากเดิมที่ มี margin ทางฝั่งซ้ายอย่างเดียว กลายมาเป็นการเขียน CSS แบบ short hand อยู่ในการสั่ง shorthand property คือ margin: 0 21%; (เดี๋ยวจะมาเล่าอีก ในโอกาสต่อไปครับ) เมื่อเพิ่ม margin เข้าไปฝั่งขวา ก็จะเกิดช่องว่างเพิ่มอีก 21% เพื่อที่จะเหลือไว้ให้ .added-cotent เข้าไปสิงอยู่ได้พอดี

CSS ทั้งหมดในฝั่ง CSS

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: 0 .5em;
    }
#header-wrap {	
    background: rgb(250, 250, 250);
    }
#container {
    /*min-height: 10em;*/
    }
.content {	
    margin: 0 21%;	
    background: rgb(100, 100, 100);
    }
.content:after {	
    content: " ";	
    display: block;	
    clear: both;
 }
.sidebar {	
	width: 20%;	
    float: left;
    }
 .added-content {	
 width: 20%;	
 float: right;
 }
 #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="added-content">

  <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>ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก 
  จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง 
  ข้อดีใช้พื้นที่หน้าจอได้ประโยชน์ อย่างเต็มที่กับการนำเสนอเนื้อหาของเว็บไซท์ 
  ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือได้ โดยที่หน้าเว็บไม่ผิดเพี้ยนไป
  ข้อเสียไม่สามารถใช้กราฟฟิคหวือหวา หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้ </p>

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

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

ถ้าเกิดไม่มี IE6 หรือ IE ทั้งหมดเข้าสู่มาตรฐานและสนใจชาวบ้านชาวช่องเขาบ้าง จะเกิดอะไรขึ้น

ผมมีตัวอย่างการเขียน css แบบ Child Selector และ Adjacent sibling selectors มากระตุ้นต่อมความน่าสนใจในความสามารถของ css กันสักเล็กน้อย แต่ยังไม่ได้มี Descendant selectors เข้ามาร่วม ก็เอาไว้โอกาสต่อไปครับ

กับการทำหน้าเว็บแบบ 3 Columns Liquid Layout เหมือนเดิม โครงสร้างของ XHTML ยังคงใช้เหมือนเดิม แต่สิ่งที่ถออดออกไปคือ Attribute Class และ ID ทั้งหมด คงรู้กันแล้วว่า ใน CSS3 Class Selector ของ CSS จะถูกนำมาใช้งานน้อยมาก ถ้าไม่จำเป็น ส่วน ID จะถูกปัดไปอยู่ในเรื่องของ Architecture Domain โดยเป็นส่วนย่อยในเรื่อง Naming และ Addressing โดยเฉพาะการทำ URI ให้มีความหมายในเรื่อง Semantic Web การเขียน CSS เพื่อควบคุมการแสดงผล XHTML จึงถือเป็นเรื่องเฉพาะทางมากยิ่งขึ้น

ก่อนที่จะไปดู CSS มาดู XHTML ที่เปลี่ยนไปกันก่อนครับ

XHTML

<div>
  <h1>CSS <em>Liquid Layout</em> แบบไม่มี Class ไม่มี ID</h1>

 <p>การเขียน CSS Layout แบบไม่มี Class ไม่มี ID</p>
  </div>
  <div>
  <div>
  <p><strong> ข้อมูลที่อยู่ฝั่งซ้ายมือ</strong></p>

  <p>เราสามารถนำ เนวิเกชั่นมาใส่ได้</p>
  <ul>
  <li>เมนู xx</li>
 <li>เมนู xx</li>

  <li>เมนู xx</li>
  <li>เมนู xx</li>
  </ul>
  </div>
  <div>

  <p><strong> ข้อมูลที่อยู่ฝั่งขวามือ</strong></p>
 <p>เพิ่มข้อมูล หรือกล่องข้อมูลต่างๆ</p>
  <ul>
  <li>เมนู xx</li>

  <li>เมนู xx</li>
  <li>เมนู xx</li>
  <li>เมนู xx</li>
 </ul>

  </div>
  <div>
  <h2>เนื้อหาหลัก</h2>
  <p>ในกรณีที่เป็น 3 Columns ทำให้ Column ตรงกลางส่วนของข้อมูลหลัก 
  จะถูกนำไปเขียนไว้เป็น Element สุดท้าย เพื่อที่จะใช้ CSS จัดการแสดงผลได้ถูกต้อง 
  ข้อดีใช้พื้นที่หน้าจอได้ประโยชน์ อย่างเต็มที่กับการนำเสนอเนื้อหาของเว็บไซท์ 
  ผู้ใช้สามารถเลือกใช้ขนาดตัวหนังสือได้ โดยที่หน้าเว็บไม่ผิดเพี้ยนไป
  ข้อเสียไม่สามารถใช้กราฟฟิคหวือหวา หรือรูปแบบเฉพาะบางอย่างในหน้าเว็บได้ </p>
  </div>

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

ส่วนเรื่องของ CSS ก็ตามข้างล่างเลยครับ

CSS

* {
	padding: 0;
	margin: 0;
}
body {
	color: rgb(33, 33, 33);
	font-family: Tahoma;
	font-size: 80%;
}
body>div {
	min-height: 5em;
	/*border-bottom: solid 1px rgb(50, 50, 50);*/
	padding: 0 .5em;
}
div:first-child {
	background: rgb(250, 250, 250);
}
div:first-child+div {
/*min-height: 10em;*/
}
div:first-child+div>div:last-child {
	margin: 0 21%;
	background: rgb(100, 100, 100);
}
div:first-child+div>div:last-child:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
div:first-child+div>div:first-child {
	width: 20%;
	float: left;
}
div:first-child+div>div:first-child+div {
	width: 20%;
	float: right;
}
div:last-child {
	background: rgb(150, 150, 150);
}
address {
	font-style: normal;
}

สามารถดูตัวอย่างได้ที่ ตัวอย่างการเขียน 3 Column Liquid Layout แบบ None Class หรือ ID (ไม่สามารถใช้ IE6 ดูได้ สาเหตุเพราะอะไร เรารู้ดี)

การเขียนหน้าเอกสารด้วย XHTML ที่ขาวสะอาดมากๆ ช่วยให้การเข้าถึงข้อมูลของ User Agents ต่างๆ สามารถทำได้ง่ายยิ่งขึ้น การตัด Attribute Class ออกไป หรือ ลดการใช้งาน ทำให้หน้าเอกสารเรามีขนาดเล็กลง ประหยัดไปอีกทาง คนที่กำลังอยากจะทำเว็บแบบ Hight Accessibility คงกำหลังศึกษาและทำเรื่องนี้กันอยู่

ผมเชื่อว่า ต้องมีคนไม่เห็นด้วยกับผมแน่ๆ ว่าถ้าเขียนหน้าเว็บแบบไม่มี Class มันจะได้ยังไง กับหน้าเว็บใหญ่ๆ หรือโครงสร้างเว็บใหญ่ๆ ผมขอบอกว่า มันทำได้ครับ อยู่ที่คนเขียนเท่านั้นแหละว่าจะสามารถเขียนมันได้หรือเปล่า และผมขอบอกเอาไว้ตรงนี้ว่า อีกไม่นาน ผมจะเอาหน้าเว็บนั้นมาให้ดูครับ

มีความสุขกับการเขียน XHTML CSS ครับ ผมขอตัวไปแกะเพลงต่อก่อนครับ เย็นนี้มีซ้อมดนตรี