โง่มานาน กับการบังคับหน้าเว็บด้วย DIV

หลังจากลองมานาน กับการบังคับหน้าเว็บ Div ก็ไม่ค่อยเวิร์คเลยสักที บางครั้งก็ยือหยุ่นตามขนาดหน้าต่างของเบราเซอร์มั้ง ลองใช้ css ลองใช้ตาราง เข้าช่วยแล้วแต่ก็ด้วยเบราเซอร์รองรับไม่เหมือนกัน ลองกับ Firefox ออกมาสวยงามแต่พอลอง กับ IE ก็คนละแบบกันเลย

แต่วันนี้ความโง่ๆ ที่มีมาก็เริ่มมลาย หายลงไปทีละนิด  ก็ต้องขอขอบคุณ Firebug ad-dons ดีของ firefox ที่น่าจะโหลดมาใช้ตั้งนานแล้ว  ก็เลยลองใช้ firebug ลองไปแกะ html css ของเว็บโน่น เว็บนี้ดู ไปเจออยู่เว็บหนึ่ง www.myfri3nd.comเป็น social network ฝีมือคนไทย (คนเล่นเยอะพอประมาณ แต่อย่างว่าคนไทยไม่ค่อยสนับสนุนของไทย) แกะไปแกะมา ได้ความรู้อะไรหลายๆ อย่างเลย

สำหรับเว็บ myfri3nd (ฮุ !! พิมพ์ยากสิหาย)

โครงสร้างเว็บนี้ เท่าที่ความรู้เท่าสมองมดของผม นั้นวิเคราะห์ได้จะใช้โครงสร้างประมาณ

<div id=”container”>
<div id=”container-left”>เนื้อหาด้านซ้ายมือ
</div>
<div id=”container-right”>เนื้อหาด้านขวามือ
</div>
</div>

เป็นอะไรประมาณว่า มี Div ใหญ่อยู่อันหนึ่ง แล้วมี Div ย่อยอีก 2 อันอยู่ข้างใน ซ้ายขวา

เอ่อ ! DIV แบบนี้แหละไม่ใช่เหรอ ที่เราพยายามทำอยู่ตั้งนาน แต่ความโง่มันดันมาบดบัง อยู่ตลอดเวลา

ดูโค้ด html เสร็จ ต่อจากนั้นก็ไปในส่วน css ที่คอยจัดการหน้าตาอยู่

อะพิโธ๋ แม่คุณเอ้ยยยย
หาวิธีมานาน มันบังคับแค่ตัว container ใหญ่ ด้วย css

#container{
height:500px;
margin:auto; // ตัวนี้แหละสำคัญ ที่มันจะจัดให้ div ระยะห่างจากขอบหน้า ซ้ายขวาเท่ากันในความกว้างที่กำหนด
}

ที่นี้ก็มาเขียนโค้ดแบบเต็มกันเลย

<html>
<head>
<style type=”text/css”>
#container{
width:900px;
height:500px;
margin:auto;
border:solid 1px #000;
}
#container-left{
background-color:#FFCCFF;
float:left;
width:500px;
margin-left:30px;
height:300px;
}
#container-right{
background-color:#CC99CC;
float:right;
width:300px;
margin-right:30px;
height:300px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874”></head>
<body><div>
<div id=”container”>
<div id=”container-left”>เนื้อหาด้านซ้ายมือ
</div>
<div id=”container-right”>เนื้อหาด้านขวามือ
</div>
</div>
</body>
</html>

โอเคร๊ เลย อยู่ตรงกลางพอดีเป๊ะ อีก2 div ด้านในก็โอเค ทีนี้มาดูใน IE มั้งว่าผลที่ได้จะออกมายังไง

เอ้า ทำไมมันชิดซ้าย ซะงั้นน  ไงเป็นนั้นฟะ
ไม่ได้การละ ลองเข้าไปดูใน myfri3nd ใหม่ ลองเข้าไปดูใน css มันมีการกำหนดอะไีรเพิ่มหรือเปล่า

ก็ไม่หนิ !

ลองมาดูที่ html

ก็ไม่มีหนิ !

มาถึงบางอ้อ ก็ตอนนี้แหละ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

(เท่าที่เข้าใจมันน่าจะเป็นโครงสร้างมาตรฐาน html อะไรสักอย่าง)

พอเอาเอาเข้าไปใส่ในบรรทัดแรก ปุ๊บ

พับพล่าาาาาาา

อยู่ตรงกลางทั้ง IE ทั้ง Firefox ก็เป็นอันเสร็จเรี๊ยบร๊อยยยย

ปล1.เดี๋ยวนี้การเขียนเว็บ มันมีมาตรฐานอยู่มากมาย บังคับโน่นนี่ หน่าย !!!!
ปล2.ข้อความในบทความนี้เขียนตามเข้าใจ ไม่ใช้ศัพท์วิชาการ ถูกไม่ถูก ไม่ว่ากัน😀
ปล3.ขอบคุณ myfri3nd.com ที่เป็นแรงบันดาลใจ และแหล่งความรู้ เลยนะ ฮะฮ่า

ย้ายบทความว่าไว้ใน wordpress ให้หมด

Link เดิม supachai.tumblr.com



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s