[How to!] แต่งกล่องcommentด้วยCSS
posted on 15 Mar 2011 18:52 by eacon1918สวัสดีค่ะะ จากที่บอกไว้เอนทรี่ที่แล้ว คราวนี้จะทำ how to ค่ะ
.
เป็นอันแรกของชีวิตเลยนะเนี่ย... ยังไงก็จะพยายามเต็มที่ค่ะ TvTb
(ถ้าพิมพ์ผิดยังไงก็ขอโทษด้วยนะคะ.. ภาษาไทยอ่อนแอ orz)
.
.
หลายคนอาจจะใช้วิธีเอาโค้ดมาจากท่านอื่นทั้งหมด ลองแต่งดูบ้างก็สนุกดีนะคะ ><
โค้ด CSS ง่ายกว่าที่คิดค่ะ (ประสบการณ์ตรงเลย XD)
.
.
ว่าแล้วก็ไม่ขอนอกเรื่อง(เดี๋ยวมันจะยาว...XD) เข้าเรื่องเลยแล้วกัน
.
เริ่มด้วยรูปนี้กันเลยยย
แปะรูปกล่องเม้นแบบปกติไว้นะคะ
เพื่อความสดวกในการดู... หรือเปล่า (...)
.
ทีนี้ก็มาเริ่มอธิบายกันเลยยย
เราอาจจะเรียกอะไรผิดไปบ้าง เราเรียกตามความเข้าใจของเรานะคะ ถ้าผิดก็ขอโทษด้วย ;w;
บางส่วนเราอาจจะไม่ได้รู้ทั้งหมดนะคะ แต่คาดว่าแค่นี้ก็น่าจะพอแล้ว =w=”
แล้วก็ จะมีบางส่วนที่เพิ่มเติมเข้าไปนะคะ จะเขียนกำกับไว้ข้างล่างโค้ดนั้นๆค่ะ
.
ส่วนที่เป็นโค้ดจะทำเป็นสีไว้นะคะ.. เผื่อจะดูง่ายขึ้น TvTb
.
.
**แล้วก็มีสิงที่ต้องไม่ลืมเวลาเขียนโค้ด CSS อยู่นะคะ**
.
- อย่าลืมใส่ ; หลังจบโค้ดย่อย
- ทุกโค้ดหลักๆ จะต้องมี {} คร่อมอยู่
- ดูเว้นวรรคด้วยนะคะ ถ้าใส่เกินหรือลืมใส่โค้ดก็จะผิดไปเลย
- เวลาใส่โค้ดสี อย่าลืม # นะคะ =w=
.
.
.
/* Comment Form */
.
.
.
#commentform อันนี้คือส่วนโครงสร้างของกล่องค่ะ ก็คือพื้นที่สีเทาๆทั้งหมดนั่นเอง
#commentform อันนี้คือส่วนโครงสร้างของกล่องค่ะ ก็คือพื้นที่สีเทาๆทั้งหมดนั่นเอง
{
.
width:100%; ขนาดของตัวกล่อง จะใส่เป็นค่า px ก็ได้นะคะ แต่อย่าให้ใหญ่กว่าหน้า page ไม่งั้นมันจะแหกค่ะ
width:100%; ขนาดของตัวกล่อง จะใส่เป็นค่า px ก็ได้นะคะ แต่อย่าให้ใหญ่กว่าหน้า page ไม่งั้นมันจะแหกค่ะ
.
background:#EEE; สีของตัวกล่อง ในที่นี้ถ้าเปลี่ยนโค้ดสีแล้วสีเทาทั้งหมดก็จะเปลี่ยนค่ะ หรือถ้าไม่อยากให้มีพื้นหลังก็ใส่คำว่า none ลงไปค่ะ หรือถ้าอยากใส่เป็นรูปก็ให้เปลี่ยนจากตัวโค้ดสีเป็น url(ลิงค์รูป) no-repeat
background:#EEE; สีของตัวกล่อง ในที่นี้ถ้าเปลี่ยนโค้ดสีแล้วสีเทาทั้งหมดก็จะเปลี่ยนค่ะ หรือถ้าไม่อยากให้มีพื้นหลังก็ใส่คำว่า none ลงไปค่ะ หรือถ้าอยากใส่เป็นรูปก็ให้เปลี่ยนจากตัวโค้ดสีเป็น url(ลิงค์รูป) no-repeat
*ส่วนที่เขียนว่า no-repeat จะเปลี่ยนก็ได้นะคะ ในที่นี้คือเราไม่ต้องการให้รูปมันซ้ำค่ะ ถ้าอยากให้ซ้ำก็เอา no- ออกไปค่ะ
.
float:left; ถ้าอยากให้กล่องเม้นของเราไปชิดกับด้านขวาก็เปลี่ยนเป็น right ได้ค่ะ แต่ถ้าตั้งค่า 100% แล้วถึงเปลี่ยนก็จะไม่เกิดอะไรค่ะ
float:left; ถ้าอยากให้กล่องเม้นของเราไปชิดกับด้านขวาก็เปลี่ยนเป็น right ได้ค่ะ แต่ถ้าตั้งค่า 100% แล้วถึงเปลี่ยนก็จะไม่เกิดอะไรค่ะ
.
.
*เพิ่มเติม ถ้าต้องการเปลี่ยนสีตัวอักษรก็ให้ใส่ color:(โค้ดสี); ลงไปค่ะ
แล้วก็ถ้าเกิดว่าอยากใส่ความสูงก็ ให้ใส่ height:(ขนาด)px; ลงไปค่ะ
.
}
.
.
.
#commentform form
#commentform form
{
.
.
margin:5px; ระยะห่างของตัวกล่องทั้งหมด(พื้นที่สีเทาๆอะค่ะ)จากขอบ
.
.
}
.
.
.
#commentform h3 ส่วนนี้คือคำว่า comment ที่อยู่ทางด้านมุมบนซ้ายค่ะ
{
.
font-size:16px; ขนาดของตัวอักษร
.
font-weight:bold; กำหนดตัวบางตัวหนาค่ะ
.
.
*เพิ่มเติม เปลี่ยนสีฟอนต์ได้นะคะ ใส่ color:(โค้ดสี);
.
}
.
.
.
#commentform .formrow
{
.
border-top:1px solid #DDD; เส้นกั้นในกล่องเม้นของเราค่ะ ถ้าลบบรรทัดนี้ออกก็จะไม่มีเส้น 1px ที่เห็นอยู่คือความหนาของเส้นค่ะ ส่วนถ้าอยากเปลี่ยนรูปแบบเส้นจากตรงๆเป็นอย่างอื่นก็ให้เปลี่ยนคำว่า solid เป็นอย่างอื่นตามที่ต้องการเลยค่ะ แล้วก็ถ้าจะเปลี่ยนสีก็เปลี่ยนตรงโค้ดได้เลย อ่อ อีกอย่าง อย่าลืมเว้นวรรคนะคะ =w=
border-top:1px solid #DDD; เส้นกั้นในกล่องเม้นของเราค่ะ ถ้าลบบรรทัดนี้ออกก็จะไม่มีเส้น 1px ที่เห็นอยู่คือความหนาของเส้นค่ะ ส่วนถ้าอยากเปลี่ยนรูปแบบเส้นจากตรงๆเป็นอย่างอื่นก็ให้เปลี่ยนคำว่า solid เป็นอย่างอื่นตามที่ต้องการเลยค่ะ แล้วก็ถ้าจะเปลี่ยนสีก็เปลี่ยนตรงโค้ดได้เลย อ่อ อีกอย่าง อย่าลืมเว้นวรรคนะคะ =w=
.
padding:2px; ระยะห่างของเส้นกั้นกับตัวหนังสือ
.
padding:2px; ระยะห่างของเส้นกั้นกับตัวหนังสือ
.
}
.
.
.
#commentform label อันนี้คือส่วนข้อมูลของคนที่ล็อกอินค่ะ
{
.
float:left; ถ้าอยากให้ส่วนของคำว่า Name Website Comment ชิดด้านขวาก็ให้เปลี่ยนเป็น right
float:left; ถ้าอยากให้ส่วนของคำว่า Name Website Comment ชิดด้านขวาก็ให้เปลี่ยนเป็น right
.
width:150px; อันนี้คือความห่างของแถบตั้งแต่ eacon ในรูป รวมถึงตัว textarea อีโม และปุ่ม Submit จากขอบกล่องค่ะ ถ้าลดค่านี้ลงมันก็จะเลื่อนเข้าไปใกล้ขอบฝั่งซ้ายมากขึ้น..
width:150px; อันนี้คือความห่างของแถบตั้งแต่ eacon ในรูป รวมถึงตัว textarea อีโม และปุ่ม Submit จากขอบกล่องค่ะ ถ้าลดค่านี้ลงมันก็จะเลื่อนเข้าไปใกล้ขอบฝั่งซ้ายมากขึ้น..
.
}
.
.
.
#commentform input.textbox ช่องกรอกข้อมูลสำหรับผู้ที่ไม่ได้ล็อกอิน
{
.
width:150px; ความยาวของช่องค่ะ
.
.
*เพิ่มเติม เปลี่ยนความสูงได้โดยเพิ่ม height:(ขนาด)px;
สามารถใสสี bg ได้ค่ะ ให้ใส่ background:(โค้ดสี); ลงไปค่ะ
แล้วก็ถ้าต้องการใส่เส้นขอบก็ border:1px solid (โค้ดสี); ส่วนนี้แก้ไขได้อีกนะคะ ย้อนไปดูตรง formrow อีกทีถ้าใครลืม =w=
.
}
.
.
.
#commentform textarea พื้นที่สำหรับเขียนคอมเม้นค่ะ กล่องสีขาวของรูปแรก
{
.
width:310px; ความกว้าง (อย่าให้กว้างเกินนะคะ มันจะแหก ;w;b)
.
height:150px; ความสูง
.
.
*เพิ่มเติม เปลี่ยนสี bg ได้ background:(โค้ดสี); ถ้าอยากใส่เป็นรูปก็ให้เปลี่ยนจากตัวโค้ดสีเป็น url(ลิงค์รูป) no-repeat; (เริ่มขี้เกียจ กร๊ากก orz”)
ใส่เส้นขอบได้ border:1px solid (โค้ดสี); เปลี่ยนขนาดกับแบบเส้นได้เหมือนเดิมนะคะ
เพิ่มความห่างระหว่างด้านบนและด้านล่างได้ margin-top:(ความห่าง)px; margin-bottom:(ความห่าง)px;
.
}
.
.
.
*เพิ่มเติม อันนี้เพิ่มใหม่ทั้งแผงเลยนะคะ ;w;b คือในโค้ดที่ให้มาแต่แรกจะไม่มี
.
input ส่วนของปุ่ม B I U Link และ Submit ค่ะ
{
.
background:(โค้ดสี); สีของปุ่มค่ะ ใส่รูปแทนก็ได้ ถ้าจะให้ไม่มี bg ก็ none
.
color:(โค้ดสี); สีตัวหนังสือค่ะ ถ้าไม่อยากเปลี่ยนก็ลบออกได้เลย
.
border:1px solid (โค้ดสี); เส้นขอบค่ะ เปลี่ยนขนาดกับแบบเส้นได้เหมือนเดิมนะคะ ไม่อยากให้มีก็ลบออกค่ะ =w=
.
}
.
.
.
โอเค.. แค่นี้ล่ะค่ะ .. /นอนตาย
เราก็รู้แค่นี้ไม่ได้เก่งอะไรแบบคนอื่น แค่อยากจะเอาความรู้น้อยๆของเรามาแบ่งปันน่ะค่ะ
.
ถ้าอยากจะเพิ่มเติมหรือจะติชมอะไรยังไงก็ได้เลยนะคะ...
หรือถ้าผิดตรงไหนหรือตรงไหนไม่ดีก็บอกได้นะคะ...
อาจจะมีพิมพ์ผิดบ้าง.. ภาษาไทยอ่อนแอ TvT (รอบ2 ...) แต่ตรงโค้ดไม่น่ามีผิด
.
ไปล่ะค่ะ กำลังติดเกม 555 บายยย
.
.
ปล.ขอบคุณสำหรับเม้นเอนทรี่ที่แล้วนะคะ ไม่รู้จะตอบอะไร ;v;
edit @ 15 Mar 2011 20:54:34 by eacon
edit @ 16 Mar 2011 22:03:51 by eacon
edit @ 24 Dec 2011 20:24:34 by eacon
edit @ 1 Jan 2012 11:28:40 by eacon
Tags: comment, css, how to175 Comments
ขอบคุณนะคะ
#1 By iiem on 2011-03-15 21:00