อ่านคำอธิบายก่อนแล้วค่อยไปดู code ข้างล่างนะครับcode นี้จะให้เรามี Sub Header สวยๆ แบบที่แต่งเอาได้ ไม่ต้องซ้ำกับใครๆ โดยการทำงานของ code ก็คือ จะสร้างภาพพื้นหลัง ไว้ที่ส่วนของ sub header และซ่อนตัวหนังสือที่แสดงอยู่ ดูที่นี่เพื่อให้เห็นตัวอย่างนะครับ
http://dekitclub.hi5.com แบบที่ผมใช้น่ะแหละ กล่องย่อยๆ จะมีรูปแบบ design ที่เป็นของเราเอง ใครสงสัยอะไรตรงไหนก็ถามกันมาได้เลย
ตัวอย่างภาพภาพที่ใช้ควรจะมีขนาดกว้างไม่เกิน 456 pixel นะครับ ไม่งั้นจะล้นขอบ ตามตัวอย่างนี้
วิธีใช้#recent-updates h1 {
text-indent:-5555px;
background:url(
.....เปลี่ยนตรงนี้เป็น url ของรูปภาพที่เราต้องการ....);
background-position:right;
background-repeat:no-repeat;
}
ภาคผนวก#recent-updates
หมายถึง กล่องที่แสดงอัพเดทโปรไฟล์ของเรา จะอยู่ทางด้านซ้าย#lifestyle
หมายถึง หมายถึง เกี่ยวกับฉัน จะอยู่ทางด้านซ้าย#photoAlbums
หมายถึง อัลบั้มภาพ จะอยู่ทางด้านขวา#groups
หมายถึง กลุ่มเพื่อน จะอยู่ทางด้านซ้าย#common-friends
หมายถึง เพื่อนที่เกี่ยวของ อยู่ด้านขวาบน#friends
หมายถึง เพื่อนของฉัน#user-fives
หมายถึง ไฟว์จากเพื่อน#interests
หมายถึง ความสนใจ#journalDetail
หมายถึง บันทึก บทความ#comments
หมายถึง คอมเม้นต์จากเพื่อน/* ------------ SUB HEADER by dekitclub.com ------------*/
.section h1 {margin-top:12px;height:67px;width:456px}
#recent-updates h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif);
background-position:right;
background-repeat:no-repeat;
}
#lifestyle h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219170918a49552-bAbo.gif);
background-position:right;
background-repeat:no-repeat;
}
#photoAlbums h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/20081219171148df4ff7-bHall.gif);
background-position:right;
background-repeat:no-repeat;
}
#groups h1 {
text-indent:-5555px;
background:url(http://www.dekitclub.com/upload/_temp/200812191709184fc609-bGrp.gif);
background-position:right;
background-repeat:no-repeat;
}
#common-friends h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif);
background-position:right;
background-repeat:no-repeat;
}
#friends h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219171148cd4470-bSo.gif);
background-position:right;
background-repeat:no-repeat;
}
#user-fives h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/20081219170918450226-bFive.gif);
background-position:right;
background-repeat:no-repeat;
}
#interests h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/2008121917114831d96b-bInt.gif);
background-position:right;
background-repeat:no-repeat;
}
#journalDetail h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/2008121917114893b49b-bWord.gif);
background-position:right;
background-repeat:no-repeat;
}
#comments h1 {
text-indent:-5555px;
background: url(http://www.dekitclub.com/upload/_temp/200812191709188e60c7-bCom.gif);
background-position:right;
background-repeat:no-repeat;
}
.section-separator {display:none; }