ฟอนต์ฟอรั่ม

เห็นมีกระทู้เกี่ยวกับ CSS หลายอันแต่ลองอ่านดูแล้วแต่ก็ขอถามซ้ำครับ    ผมพอใช้ CSS เป็นแค่ทำสี ทำ font จัด background ให้นิ่ง และเลื่อน position นิดหน่อย ส่วนใหญ่ผมจะใช้ Table มากกว่า และเมื่อผมเจอระบบ layer (DIV) เลยมึนไปหมดเลย เหมือนหัดทำเว็บใหม่หมดเลย

เลยมีคำถามเกริ่นก่อนถามเกี่ยวกับ CSS เลยครับ

• ใช้ Layer จะมีปัญหาเรื่อง layout มั้ยครับ อาทิเช่น เมื่อเกิดการขยายกรอบ(กรอบยืดตามข้อความที่เพิ่มขึ้นโดยที่เราไม่รู้ว่ายืดเท่าไหร่) layer อื่นจะกระทบหรือเปล่า
• CSS (สำหรับ Layer) ทำทุกอย่างได้เหมือน Table หรือไม่

--------------------------------------
เมื่อผมเลือกใช้ ระบบ layer แล้ว
คำถามคือ
ผมจะทำให้อยู่ตรงกลางยังไงครับ ถ้าผมกำหนดขนาด กว้าง 780 แต่ใช้จอ Resolution สูงกว่า 800*600
(ถ้าเป็น table ผมกำหนด Table หลักเป็น 100% แล้วซอยย่อยเป็น 3 col และค่อยกำหนด col. ตรงกลางเป็น 780 px เลย)


ขอโทษที่ไม่ยอมอ่านตามขั้นตอนครับ ลองดูแล้วมึนไปหลายรอบเลยครับ ทั้ง Wordpress ทั้ง CSS ถ้าศึกษาเต็มที่คงหลายเดือน ขอลัดถามเป็นส่วนๆเถอะครับ  :44:

layer โดยปกติมันจะซ้อนๆกันขึ้นมานะครับ ดังนั้นถ้ามี layer ที่มีตัวอักษรติดกันเป็นพรืด มันก็ระเบิดไปแค่ layer นั้น layer เดียว ไม่ไปดัน layer อื่นๆซึ่งอยู่คนละระดับกันครับ (นอกจากจะลืมปิด tag div เอง  :08:)

css div ทำทุกอย่างได้ค่อนข้างครอบคลุมระดับเดียวกับ table นะครับ แต่ถ้าเป็นพวกตารางแบ่งสีซ้อนๆกัน มี colspan rowspan ด้วยแล้ว ผมก็ยังคงใช้ table อยู่ครับ  :08:

ส่วนตัว center ของ div มันต้องมีสองขั้นครับ (ถ้าเป็น table จะสั่ง <table align=center> ได้เลย) มันจะมีตัวนอกที่กำหนดให้ center ตัวที่อยู่ข้างในอีกที

<div id="container">
<div id="content">
content content content
</div>
</div>

#container {position: relative;text-align: center;} ตัวที่อยู่ในนี้จะโดนบังคับให้ center หมด
#content {position: relative;text-align:left;margin:0 auto;width:780px;}"> เพื่อไม่ให้ content จริงๆที่เราต้องการแสดงด้านในโดน center ไปด้วย ก็ใช้ text-align:left ครับ

หรือจะใส่ไว้ใน body เลยก็ได้เช่น

body {position:relative;text-align:center;}
#content {position:relative;margin:0 auto;width:780px;text-align: left;}

ผมเป็นเหมือนลุงเลย์แหละครับ
ตอนแรกก็มึนตึ๊บ ไปๆมาก็เลยใช้วิธีผ่าทางตันแม่งซะเลย
"ถ้าเราทำ div ไม่เป็น แล้วเราจะกระแดะไปทำทำไม"

วิธีการก็คือจับส่วน content อัดเข้าไปใน table (แล้วจากนั้นต้องจูนกันอีกโข)
(ขอเตือนมือใหม่ว่าอย่าทำเป็นเปอร์เซนต์ เพราะมันจะ ปวด-หัว-ฉิบ-หาย)

ช่วยได้แค่นี้แหละเฮีย  :08:

ทึ่ต้องมาศึกษาเพราะเจ้า Word press เนี่ยล่ะ ผมทึ่งมากเลยใช้ leyer กับ css กำหนดเพียบ

เลยรู้สึกว่าต้องศึกษาเพิ่มซะแล้ว
(กว่าผมจะความคุม table ได้ดั่งใจนี่นานทีเดียวแหละ)

ลองใช้วิธีร่าง layout ในกระดาษก่อนก็ได้ครับ
แล้วค่อยกำหนดค่า div ว่ามรขนาดเท่าไหร่เท่าไหร่
แยกออกมาเป็น css หลายๆ class ก็ได้ แล้วลองไล่ไปเรื่อยๆ

ปล.
กำลังมึนๆ อยู่เหมือนกันตอนนี้ ทิ้ง php ไปนาน
พอต้องเขียนโปรแกรม เจอ error เลยมึนตึ๊บ
หาอยู่ตั้งเกือบ 2 ชั่วโมง สุดท้าย ลืมปีกกา } ไปแค่ตัวเดียว  :08:

พอจับ div จนถนัดเมื่อไหร่
จะเกลียด tr / td ไปเลยครับ

อ้าว ตอนนี้วีก็ใช้ table, td
แล้วแต่กรณี บางกรณีใช้ div ได้ก็จะใช้ เพราะมันไม่มีผลต่างเวลาดูใน ie/ff

อยากเก่งเท่าคนทำ kubrick จัง :05:

อ้าวเหรอ พี่ก็คิดว่าวีใช้ไอ้นั่นแล้วนะน่ะ :08:


ต่อไปหัดเล่น css แบบถลำตัวมั่งดีกว่า
เพราะดองห้องสมุดไว้หลายอันละ - http://del.icio.us/iannnnn/css
เดี๋ยวจะลองทำเพจ css เล่นสักอัน ไม่รู้จะทำได้แค่ไหน

ธีมอันนี้วีใช้ td :08:

เห็นแล้วอยากทำเลย์เอ้าท์ใหม่ เล่น div ดูบ้าง
แต่เดี๋ยวเค้าำทำ มีสามโปรเจ็คค้างไว้อยู่ :05:

:25:

ไม่ชอบ td ตรงที่ในไำฟร์ฟอกซ์ เวลากด ctrl + คลิกเมาส์ไปที่ td ใดๆในเว็บ
มันจะเป็นกรอบๆช่องๆ ทำให้ไอ้คนแกะเว็บมันรู้เทคนิคหมด
แต่ถ้าเป็น div มันจะไม่มีให้เห็น รู้สึกว่าเว็บนั้นมันเหนือชั้น

แต่ใช้ อทช CSSViewer จิ้มพรวดเดียว รู้โคตรเหง้าสักหลาดหมด

อันที่จริง div ไม่ใช่ tag สำหรับ layer เฉพาะทางนะครับ มันก็แค่คำสั่งจัดรูปแบบลักษณะหนึ่ง

โดยมากจะใช้กะพวกจัดกลาง ชิดซ้าย ชิดขวา อะไรพวกนี้

ตัวกำหนดว่าเป็น layer หรือไม่ ให้ดูที่ css style ของ tag นั้นๆ ครับ (style="position: absolute; top: 0px; left=0px;") ประมาณเนี้ย จะทำให้เป็น layer ลอยขึ้นมาจากระดับปกติ (นึกถึงขนมชั้น)

1 ชั้น (layer) จะมีกี่ object ก็ได้ แต่แต่ละ object จะไม่ซ้อนกันเด็ดขาด วิธีทำให้ซ้อนกันคือเพิ่ม layer โดยกำหนด z-index เข้าไป ว่ามันอยู่ชั้นที่เท่าไหร่

div คืออะไรครับ {หมีโหด}

<div></div>
ค่ะ ก็คือ layer ในดรีมวีพเวอร์นั่นแหละ

อ้างคำพูดจาก: ooooo เมื่อ 04 เม.ย. 2006, 12:59 น.
ไม่ชอบ td ตรงที่ในไำฟร์ฟอกซ์ เวลากด ctrl + คลิกเมาส์ไปที่ td ใดๆในเว็บ
มันจะเป็นกรอบๆช่องๆ ทำให้ไอ้คนแกะเว็บมันรู้เทคนิคหมด
แต่ถ้าเป็น div มันจะไม่มีให้เห็น รู้สึกว่าเว็บนั้นมันเหนือชั้น

ฮ่าๆ อันนี้ผมว่าถ้าคนจะแกะยังไงมันก็ต้องแกะได้ครับ สำหรับหมาย่างแล้วมีแสบกว่านั้นตรงดูชื่อกับตัวแปร cookie ได้ หนอยแน่ะ!!!

กลับเข้าเรื่องๆๆ

ขอมองในมุมมองของการใช้งานละกัน
ผมว่า Table กับ Layer มันมีหลักการเลือกใช้ง่ายๆเลย

•• Table เหมาะกับการจัด layout ที่ข้อมูลข้างในมันยืดหยุ่น เปลี่ยนขนาดได้ เช่นพวก dynamic text ที่เปลี่ยนเรื่อยๆ หรือการจัด layout ที่ทำให้เกิดอัตราส่วนกับการขยายขนาดของ browser (งงมั้ย?)

•• Layer เหมาะสำหรับข้อมูลข้างในที่ขนาดคงที่ (ยืดหยุ่นได้น้อย) เช่นข้อความที่เป็นพวก menu ,title ที่ตายตัว หรือรูปภาพ อะไรทำนองนี้

ไม่เคยใช้เลเยอร์ครับ
ใช้แต่ div :08:

 :08: ผมใช้มั่วๆเอา

งั้นถามเลยแล้วกันครับ

(http://img.f0nt.com/image/2471.jpeg)
แบบนี้ทำยังไงครับ

ใช้ div ซ้อนกันสองชั้นครับ
ชั้นแรกสีเทาสูงเต็มจอ
แล้วบอกให้ข้างในเป็นสีจัมปู  :22:


<div style="height: 100%; width: 100%; background-color: #aaaaaa; text-align: center">
   <div style="height: 100%; width: 780px; background-color: #ff00cc">
       เย่ๆ คิมูจิ๊
   </div>
</div>


อย่าลืมบอก <body> ให้ margin:0px นะครับ

โอ้วขอบคุณมากครับ ถามต่ออีกหน่อย
กำลังจะเปลี่ยนมาใช้ระบบ div แล้ว

แล้วถ้าทำแบบนี้ล่ะครับ
(http://img.f0nt.com/image/2483.jpeg)

ทำแบบพี่แอนก่อน


<div style="height: 100%; width: 100%; background-color: #aaaaaa; text-align: center">
   <div style="height: 100%; width: 780px; background-color: #ff00cc">
       [color=red]*****[/color]
   </div>
</div>


แล้วแก้ **** เป็น div 3 อันไม่ซ้อนกัน

กำหนดประมาณนี้
<div style="height: 100px; width: 780px; background-color: #ff00cc">
บลาๆ
</div>
<div style="height: 100%; width: 780px; background-color: yellow">
บลาๆ 2
</div>
<div style="height: 100px; width: 780px; background-color: green">
บลาๆ 3
</div>


edit 1 อ๊ะ เพิ่งนึกได้
ใช้ table ข้างในง่ายกว่าครับ

http://www.subcide.com/tutorials/csslayout/
อันนี้สอนทีละขั้นจนเสร็จเลยครับ
ลองทำตามดู เจ๋งมาก
เหมือนรวมคำตอบที่จานป๋าถามเลยครับ

http://www.intensivstation.ch/en/templates/
อันนี้มาเป็นแบบเทมเพลตให้เลือกโหลดครับ
ลองดู ลองดู



(ทั้งหมดมาจาก del.icio.us/iannnnn/css)

อยากรู้เรื่อง แต่อ่านมาจนหมดแล้ว เช็ดเข้..............คุยอะไรกันวะเนี่ย :32:

เข้สะอาดเอี่ยม
เพราะลุงจ๋อเช็ดให้

ปฎิวัติ การทำเว็บแบบ table

ยังไงผมก็ถูกใจ table มากกว่า

http://www.icez.net

ตรงไหนสีๆ นั่นใช้ div
ตรงไหนเป็นกรอบพื้นๆ ใช้ table

ผมก็ใช้ table นะ แต่ก็มี div สอดไส้ช็อกโกแลต

เอาเป็นว่าสะดวกอันไหนก็ใช้อันนั้นแล้วกันครับ
ขอให้มันเป็นมาตรฐานสำหรับทุก layout engine ก็พอ

^
วีก็เหมือนกัน :21:
(สอดไส้ช็อกโกแลต)