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

[มังกร]

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

การเขียน 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>, <strong> แล้วก็ เป็นต้น

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

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

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

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

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

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

โค้ด:

display:block;

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

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

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

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

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

เอาอีกๆๆ

[มังกร]

วันนี้มาต่อกันด้วยเรื่องของ 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 นั่นแหละจะดีที่สุด

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

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

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

[มังกร]

ไม่ดี 

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

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

[มังกร]

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

ใช้ Dreamweaver ครับ

[มังกร]

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

ตัว 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");
}

[มังกร]

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

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