หน้า: [1] 2 3 4 5 6 7 8 ... 11
 
ผู้เขียน กระจู๋: มาเรียน CSS กันเถอะ (แตกหน่อ)  (อ่าน 42360 ครั้ง)
0 สาวก และ 1 ขาจร กำลังดูกระจู๋นี้
คิดอยู่นานละ ว่าทำงานด้านนี้ จะมาแลกเปลี่ยนความรู้เรื่องนี้กับคนอื่น

การเขียน 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 มีขนาดใหญ่ขึ้นด้วยความไม่จำเป็นนะครับ  กรี๊ดดดดด

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

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

กรี๊ดดดดด กรี๊ด จานบิ๊กปรากฏกายแล้ว
บันทึกการเข้า

อาชีพปัจจุบันคือเปิดร้านสกรีนเสื้อครับ ช่วยอุดหนุนด้วยเด้อ
เอาอีกๆๆ กรี๊ดดดดด
บันทึกการเข้า

Reading Learning & Sharing
วันนี้มาต่อกันด้วยเรื่องของ 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  อ๊าง~
« แก้ไขครั้งสุดท้าย: 02 ก.พ. 2010, 11:25 น. โดย blackRabbit » บันทึกการเข้า

วิธีแก้ Box model bug อันลือชื่อของ IE6  กรี๊ดดดดด
แต่จริงๆ ตูว่า อย่าไปใช้ IE6 นั่นแหละจะดีที่สุด ฮ่าๆ ฮือๆ
« แก้ไขครั้งสุดท้าย: 02 ก.พ. 2010, 11:27 น. โดย ณต » บันทึกการเข้า
เรื่อง 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 ได้ด้วยเหรอเนี่ย สุดยอดเจ๋งจ๊าบ โวย
บันทึกการเข้า
กรี๊ดดดดด อู้ย.. คืออะไรอะ ไม่รู้จัก
ใช้ได้กะไออีอย่างเดียวหรือว่ามีกรณีอื่นอีก
บันทึกการเข้า

อาชีพปัจจุบันคือเปิดร้านสกรีนเสื้อครับ ช่วยอุดหนุนด้วยเด้อ
หน้า: [1] 2 3 4 5 6 7 8 ... 11
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!