แต่งบล็อกด้วย CSS.. แก้แถวเมนูด้านล่างให้เป็นแนวตั้ง
posted on 29 Nov 2009 15:01 by itbasicโอ้ สวัสดีครับทุกท่าน ผมกลับมารายงานตัวอีกครั้งหลังจากหายไปเกินกว่า 3 อาทิตย์เนื่องจากประสบเหตุ "งานเข้า" =..=
ถ้าใครหลงเข้ามาแล้ว theme ยังไม่เป็นสี "ขาว" ให้กดจิ้ม refresh ได้เลยจ้า หรือเคยเข้ามาในวันสองวันนี้ก็จิ้ม refresh เหมือนกัน
เนื่องจากห่างหายไปนานและกลับมาแบบฉุกละหุก เลยไม่ได้เตรียม tutorial ยาวๆ ไว้ พอดีไปอ่านเจอเมนท์น้อง ซึนเดเระ ตั้งแต่วันที่ 19 นู่น น่าสนใจดี เอนทรี่นี้เลยรวมๆ เอาคำถามที่มีคนถามๆ เข้ามา มาตอบดีกว่า
FAQ by ซึนเดเระ
ไปเห็นบล็อคนี้เข้า ...
http://hetaliaparty.exteen.com/
เลยสงสัยค่ะ ว่าเขาทำธีมยังไง!!
คือเอนทรี่+คอมเมนท์เขาหดให้เหลือแค่นั้นได้ยังไงอะคะ > <
แถบเมนูข้างล่างอะค่ะ ทำยังไงถึงจะเป็นแนวตั้งเหรอคะ~!?
//ตอนแรกลองย้ายทุกอย่างมาข้างล่างหมดเลยค่ะ แต่ปรากฏมันเป็นแนวนอน(เละๆ)หมดเลย ฮา~!!
ตรงส่วนย่อ entry นั้นทำไม่ยากครับ แต่มีข้อเสียหลายอย่าง และต้องแก้กันเยอะเลยขอข้ามไปก่อน
ดังนั้นขอตอบแค่เรื่องแถบเมนูก่อนละกัน
แถบเมนูจะมีสองส่วนนะครับ ด้านบนกับด้านล่าง
*แถบเมนูด้านบนให้แก้ตรงส่วน #neck
*แถบเมนูด้านล่างให้แก้ตรงส่วน #leg
วิธีแก้เหมือนกันเลย แต่จะแสดงให้ดูวิธีแก้ ส่วน #leg ตาม request น้องซึนแล้วกัน
ไปที่ #leg .module li ให้ทำตามนี้เลย
#leg .module li{
border-right:1px solid #CCC; <<< ลบบรรทัดนี้ออก (ส่วนขอบด้านข้างของ list ซึ่งหากเป็นแนวตั้งเราจะไม่ต้องการแล้ว)
display:inline; <<<< ลบออกเช่นกัน (ส่วนที่ทำให้ list ของเรา "inline" หรือเรียงเป็นแนวนอน)
padding:0px 10px 0px 10px; <<< ปล่อยไว้ (ค่า padding ธรรมดา แก้ไขได้ตามต้องการ)
list-style:none; <<< เพิ่มเข้ามา (ทำให้ ไม่มี "จุด" หน้า list เรา)
ลักษณะโค้ดหลังทำเสร็จแล้ว
#leg .module li{
padding:0px 10px 0px 10px;
list-style:none;
}
ตอนนี้จะออกมาเป็นแบบนี้
จะเห็นว่า widget เรียงต่อกันหมดเลย ซึ่งตรงนี้เราก็กลับไปแก้ที่ #leg .module ครับ
ปรับค่า width(ความกว้าง) ให้สมดุลกับขนาดของ #page นะครับ
theme ตัวอย่างมีขนาด #page ที่ 780px ถ้าเราจะทำให้กล่อง widget 3 กล่องใส่เข้าไปให้สวยงามผมก็เลือกขนาด width:200px เพื่อให้เมื่อรวมกับค่า padding แล้ว ทั้ง 3 กล่องจะไม่เกินขนาด 780px
#leg .module{
background:#F5F5F5; /* << เปลี่ยนสี bg ใส่รูปได้ตามสะดวก */
.... << ค่าอื่นไม่ต้องไปแตะ
margin:0px 0px 10px 25px; /*<< เว้นระยะระหว่าง widget แต่ละอัน เพื่อความสวยงาม */
padding:8px 10px 8px 10px; /*<<สร้างย่อหน้าให้ส่วน widget เพื่อความสวยงาม */
width:200px; /*<<ความกว้าง*/
height:300px; /*<<ต้องกำกับความสูงไว้ด้วย เพื่อให้ widget เรียงกันอย่างเรียบร้อยสวยงาม */
}
*การปรับค่า width นั้นต้องพลิกแพลงตามขนาด theme ของตนเองด้วยนะครับ
ถ้าใส่โค้ดแล้วจะเป็นแบบนี้
หลักๆ โดยเบสิคก็จะมีเท่านี้ ที่จะทำให้สวยหรือไม่สวย คือการคิดออกแบบของเราเองนะครับ เราสามารถปรับแก้ได้อีกหลายอย่างเช่น
ทำเส้นใต้ให้ส่วน list
ให้ไปที่ #leg .module li เพิ่มโค้ดลงไป
border-bottom:1px dotted #333; /* อธิบาย สร้างขอบด้านล่าง ชนิดจุด โค้ดสี#333 */
เปลี่ยนขนาดกันได้ตามใจนะครับ ส่วนค่า dotted เป็นที่นิยมในการใช้มากกว่า หรือจะใช้ solid ก็ได้แบบเส้นเดียว (ดูวิธีการใช้ border ได้จาก entry ก่อนๆ)
ถ้าจะให้สวยก็ต้องเพิ่มค่า padding ด้านบน ด้านล่างด้วยครับ แบบนี้
padding:5px 10px 5px 10px;
จะออกมาแบบนี้
ปรับขนาด เปลี่ยนสีตัวอักษรใน list
ให้เพิ่มส่วน #leg a{....} เข้าไปเลยครับ
#leg a{
color:#f00; /*<< สี font */
font-size:0.8em; /* << ขนาด font ใช้ px ก็ได้ ,em นี้คือขนาด 0.8 เท่าจากขนาดปกติในบล้อกเรา */
}
a หมายถึงส่วนที่เป็น link นะครับ #leg a คือ ลิงค์ที่อยู่ในส่วน #leg นั่นเอง
อีกอันคือเวลาเอาเมาส์ไปวางแล้วสีเปลี่ยน
#leg a:hover{ /*ใช้ :hover เวลาเอาเมาส์ไปวางจะเกิดผลในวงเล็บ */
color:#00f;
}
ถ้าใส่ตามด้านบนเข้าไปลิงค์ใน #leg จะเปลี่ยนเป็นสีแดงทั้งหมด และเอาเมาส์ไปวาง จะเปลี่ยนเป็นสี น้ำเงินครับ
TIP!!
ประเด็นสำคัญที่บล็อคจะสวยไม่สวย เราต้องใช้ padding กับ margin ให้เป็นนะครับ สำคัญมาก!
padding กับ margin สามารถสร้างขอบ สร้างระยะห่างให้เราได้ตามต้องการ ลองศึกษาดูจากกระทู้ก่อนๆ นี้ได้ครับ
แต่ถ้าให้แนะนำ นิยามฉบับซับนรกก็จะเป็นแบบนี้
padding/margin:บน ขวา ล่าง ซ้าย;
ถ้าเพิ่มค่า padding แล้ว backgrond(พื้นหลัง) จะขยายออกไปตามค่า padding ด้วย
ถ้าเพิ่มค่า margin แล้วขนาดจะเท่าเดิม แต่จะเพิ่มระยะห่างจากสิ่งนี้กับสิ่งอื่นออกไป
ลองหัดใช้ดูครับ ค่านี้ใช้บ่อยมาก ใช้คล่องๆ จะสามารถสร้าง theme ที่แตกต่างได้
=============================
วันนี้เอาเท่านี้นะครับ ช่วงนี้คงเขียนบล็อคตอบ FAQ เรื่อง css ก่อนนะ ถ้าใครสงสัยเรื่องแก้ธีมก็ถามมาได้เลยครับ ผมจะ เขียน entry คนอื่นๆ จะได้รู้เหมือนกัน (จริงๆ หมดมุก) หรือตอบกลับทาง ems.
