สอบถามเรื่องการใช้งาน tag div กับ ไฟล์ css ครับ

คือว่าตอนนี้ผมกำลังออกแบบเว็บของตัวเองอยู่ครับ จะทำแบบ CSS แต่ว่ามีปัญหาตรงที่เวลาสร้าง Layout ตอนที่ใช้ tag div กับ ไฟล์ styles.css ตอนออกแบบแล้วแต่ละ Browser แสดงผลไม่เหมือนกัน (แทบจะไม่ใกล้เคียงกันเลย) ผมลองหาหนังสือที่เกี่ยวกับการเขียน CSS ดูแล้วก็ยังงงๆอยู่ครับ เลยจะขอรบกวนปรึกษา รูปด้านล่างเป็นรูปแบบเลย์เอ้าท์ แบบที่ผมต้องการให้มันเป็น เวลาผมเขียนโดยอ้าง id ของ div น้น ถ้าเป็น IE7 จะแสดงผลตามที่ผมต้องการ IE6 Firefox Opera มันจะดิ้นไปดิ้นมาไม่อยู่ตรงตำแหน่งที่เราต้องการ ช่วยแนะนำด้วยนะครับว่าควรเขียนยังไง
 

แล้วก็อีกคำถามคือ layout แบบนี้มันเขียนให้มันซ้อนกันบางส่วนได้ด้วยหรือป่าวครับ ถ้าได้มันเขียนยังไงครับ

ลิ้งค์นี้เป็นไฟล์ที่ผมเขียนรบกวนดูให้หน่อยนะครับ
http://www.nitcomp.com/downloads/nitcomp.rar

26 ธ.ค. 2551 5 4,237

#1

พอดีผ่านมาอ่านเจอกระทู้นี้
ผมเองก็สนใจ CSS template เหมือนกันครับ ก็เลยลอง dowload โค้ดดังกล่าวมาลองรันดูที่เครื่อง

ปรากฏว่า ie6 แสดงผลไม่เหมือน chrome กับ firefoxจริงๆ
ผมเลยลองไปดูไฟล์ style.css ก็เลยแก้บางบรรทัดนิดหน่อย เพราะคิดว่าที่ content มันล้นใน ie อาจเกิดจากความกว้างของ content เกินกว่าที่ควรจะเป็น ผมเลยลองลดขนาด maincontent ใน style.css ดูเหลือ 720 plxs ก็ปรากฏว่าแสดงผลใกล้เคียงกันแล้วครับ

จริงๆ แล้วก็ไม่ได้มีความรู้เรื่องนี้เท่าไหร่ เพียงแต่มาเล่าอันที่ผมปรับแล้วได้ผลยังไงให้น่ะครับ
ขออภัยที่รู้สึกจะไม่ได้ช่วยอะไรเลย แหะๆ
ปกติผมเข้าไปอ่านความรู้เกี่ยวกับ css ที่เวบนี้น่ะครับ http://www.divland.com/

คงต้องรอผู้รู้ css ทั้งหลายมาช่วยตอบอีกที
#2

ข้อผิดพลาดของ CSS ที่เกิดขึ้น เกิดจากการที่กำหนด float ให้กับ เมนูด้านซ้าย แต่ไม่ได้กำหนด float ให้กับส่วน content ด้านขวาครับ เนื่องจากปกติแล้ว div มักจะถูกกำหนดให้ขึ้นบรรทัดใหม่อยู่แล้ว มันจึงไม่ได้ยู่ในตำแหน่งที่้ต้องการถึงแม้ว่าจะไดกำหนดตำแหน่งอย่างถูกต้อง การกำหนด CSS ให้ง่ายและแม่นยำ สามารถทำได้โดยการกำหนด ขนาดและตำแหน่งที่ชัดเจนให้กับแต่ละ element ลงไปเลยครับ ซึ่งจะทำให้การแสดงผลได้เหมือนหรือใกล้เคียงกันในทุก Browser

การแก้ไข ก็ใส่ float:right; ให้กับ maincontent

มีจุดสังเกตุอีกอย่งหนึ่งคือ เมื่อกำหนดตำแหน่งให้กับ maincontent แล้ว เราอาจได้ตำแหน่งของ footer ที่ผิดไป การแก้ไขให้ใส่ clear:both; ให้กับ footer ด้วยครับ เพื่อไม่ให้มีอะไรอยู่ด้านซ้ายหรือขวาของมัน

จริงๆแล้ว ลีักษณะ layout ที่กล่าวมาก็ไม่ใช่จะถูกไปซะทั้งหมด การจัด layout เพื่อให้ง่ายต่อการออกแบบควรจัด layout เป็นชั้นๆไป เพื่อใให้ง่ายต่อการควบคุมครับ (เหมือนตาราง)

<div class="container">
    <div class="header"></div>
    <div class="warper">
        <div class="left-content"></div>
        <div class="right-content"></div>
    </div>
    <div class="footer"></div>
</div>

ส่วนการทำให้ layout มันซ้อนกัน สามารถทำได้โดยกำหนด position เป็น absolute ครับ วิธีนี้จะทำให้ element ไม่อยู่ภายใน element ใดๆ แต่ก็เหมาะกับการกำหนดขนาดให้คงที่เท่านั้น เนื่อง element ที่อยู่ถัดไปจะไม่นำเอาขนาดของ element นี้มาคำนวณตำแหน่งด้วย
#3

ขอบคุณสำหรับความรู้ใหม่ครับ
#4

ขอบคุณมากเลยครับสำหรับคำตอบที่เป็นประโยชน์มากสำหรับผม

#5
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^