มาเรียน CSS กันเถอะ (แตกหน่อ)

[Rabbitinblack]

คิดอยู่นานละ ว่าทำงานด้านนี้ จะมาแลกเปลี่ยนความรู้เรื่องนี้กับคนอื่น

การเขียน css บางครั้ง เราน่าจะรู้ก่อนว่า สิ่งที่เราจะกำหนดลงไปนั้น มันจำเป็นหรือเปล่า

ซึ่งตอนแรก ๆ ที่เขียน css เป็นคนที่ชอบใส่

โค้ด เลือกทั้งหมด ขยายเนื้อหา

display:block;

บ่อยมาก แต่หลังจากมาอ่านบทความต่าง ๆ ทำให้ทราบว่า ที่เราใส่ลงไปบางครั้ง มันไม่จำเป็น

เนื่องจาก tag html บางตัวนั้น มีคุณลักษณะของมันเป็น block อยู่แล้ว

ซึ่งหลัก ๆ แล้ว จะมีสองแบบ คือ block และ inline

โดยความแตกต่างของมันก็คือ

block

- จะขึ้นแถวใหม่

- สามารถกำหนด height , width , line-height และพวก margin-top , margin-bottom ได้

- width (ความกว้าง) ของมัน จะเป็น 100% ที่มันจะสามารถกว้างได้

โดย tag html ที่มีค่าเป็น block อยู่แล้ว ก็จะมีพวก <div>, <p>, <h1>, <form>, <ul> แล้วก็ <li> เป็นต้น

มาดูทางฝั่ง inline บ้าง

inline

- จะเริ่มต้นแถวเดิม

- ไม่สามารถเปลี่ยนแปลง height , width , line-height และพวก margin-top , margin-bottom ได้

- width (ความกว้าง) ของมัน จะกว้างเท่ากับความยาวของตัวอักษร หรือภาพ

โดย tag html ที่มีค่าเป็น inline อยู่แล้ว ก็จะมีพวก <span>, <a>, <label>, <input>, <img>, แล้วก็ เป็นต้น

ทีนี้เรามาดูกันว่า เมื่อไหร่เราถึงจะเปลี่ยนจาก block เป็น inline หรือเปลี่ยนจาก inline เป็น block

- อยากให้ inline ขึ้นบรรทัดใหม่

- อยากให้ block อยู่บรรทัดเดิม

- ต้องการกำหนด width (ความกว้าง) height (ความสูง) ของ inline

- ต้องการกำหนดสี background แค่พอดีกับตัวอักษรให้กับ block ที่ไม่ได้กำหนดความกว้าง

ที่จริงการใส่

โค้ด เลือกทั้งหมด ขยายเนื้อหา

display:block;

ให้กับ tag html ที่เป็น block ก็ไม่ได้ทำให้ layout ของเราเสียหายแต่อย่างใด

แต่มันจะทำให้ file css มีขนาดใหญ่ขึ้นด้วยความไม่จำเป็นนะครับ  

จะพยายามเขียนอย่างอื่นเพิ่มเติมอีก ถ้าไม่ขี้เกียจนะครับ หรือใครมีเรื่องไหนอยากให้เขียนก็บอกกันนะครับ

ถ้ารู้เรื่อง จะมาเขียนอธิบายให้ฟัง

[iannnnn]

กรี๊ด จานบิ๊กปรากฏกายแล้ว

[หนุ่ม]

เอาอีกๆๆ

[Rabbitinblack]

วันนี้มาต่อกันด้วยเรื่องของ Box Model มาดูจากรูปเลยแล้วกัน ว่าแต่ละอย่างกำหนดอะไรบ้าง



แต่คราวนี้ IE6 Box Model จะไม่ได้คิดแบบนี้ โดยถ้าเป็นตามปรกติ

ถ้าเรากำหนดดังนี้

โค้ด เลือกทั้งหมด ขยายเนื้อหา


.box {
  width:150px;
  height:60px;
  padding:10px;
  border:5px solid #000000;
  margin:20px;
}


ก็จะได้ตามรูป โดย Box มีขนาด 170px   x   80px แล้วมีขนาด Box ให้ใส่ข้อความ 150px   x   60px

แต่ถ้าเป็น IE6 มันจะเห็นเป็นว่า เรามี Box ขนาด 150px   x   60px แล้วมีขนาด Box ให้ใส่ข้อความ 130px   x   40px

เนื่องจากปรกติ จะคิดว่า width และ height ที่เรากำหนด เป็นขนาด Box ที่เราจะใช้ใส่ข้อความ (ยังไม่รวม padding)

แต่ IE6 นั้น จะคิดว่า width และ height ที่เรากำหนด เป็นขนาด Box (รวม padding แล้ว)

ซึ่งวิธีแก้ก็มีอยู่หลายวิธี เช่น

- ถ้าสามารถเปลี่ยนไปใช้ margin ได้ให้ใช้ margin

- ใช้ div ซ้อน div เช่น

โค้ด เลือกทั้งหมด ขยายเนื้อหา


<div class="div1">
     <div class="div2">
     </div>
</div>


โค้ด เลือกทั้งหมด ขยายเนื้อหา


.div1 { width:150px; }
.div2 { padding:10px; }


โดยให้ div นึงกำหนดความกว้าง และอีก div นึงกำหนด padding

- CSS IE Hack

จบไปอีกเรื่องกับ Box Model 

[ณต]

วิธีแก้ Box model bug อันลือชื่อของ IE6  
แต่จริงๆ ตูว่า อย่าไปใช้ IE6 นั่นแหละจะดีที่สุด

[iannnnn]

เรื่อง padding นี่ต้องเลี่ยงเลย แม่งโหดมาก
ถ้าไม่นับเรื่องการตกแต่งความสวยงามแล้ว
ใช้ double div ไปเลยดีที่สุด

[บักรุ]

CSS Editor ตัวไหนน่าใช้บ้างคัรบ
Top Style ใช้แล้วค้างบ่อยมาก อยากเปลี่ยนเป็นตัวอื่นแล้วครับ..

[iannnnn]

ตอนนี้ตูใช้ Programmer's Notepad
ซึ่งไม่ได้ใบ้อะไรเลย แต่แบบนี้แหละดีแล้ว

[Bellbells]

ไม่ดี 

[บักรุ]

ตอนนี้ตูใช้ Programmer's Notepad
ซึ่งไม่ได้ใบ้อะไรเลย แต่แบบนี้แหละดีแล้ว

ลองโหลดมาเล่นละ แหล่มดี 555

[กันย์]

หลังจากไปติว CSS บ้านพี่แอน กลับมาก็ใช้ตัวนี้แหละ /

[กากก่อเกรียนนู้บ]

ใช้ Dreamweaver ครับ

[Rabbitinblack]

ในการเขียนเว็บ บางครั้งเราก็ต้องการกำหนดว่า ให้มีความสูงต่ำสุดเท่าไหร่ หรือไม่ก็ให้มีความกว้างมากสุดเท่าไหร่

ตัว CSS ที่นำมาใช้ ก็คือ

min-width กับ min-height และ

max-width กับ max-height

แต่มันดันมีปัญหาตรงที่ว่า อีเจ้า IE6 มันไม่รู้จัก

ทำยังไงละทีนี้ วิธีแก้ก็มีหลากหลายกันไป

แต่มีวิธีนึงที่จะมาแนะนำ คือ การเขียน Script มาใช้งานแทน โดย code จะเป็นดังนี้

โค้ด เลือกทั้งหมด ขยายเนื้อหา


#page-wrap{
min-width:800px;
max-width:1000px;
width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}


ก็นำไปประยุกต์ใช้กันต่อไปนะครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา


#page-wrap{
min-width:800px;
width:expression(document.body.clientWidth < 800? "800px" : "auto");
}


[JΛNΣ]

โว้ว มันเอา script มาใส่ใน css ได้ด้วยเหรอเนี่ย สุดยอดเจ๋งจ๊าบ

[iannnnn]

คืออะไรอะ ไม่รู้จัก
ใช้ได้กะไออีอย่างเดียวหรือว่ามีกรณีอื่นอีก