css กับการจัดวาง xhtml ในกล่องข้อมูล

ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล

ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง

ตัวอย่างแสดงผลออกมาแบบนี้

เราไปดูโค้ดทั้งหมดกันครับ

xhtml ทั้งหมดที่ผมเลือกใช้ มี

1. h1 : หัวเรื่องของเนื้อหา
2. p : แสดงผลเนื้อหา
3. blockquote : แสดงคำพูดสำคัญ
4. div : ควบคุมโครงสร้าง
5. q : แสดงประโยคคำพูด (ไออี 6 นรกตามเคย)
6. strong : ตัวหน้าที่เน้นความสำคัญ
7. em : ตัวเอียงที่ความหมายมีนัยยะต่างไป
8. span : การแสดงผลทางสีที่ต่างกัน
9. img : แทรกรูปภาพ

ในที่นี้ ผมไม่ขอเลือกใช้ class หรือ id นะครับ เพราะผมอยากจะแสดงตัวอย่างให้เห็นได้ง่ายมากที่สุด โดยโครงสร้าง xhtml ถูกคิดขึ้นมาก่อนประมาณนี้

<div>
<h1></h1>
<p><q></q></p>

<p><img></img></p>
<p><strong></strong><span></span><em></em></p>
<blockquote></blockquote>

</div>

เมื่อนำข้อมูลที่มีอยู่มาใส่

<div>

<h1>ต้นนุ่น สะพาน ร้านน้ำแข็ง</h1>

<p><q>แก</q></p>

<p><q>แก</q></p>

<p><q>แกจะรักฉันไหม</q></p>

<p>ชายหนุ่มยังไม่ยอมลดละความพยายามที่จะถามเพื่อนสาวที่เขาเคยบอกรักเธอมาเป็นร้อยเป็นพันครั้ง แต่ยังไม่ได้คำตอบที่แน่ชัดจากปากของฝ่ายหญิง สักที ทั้งๆ ที่รู้ว่าคำตอบที่เขาจะได้กลับมานั้นมันคือคำตอบที่เคยได้ยินจากปากของเธอมาก่อนแล้ว</p>

<p>บางครั้ง ถ้าเธอรำคาญก็ก็จะบอกว่า <strong><q>ฉันยังพูดเหมือนเดิม</q></strong> แต่มันก็ไม่ได้ทำให้ความพยายามที่จะ <span>รัก</span> จากชายคนนี้ลดน้อยถอยลงไปเลย</p>

<p>บางทีเขาคงต้องมานั่งขบคิดและจริงจังกับคำว่า <em>ฉันยังพูดเหมือนเดิม</em> ของเธอใหม่ และทำตัวใหม่ให้สมกับการเป็นเพื่อนที่ดีต่อกันอย่างเดิมที่เคยรู้สึกก็เป็นได้ แต่จะทำอย่างไร เพราะในใจมันไม่ยอมสั่งให้ทำอย่างนั้น เมื่อในใจมันไม่ได้สั่ง ความอยากไม่ได้เกิด กระนั้นจะทำการใดให้ขัดกับความเป็นจริงของใจตัวเองมันก็อยากที่จะทำเขาจึงปล่อยให้มันเป็นไปตามกาลเวลาอย่างนี้มาเรื่อยๆ </p>

<p><img src="coffe-cup.jpg" title="รัก พักจิบกาแฟ" alt="Coffe for Lover" /></p>

<p>5 ปีมาแล้ว มันไม่ใช่ห้วงเวลาสั้นๆ กับการทำความรู้จักกันฉันท์เพื่อน และพัฒนาการมาเป็นความรักแบบอื่น นอกจากรักแบบเพื่อน ตามที่ฝ่ายหญิงต้องการ</p>

<p>การกลัวความสูญเสียผู้ชายคนที่นั่งข้างๆ เธอคนนี้ไป ถือเป็นอีกเหตุผลนึงที่ทำให้เธอไม่สามารถตัดสินใจ รัก เขาอย่างที่เขาอยากให้รักได้ เพราะเธอเองคิดว่า การรักแบบเพื่อนรักเพื่อนอย่างนี้มันยาวนานและยั่งยืนกว่ารักแบบ คนรักแล้วไปกันไม่รอด จึงต้องเลิกร้างห่างหายกันไป ความเป็นเพื่อนก็ไม่เหลือเยื่อใย เหลือเพียงแค่ความทรงจำอันเลวร้าย </p>

<p><strong>กว่าที่ความทรงจำอันดีเก่าๆ จักผุดขึ้นมาใหม่ก็ใช้เวลาเยียวยาล่วงหลายปี</strong></p>

<blockquote>แกไม่จำเป็นต้องตอบฉันก็ได้นะ ฉันก็ถามไปงั้นๆ แหละ ทั้งๆ ที่รู้คำตอบอยู่ในใจ</blockquote>

</div>

นำ css มาควบคุม

* {
    padding: 0;	
    margin: 0;	
    outline: 0;
}
body {
    font-family: Tahoma;	
    font-size: 0.8em;	
    background: #4e382f;	
    margin-top: 1em;
}
div {	
    position: relative;	
    width: 494px;	
    margin: 0 auto;	
    background: url(bg-all.gif) repeat-x #f6f5f1;	
    border: solid 3px #ffffff;
}
p {	
	padding: 0 1em 1em 1em;
}
h1 {	
    color: #3e271e;	
    padding: 1em 1em 1em 1em;	
    height: 64px;	
    background: url(h-bg.gif) no-repeat;	
    font-size: 1.5em;
}
blockquote {	
    position: absolute;	
    right: 0;	
    top: 2em;	
    width: 175px;	
    height: 100px;	
    padding: 40px 10px 10px 20px;
    background: url(bq.gif) no-repeat right top;	
    font-weight: bold;	
    text-align: center;
}
span {	
    color: #FF99CC;	
    font-weight: bold;
}
img {	
    display: block;	
    margin: 0 auto;	
    border: #d77487 solid 3px;
}

มาไล่จับรายละเอียดทีละชิ้นกันครับ

1. <div>

ลักษณะการใช้งานโดยนำมาเป็นตัววางโครงสร้างหลัก โดยใช้ css ควบคุม ให้มีความกว้างรวม 500px และจัดกลางหน้าด้วย margin: 0 auto; เพิ่มเติมรูปภาพพื้นหลังเข้าไปและใส่เส้นขอบสีขาว

2. <h1>

หัวข้อหลักที่สำคัญที่สุด แน่นอนอยูแล้วครับว่าต้อง h1 การแสดงผลพิเศษ ที่ผมเพิ่มเข้ามาคือ ใส่พื้นหลังรูปภาพให้นั่นเอง

3. <p>

ย่อหน้าทั้งหลาย ในที่นี้ไม่มีอะไรแปลกใหม่ แค่เพียงเอาไว้คั่นแสดงว่า แต่ละย่อหน้ามีข้อมูลมากมายแค่ไหนเท่านั้นเองครับ

4. <q>

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

5. <strong>, <span>, <em>

ตามนั้นเลยครับ

6. <img>

ถ้าอยากจะจับ รูปภาพจัดกลาง แค่สั่ง display: block; แล้วก็ตามด้วย margin: 0 auto; เท่านั้นครับ

ทั้งหมดที่กล่าวมาสามารเข้าไปดูตัวอย่างแบบ html ได้ที่หน้านี้เลยนะครับ อยากลองก็ save ไปศึกษาเองไม่ว่ากันผมหวังว่าคงเข้าใจและสามารถนำไปประยุกต์ใช้ได้มากยิ่งขึ้น

มีความสุขกับการทดลองและประยุกต์ใช้ ด้วยตนเองครับ