#leftmenu{float: left; width: 210px; height: 725px; background: #f3f3f3;} //ส่่วนสีเทาด้านซ้าย #rightcontent{float: left; width: 200px;} //ส่วนสีขาวด้านขวา (จะเอาข้อความมาอยู่ในส่วนนี้คะ) #headmenu { //ส่วนแถบเมนูสีดำคะ float: left; width: 100%; height: 30px; background: #333333; } #footer{background: #333333; height: 24px;} // ส่วนแถบด้านล่าง #header{background: url('../images/bg/bg_whitegrey.jpg'); height: 71px;} // ส่วนด้านบนสุดเลย #header,#frame,#footer{clear: both; margin: 0 auto; width: 100%; }
body{ margin:0px; padding:0px; text-align:center; /* กันเหนียวให้ IE กึี่งกลาง */ } #wrapper{ /* ตัวครอบทั้งหมด */ width:980px; margin:0 auto; padding:0 auto; text-align:left; } #header{ width:100%; margin:0px; padding:0px; float:left; background: url('../images/bg/bg_whitegrey.jpg'); height: 71px; } #headmenu { float: left; width: 100%; height: 30px; background: #333333; margin:0px; padding:0px; } #leftmenu{ float: left; width: 210px; background: #f3f3f3; margin:0px; padding:0px; } //ส่่วนสีเทาด้านซ้าย #rightcontent{ float:right; min-width:700px; margin:0px; padding:0px; background:#FFF; } #footer{ clear:both; margin:0 auto; padding:0 auto; width:980px; text-align:left; background: #333333; height: 24px; } // วิธีใช้ <body> <div id="wrapper"> <div id="header"></div> <div id="headmenu"></div> <div id="leftmenu"></div> <div id="rightcontent"></div> </div> <div id="footer"></div> </body>
<div id="header"><?php include(INCLUDE_PATH."topPage.php"); ?> </div> <div id="headmenu"><?php include(INCLUDE_PATH."topMenu.php"); ?></div> <div id="leftmenu"><?php include(INCLUDE_PATH."leftMenu.php"); ?></div> <div id="rightcontent"> <!------------START INFORMATION-----------> <!----------END INFORMATION-----------------> </div> </div> <div id="footer">clear:both</div>
<style> body{ margin:0px; padding:0px; text-align:center; /* กันเหนียวให้ IE กึี่งกลาง */ } #wrapper{ /* ตัวครอบทั้งหมด */ margin:0 auto; padding:0 auto; text-align:left; } #header{ width:100%; margin:0px; padding:0px; float:left; background: url('../images/bg/bg_whitegrey.jpg'); height: 71px; } #headmenu { float: left; width: 100%; height: 30px; background: #333333; margin:0px; padding:0px; } #leftmenu{ float: left; width: 210px; background: #f3f3f3; margin:0px; padding:0px; } //ส่่วนสีเทาด้านซ้าย #rightcontent{ float:right; min-width:700px; margin:0px; padding:0px; background:#FFF; } #footer{ clear:both; margin:0 auto; padding:0 auto; text-align:left; background: #333333; height: 24px; } </style> // วิธีใช้ <body> <div id="wrapper"> <div id="header"></div> <div id="headmenu"></div> <div id="leftmenu"></div> <div id="rightcontent"></div> </div> <div id="footer"></div> </body>
#wrapper{ /* ตัวครอบทั้งหมด */ margin:0 auto; padding:0 auto; text-align:left; }
#footer{ clear:both; margin:0 auto; padding:0 auto; text-align:left; background: #333333; height: 24px; }
#leftmenu{float: left; width: 210px; height: 725px; background: #f3f3f3; clear:both; } // ด้วยก็ดีครับ
<style> body{ margin:0px; padding:0px; text-align:center; } #wrapper{ margin:0 auto; padding:0 auto; text-align:left; } #header{ width:100%; margin:0px; padding:0px; float:left; background: url('../images/bg/bg_whitegrey.jpg'); height: 71px; } #headmenu { float: left; width: 100%; height: 30px; background: #333333; margin:0px; padding:0px; } #leftmenu{ float: left; width: 210px; background: #f3f3f3; margin:0px; padding:0px; } #rightcontent{ float:right; min-width:700px; margin:0px; padding:0px; background:#FFF; } #footer{ clear:both; margin:0 auto; padding:0 auto; text-align:left; background: #333333; height: 24px; } </style> <body> <div id="wrapper"> <div id="header"></div> <div id="headmenu"></div> <div id="leftmenu"></div> <div id="rightcontent"> <table border=1> <tr> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> </tr> </table> </div> </div> <div id="footer"></div> </body>
<font class="detailDesc"><font class="css_code"><style> body{ margin:0px; padding:0px; text-align:center; } #wrapper{ margin:0 auto; padding:0 auto; text-align:left; } #header{ width:100%; margin:0px; padding:0px; float:left; background: url('../images/bg/bg_whitegrey.jpg'); height: 71px; } #headmenu { float: left; width: 100%; height: 30px; background: #333333; margin:0px; padding:0px; } #leftmenu{ float: left; width: 210px; background: #f3f3f3; margin:0px; padding:0px; height: 100px; } #rightcontent{ float:right; min-width:700px; margin:0px; padding:0px; background:#FFF; } #footer{ clear:both; margin:0 auto; padding:0 auto; text-align:left; background: #333333; height: 24px; } </style> <body> <div id="wrapper"> <div id="header"></div> <div id="headmenu"></div> <div id="leftmenu"></div> <div id="rightcontent"> <table border=1> <tr> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> </tr> </table> </div> </div> <div id="footer"></div> </body> </font></font>
<font class="detailDesc"><font class="css_code"><style> *{ margin:0px; padding:0px; } body{ margin:0px; padding:0px; text-align:center; } #header{ width:100%; margin:0px; padding:0px; float:left; background: url('../images/bg/bg_whitegrey.jpg'); height: 71px; } #headmenu { float: left; width: 100%; height: 30px; background: #333333; margin:0px; padding:0px; } /* Contents Center */ #leftmenu{ display:inline; width:210px; height:100px; background:#f3f3f3; float:left; } #rightcontent{ display:inline; width:210px; background:#fff; float:left; } #footer{ clear:both; margin:0 auto; padding:0 auto; text-align:left; background: #333333; height: 24px; } </style> <body> <div id="wrapper"> <div id="header">Header</div> <div id="headmenu">Header Menu</div> <ul> <li id="leftmenu">sdaf</li> <li id="rightcontent"> <table border=1> <tr> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> <td> FieldTest </td> </tr> </table> </li> </ul> </div> <div id="footer"></div> </body> </font></font>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง