Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > แนะนำเทคนิคการออกแบบ layout เว็บไซต์ให้อยู่กลางหน้าจอ ด้วย Div และมีการใช้ float:left เผื่อคนทั่วไปสนใจ...

แนะนำเทคนิคการออกแบบ layout เว็บไซต์ให้อยู่กลางหน้าจอ ด้วย Div และมีการใช้ float:left เผื่อคนทั่วไปสนใจ...

เริ่มหัวข้อใหม่

chineji

โพสกระทู้ ( 318 )
บทความ ( 2 )

ตัวอย่าง จุดสำคัญอยู่ที่ overflow:hidden ชึ่งช่วยให้ div layout สามารถครอบ div อื่นๆที่มีการใช้ float:left ได้

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ออกแบบเว็บด้วย div + css </title>
<style type="text/css">
.fix-footer{
	position:fixed;left:0px; bottom:0px; height:50px; width:100%;
	background-color:#000000;color:#FFFFFF;
	filter:alpha(opacity=75);-moz-opacity: 0.75;opacity: 0.75;
	z-index: 99;
}

#layout{margin:auto;width:1024px; overflow:hidden; background-color:#CCC}
#head{ width:1010px; height:150px;background:#666; margin:auto;float:left;}
#body{ width:1010px; background:#CCC;float:left;}
#left{ width:200px;  background:#9C0;float:left;}
#right{width:810px;  height:400px; background:#FFF; float:left;}
#footer{width:1010px; height:80px;background:#666; margin:auto;float:left; text-align:center;}

#left-login{width:190px;height:200px;float:left; background:#57A609; margin:3px;}
#left-menu{width:190px;height:200px;float:left; background:#57A609; margin:3px;}
</style>
</head>

<body>
<div id="layout">
	<div id="head">header content</div>
	<div id="body">
		<div id="left">
        	<div  id="left-login">form login</div>
            <div  id="left-menu">menu</div>
        </div>
		<div id="right">right content</div>
	</div>
    <div id="footer">footer content</div>
</div>
<div class="fix-footer">
<p align="center">กำหนดข้อความ รูปภาพ หรือ ป้ายโฆษณาของคุณที่ตรงนี้</p>
</div>
</body>
</html>

หากไม่มี overflow:hidden; ก็ยังแสดงผลได้ปกติ ยังอยู่กลางหน้าจอได้ แต่แบคกราวของ layout จะหายไป

สำหรับ div body เราก็สามารถใส่แบคกราวที่เป็นรูปภาพ และข้อมูลต่างๆได้ตามปกติ และมันจะขยายตามความสูงของหน้าจอก็ต่อเมื่อเราไม่กำหนดความสูงความสูงในส่วนของ div left และ div right ซึ่งตอนนี้กำหนดไว้เป็น 400px; เพื่อทดสอบดู
สำหรับตอนใช้จริงก็ควรจะสร้าง div ลูกเข้าไปข้างใน div left และ div right อีกที และกำหนด ให้มี margin:3px; จะมากจะน้อยก็แล้วแต่ เพื่อไม่ให้มันอยู่ติดขอบเกินไปดังตัวอย่าง สร้าง div ไว้ใส่ฟอร์มล็อกอิน และ ใส่ left menu

สำหรับ div layout จะต้องกำหนดให้ใหญ่กว่า ขนาดของ div ลูกที่อยู่ข้างในนิดหน่อยเพื่อให้มันไม่ดันกัน และในตัวอย่างผมใส่ไว้เพื่่อให้เห็น
ว่า div layout มันครอบ div อื่นๆอยู่จริง ส่วนเวลาใช้งานจริงก็แค่ เอา background-color:#CCC ออก
หรือเปลี่ยนเป็น background-url:(พาร์ทรูปแบคกราวที่ต้องการ);

ก็ประมาณนี้แหล่ะ เขียนไว้เผื่อนใครหาวิธีออกแบบด้วย css และ div ซึ่งผมก็ไม่ได้เก่งอะไรแค่พอทำได้นิดหน่อย สำหรับคนที่มีเทคนิคดีๆก็แนะนำกันบ้างนะ

ปล.ตอนแรกที่ผมเคยเขียน css ใหม่ๆก็จะกำหนด ขนาดความสูงใสส่วน left กับ right ไว้เลย ซึ่งพอมีข้อมูลเยอะกว่าขนาดที่กำหนดไว้มันก็จะเกินออกไปจาก layout ที่เราวางไว้ซึ่งไม่สวยงาน

Tag : PHP, HTML/CSS

Date : 2011-03-18 17:36:59

By : chineji

View : 5735

Reply : 4

No. 1

TC Admin

โพสกระทู้ ( 74,058 )
บทความ ( 838 )

เคยคิดจะใช้ CSS มาออกแบบเว็บไซต์อยู่ครับ แต่รู้สึกมันจะเสียเวลานิดหนึ่ง ก็เลยใช้ Table นี่แหละ ง่ายดี ๆ

Date : 2011-03-18 17:48:31

By : webmaster

No. 2

Guest

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

Date : 2011-05-30 15:52:40

By : sombody

No. 3

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 8 )

ใช้ div+css นี่ดีนะครับ เวลาทำแล้วมันไม่ไปเป็นก้อนๆ มันเหมือนอิฐบล็อคแยกวางสลับอะไรได้อิสระมาก
ยิ่งเวลาทำ page for mobile เราไม่ต้องมาลาก table วาง layout ใหม่เลย เอา div ชุดเดิมแต่ง css ใหม่
แจ่มจรัส

Date : 2011-05-30 16:03:06

By : mr.v

No. 4

KenJeRoKung

โพสกระทู้ ( 126 )
บทความ ( 0 )

แนะนำให้ใช้ JavaScript หาความกว้างของจอแล้วหาจุดกลึ่งกลางดีกว่าครับ

Date : 2011-05-30 16:06:40

By : KenJeRoKung

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : แนะนำเทคนิคการออกแบบ layout เว็บไซต์ให้อยู่กลางหน้าจอ ด้วย Div และมีการใช้ float:left เผื่อคนทั่วไปสนใจ...

รายละเอียด

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

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00