การจัดหน้าเว็บให้อยู่กึ่งกลางเสมอ ด้วย div ของ css
การจัดหน้าเว็บให้อยู่กึ่งกลางเสมอ ด้วย div จะทำให้หน้าเว็บของเราอยู่กึงกลางเสมอ ไม่ว่าความละเอียดของหน้าจอจะเป็นเท่าไรก็ตาม ตัวอย่างดังภาพข้างล่างนี้
ถ้าใช้ Dreamweaver ก็สบาย เพราะมีตัวช่วยเยอะ แต่ถ้าจะทำเอง ก็ไม่ยากเย็นอะไร
เราจะทำไฟล์ CSS จำนวน 1 ไฟล์ และทำไฟล์ html ที่เรียกใช้การจัดหน้า
วิธีการสร้างไฟล์ CSS
ลองปรับใช้ดูนะครับ
ถ้าใช้ Dreamweaver ก็สบาย เพราะมีตัวช่วยเยอะ แต่ถ้าจะทำเอง ก็ไม่ยากเย็นอะไร
เราจะทำไฟล์ CSS จำนวน 1 ไฟล์ และทำไฟล์ html ที่เรียกใช้การจัดหน้า
วิธีการสร้างไฟล์ CSS
- เปิดโปรแกรม Notepad ที่มีอยู่แล้วในคอมพิวเตอร์ทุกเครื่อง หรือ Text editor ที่ท่านถนัด ผมชอบ EditPlus
- คัดลอก โค้ดต่อไปนี้ไปวาง
body {
text-align: center;
width:100%;
background-color:#FFFFCC;
margin:0,0,0,0;
}
#wrapper {
text-align: left;
width: 640px;
height:480px;
margin-left: auto;
margin-right: auto;
background-color:#99CC00;
padding:20px;
}
- บันทึกเป็นไฟล์ ชื่อว่า myCenter.css
- เปิดโปรแกรม Notepad หรือ Text editor
- คัดลอกโค้ดต่อไปนี้ไปวาง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> ทดสอบการจัดกึ่งกลาง </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620">
<link rel="stylesheet" type="text/css" href="myCenter.css" />
</HEAD>
<BODY>
<div id="wrapper">
<H2>นี่เป็นการทดสอบ </H2>
</DIV>
</BODY>
</HTML>
- บันทึกไฟล์นี้ ใช้ชื่อว่า myCenter.html หรือชื่อทีชอบ แต่ขอให้เป็นนามสกุล html ก็แล้วกัน
- เปิดไฟล์นี้ โดยใช้ Browser ของท่าน
- หน้าตาที่ออกมา จะเป็นดังนี้
ลองปรับใช้ดูนะครับ
ความคิดเห็น
แสดงความคิดเห็น