Forgot Password ??

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

	Registered : 109,037

HOME > Community Zone > Forum > อยากทราบว่า การวางโครงสร้างหน้าเพจใช้ css กำหนดยังไงเหรอครับ

อยากทราบว่า การวางโครงสร้างหน้าเพจใช้ css กำหนดยังไงเหรอครับ

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

nikkie

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

คือ ผมสงสัยว่า การจะเขียนเว็บใช้ DIV กับ CSS มันมีวิธีกำหนดโครงสร้างหน้าเพจยังไงเหรอครับ

แบบว่า อันนี้ เฮด บอดี้ ฟุตเตอร์ เมนูซ้าย เมนูขวา อะไรงี้อะครับ

อย่างถ้าเป็นเทเบิ้ล จับลาก ๆ แล้วเอาภาพจัด ๆ ใส่ มันเห็นภาพ แต่พอมาทำเป็น css+div มันไม่เห็นภาพ เราจะเริ่มต้นปูพื้นให้ก่อนยังไงอะคับ

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

page

Tag : - - - -

Date : 2010-06-28 20:43:06

By : mr_gjm

View : 2380

Reply : 8

No. 1

เอี่ยว

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

ปรกติ div มันจะยาว จนสุดบราวเซอร์ เราต้องกำหนด css เอง มีสองแบบ

คือ จำกัดความกว้าง (width) และใช้ float กำหนดตำแหน่ง และ ตัดความสูงด้วย clear:both ถ้าไม่เคยใช้ลองหาหนังสือหรือ ebook css มาลองอ่านดู ถ้าทำไม่เป็น มันอาจซ้อนกันได้

Date : 2010-06-28 20:57:47

By : pjgunner

No. 2

xxx

โพสกระทู้ ( 3,144 )
บทความ ( 1 )

ยินดีต้อนรับสู่ป่าดงดิป (div)

Date : 2010-06-28 23:15:55

By : tungman

No. 3

Mink

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

ขั้นที่ 1 กำหนด div กรอบนอกทั้งหมดโดย

margin:0 auto;

และกำหนดความกว้าง

ขั้นที่ 2 สร้าง div ขึ้นมา 2 ส่วน

โดยส่วนแรก คือ Head โดยใส่ div จากนั้นกำหนด ขนาดความกว้าง ความสูงของ Head

ส่วนที่ 2 คือใส่ div กรอบนอกคลุม menu body กำหนดความกว้างด้วย

----การสร้าง menu และ body

1. สร้าง Div ขึ้นมา 3 อัน ***กำหนด float:left; ****สำคัญมากต้องกำหนด เพื่อให้มันชิด จากนั้นใส่ id หรือ class ของ div แต่ละอัน กำหนด ความกว้างและความสูงของ div แต่ละอัน โดยขนาดความกว้างทั้งหมดต้องไม่เกินขนาดความกว้าง div ข้างนอก

*** แนะนำออกแบบใน photoshop ก่อนตามขนาดจริงจากนั้นวัดขนาดใน photoshop แล้วเอามากำหนดขนาดจริงในการดีไซน์เว็บ

ขั้นที่ 3 ส่วน Foot

สร้าง div ขึ้นมาอีกอันต่อจาก div ตอนขั้นที่ 2 แล้วกำหนด ความกว้างและความสูง

รูปแบบ

Code (PHP)

<div style{margin:0 auto;}>
     <div>
           <ใส่ head ตรงนี้>
     </div>
     <div>
          <div style{float:left;}>เมนูซ้าย</div> ****กำหนดความกว้างด้วย
         <div style{float:left;}>body</div> ****กำหนดความกว้างด้วย
        <div style{float:left;}>เมนูขวา</div> ****กำหนดความกว้างด้วย
    <div>
    <div>
         <ใส่ foot ตรงนี้>
    <div>
</div>

Date : 2010-06-29 09:39:14

By : atomy_mink

No. 4

xxx

โพสกระทู้ ( 3,144 )
บทความ ( 1 )

ท่านลืม clear:both หรือเปล่าครับ

Date : 2010-06-29 09:44:17

By : tungman

No. 5

Mink

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

ไม่ได้ลืมค่ะ เพราะที่เคยทำเวลา clear:both ทีไรมันชอบมีปัญหากับการใช้ margin ทุกทีกับ IE ปกติแต่ Firefox นี่ไม่ margin ตามอ่ะค่ะ และยังแก้ไม่ได้ด้วย เลยตัดใจไม่ใช้ค่ะ ยังไงรบกวนท่านผู้รู้ช่วยบอกวิธีแก้หน่อยนะคะ

Date : 2010-06-29 10:09:55

By : atomy_mink

No. 6

เอี่ยว

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

ก็ <br style="clear:both" /> หรือ ใช้ แท็คอื่น ก็ได้

ปรกติผมเขียนแบบนี้

<div> //container
<div> // head (margin:0 auto)</div>
<div> //body (margin:0 auto)
<div> //?? (float: ?)</div>
<div> //?? (float:?)</div>
<hr> // clear
<div> // footer</div>
</div>// end container

Date : 2010-06-29 11:34:26

By : pjgunner

No. 7

Mink

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

ขอบคุณค่ะเดี๋ยวลองดู

Date : 2010-06-29 12:47:59

By : atomy_mink

No. 8

nikkie

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

ไว้จะลองทำดูครับ ขอบคุณครับ

Date : 2010-06-29 14:29:35

By : mr_gjm

ค้นหาข้อมูล

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

Re : อยากทราบว่า การวางโครงสร้างหน้าเพจใช้ css กำหนดยังไงเหรอครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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