หน้าเว็บแบบ 1 คอลัมน์ เลย์เอ้าท์ พร้อมแทรกภาพ

จากบทความที่แล้วนะครับ ตอนนี้เราจะทำต่อเนื่อง ในกรณีที่ ใน class หรือ id นั้น เราต้องการแทรกภาพเข้าไปด้วย ไม่ว่าจะจัดชิดซ้าย ชิดขวา หรือตรงกลาง มาดูกันต่อเลยครับ

/*1.กำหนดภาพรวมของหน้าเว็บให้กับ body ของ html*/

body {
margin: 0 auto;
padding: 0;
background-color:#cccccc;
font-family: Tahoma, Verdana, sans-serif;
font-size: 0.8em;
color: #003399;
}

/*2. สร้าง div tag ขึ้นมาเพื่อใส่ข้อมูลที่เราต้องการ */

#one_c {

width: 794px;
position: relative;
float: none;
margin: 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
padding: 0 4px;
background-color: #FFFFFF;

/*เพิ่มเติมเข้ามา เพื่อป้องกันรูปภาพหลุด box ตัวนี้จะไม่มีผลกับ IE แต่ถ้าไม่ใส่่ จะมีปัญหากับ FF และ Opera*/

display: table;

}

/*คุมคุมการแสดงผล ของ รูปภาพใน ID one_c*/

#one_c img {
margin: 3px 3px;
/*สั่งจัด ชิดซ้าย หรือขวา ชิดซ้าย float: left; ขวา float: right;*/
float: right;
padding: 0;
border: solid 4px #ff9900;
}