[2008.02.02] CSS style Chiwoo[1]
posted on 02 Feb 2008 20:23 by chiwoo in WORKคือจากตรงนี้ ... เราจะอธิบายตรงเฉพาะลูกเล่นสำคัญนะ ถ้าใครอยากถามอะไรเมนต์ทิ้งไว้ก็ได้ ... คือบางอันก็ยังคงไม่ชำนาญแหละ เลยจะบอกเท่าที่ได้ก่อน ตาม theme ที่ใช้ปัจจุบันนี้
.
ผิดตรงไหนก็ช่วยบอกกันด้วยนะ จะได้ช่วยกันแก้ ^^/
.
------------------------------------------
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
border: 0;
outline: 0;
}
/* General */
body {
background:url(รูปภาพ background) fixed; << จากตรงนี้ถ้าต้องการให้เป็นแพทเทิร์นใช้คำว่า repeat แต่ถ้าอยากให้เป็นเหมือนเรา คือ แบ็คจะอยู่กับที่ก็ใส่คำว่า fixed ตามด้านบน
font:11px Tahoma, "MS Sans Serif";
line-height:1.3em; << ระยะห่างของแต่ละบรรทัด
text-align:center;
}
a:link, a:visited{
color:#4F392C; << สีของตัวหนังสือ
text-decoration:none;
}
a:hover, a:active{ << หมายถึงเวลาที่เราเอาเมาส์เข้าไปใกล้ลิงค์
color:#FFFFFF; << สีของตัวอักษร
background:#4F392C; << พื้นหลังของสีตัวอักษร
text-decoration:none;
border-bottom:3px solid #FFFFFF; << เส้นขอบล่าง ต้องการให้หนาเท่าไหร่ก็เปลี่ยนที่ตัวเลข ...px
}
ตรงวิธีแก้ hover นี้มีหลายแบบ จะเอาแบบบล๊อกเก่ามาใช้ก็ได้ เพราะใส่ได้เหมือนกัน ถ้าว่างๆจะหาลูกเล่นอื่นๆมาฝากอีกนะ ^^
#page{
margin:auto;
padding-top:0px;
text-align:left;
width:540px; << ความกว้างของแถบกลาง ก็คือแถบเอนทรี่และไซด์บาร์ทั้งหมด ของเราอาจจะแคบไปหน่อย แต่ถ้าใครจะทำเล็กๆก็อย่าลืมลดขนาดตัวหนังสือต่างๆด้วยล่ะ
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:540px;
}
/* Header */
#header{
background:url(background ของเฮด) no-repeat; << คือลักษณะตามความคิดของเรานะ ... เหมือนบล๊อกอันใหม่นี้จะแยกออกเป็นชิ้นทับๆกันอ่ะ แล้วชิ้นนี้จะอยู่ใต้ heading หรือรูปเฮดบล๊อกของเรานั่นแหละ ความยาวโดยส่วนใหญ่ควรจะเป็น (ความกว้างของบล๊อกหรือมากกว่านั้น)x500
padding:0px 0px 0px 0px;
}
#header h1 a{
display:none; << หมายถึงว่า เราไม่แสดงลิงค์ตรง heading คือชื่อ Blog Title ของเรานั่นแหละ
}
#header h1 a:hover{
display:none;
}
#header h2{
display:none;
}
#coverimage{
background:url(รูปภาพ heading) no-repeat;
height:336px; << ความสูงของรูป heading
width:540px; << ความกว้าของรูป heading ควรจะพอดีหรือน้อยกว่าความกว้างของบล๊อก ... แล้วแต่ทริคแต่ละคนนะ ใครมีความคิดดีๆ บอกได้ ~
margin-bottom:0px;
}
/* Neck Menu */
#neck{
background:url(http://chiwoo.exteen.com/images/b-02.jpg) top left;
}
#neck .module{
background:#FFFFFF;
display:inline;
float:left;
margin:0px 0px 0px 10px;
padding:2px 0px 5px 0px;
width:540px;
}
#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}
#neck .module h2{
display:none;
}
#neck .module li{
border-right:1px solid #4F392C;
display:inline;
padding:0px 0px 0px 0px;
}
/* Content */
#belly{
background:url(BG ของแถบแสดงเอนทรี่) repeat-y; << โดยทั่วไปเราจะใช้ความกว้าตามความกว้างบล๊อก x 1000
}
#content{
display:inline;
float:left;
margin:5px 10px 0px 25px;
width:345px; << ความกว้างของแถบแสดงเอนทรี่
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
.entry{
float:left;
margin-bottom:12px;
}
.entry .title{
display:block;
float:left;
margin-bottom:10px;
width:100%; << ส่วนใหญ่ที่ให้เป็น 100% ตัวอักษรจะไม่ขึ้นไปขี่กัน จะตั้งเป็นแนวขวางธรรมดา
}
.entry .title h2{
font-size:15px;
}
.entry .title h2 a{
color:#A8958A;
}
.entry .title h2 a:hover{ << เวลาเอาเมาส์ชี้ จะเป็นแบบด้านบนที่เคยบอกไป
color:#FFFFFF;
background:#4F392C;
text-decoration:none;
border-bottom:3px solid #FFFFFF;
}
.entry .title span{
color:#A8958A;
font-size:10px;
}
.entry .post{
float:left;
}
.entry .post p{
margin-bottom:10px;
}
.entry .info{
float:left;
width:100%;
}
.entry .info .coms{
float:right;
}
/* Sidebars */ << แถบลิงค์ด้านข้าง ควรจะไปแก้ตรง widgets ก่อนเพื่อดูว่าเราจะเอาหัวข้อไหนไว้ด้านข้างบ้าง
#sidebar, #sidebar2{
background:#EED4B6;
display:inline;
float:right;
margin:5px 10px 0px 0px;
width:150px; << ความกว้างของไซด์บาร์
}
#sidebar2{
display:none;
}
#sidebar .module, #sidebar2 .module{
margin:5px 5px 15px 5px;
}
#sidebar .module ul, #sidebar2 .module ul{
margin:5px 0px 0px 5px;
padding:0;
list-style: none;
}
#sidebar .module h2, #sidebar2 .module h2{
text-indent:-9999px;
}
/* Sidebar Header image */ << แถบนี้คือแก้ตัวหนังสื title ของไซด์บาร์ แล้วแต่จะดีไซน์นะเคอะ ~
#sidebar #recommend h2, #sidebar2 #recommend h2{background:url() no-repeat;width:90px;height:28px;}
#sidebar #previous h2,#sidebar2 #previous h2{background:url(http://img164.imageshack.us/img164/5703/redy6.jpg) no-repeat;width:90px;height:28px;}
#sidebar #commentalert h2,#sidebar2 #commentalert h2{background:url(http://img81.imageshack.us/img81/934/alerd7.jpg) no-repeat;width:90px;height:28px;}
#sidebar #favourites h2,#sidebar2 #favourites h2{background:url(http://img232.imageshack.us/img232/7827/fevme3.jpg) no-repeat;width:90px;height:28px;}
#sidebar #links h2,#sidebar2 #links h2{background:url(http://img232.imageshack.us/img232/986/liliqp1.jpg) no-repeat;width:90px;height:28px;}
#sidebar #categories h2,#sidebar2 #categories h2{background:url(http://img136.imageshack.us/img136/333/catefp7.jpg) no-repeat;width:90px;height:28px;}
#sidebar #archives h2,#sidebar2 #archives h2{background:url(http://img232.imageshack.us/img232/4300/archzc5.jpg) no-repeat;width:90px;height:28px;}
#sidebar #tags h2,#sidebar2 #tags h2{background:url() no-repeat;width:49px;height:23px;}
#sidebar #pagemenu h2,#sidebar2 #pagemenu h2{background:url() no-repeat;width:64px;height:23px;}
a.archive{
padding-left:15px;
margin-left:6px;
}
/* Tags */
#tags li{
background:url(http://img230.imageshack.us/img230/1268/007wb8.jpg) no-repeat;
width:12px;
height:12px;
display:inline;
margin-right:7px;
}
/* Comment Form */
#commentform{
width:100%;
background:url(รูปของกล่องเมนต์) no-repeat;
border-top:1px dotted #A8958A;
float:left;
}
#commentform form{
margin:2px;
}
#commentform h3{
font-size:16px; << ขนาดของตัวหนังสือที่เขียนว่า Comment ตรงบนซ้าย
font-weight:bold;
}
#commentform .formrow{
padding:3px;
}
#commentform label{
float:left;
width:100%;
margin-right:10px;
}
#commentform input.textbox{
width:100%;
}
#commentform textarea{
filter: alpha(opacity=50); << การทำให้กล่องเมนต์เป็นสีขุ่นๆ
width:250px; << ความกว้างของกล่องเมนต์
height:100px; << ความสูงของกล่องเมนต์
}
/* Comment (Showing Area) */
.comment{
float:left;
margin:5px 0px 5px 5px;
padding-bottom:6px;
width:100%;
}
.comment .post{
float:left;
width:300px;
}
.comment .post p{
margin-bottom:10px;
padding:0px;
}
.comment .info{
border-top:1px dotted #A8958A;
float:left;
font-size:9px;
width:100%;
margin-right:10px;
}
.comment .info img{
width:32px;
display:none;
}
/* Leg Menu */
#leg{
background:url() top left;
}
#leg .module{
background:#A8958A;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:540px; << ความกว้าง
}
#leg .module ul{
display:inline;
margin:0px;
padding:0px;
}
#leg .module h2{
font-size:12px;
font-weight:bold;
display:inline;
}
#leg .module li{
display:inline;
padding:0px 10px 0px 10px;
}
/* Footer */
#footer{
background:url(BG ของด้านล้างสุด) top left; << ของเราเป็นขนาดความกว้างของบล๊อก
height:60px;
}
#footer p{
background:#F0E3D3;
font-size:11px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;
}
.navbar{
float:left;
}
.commentmanage{
clear:both;
}
/*PNG support for IE*/
#header, #neck, #belly, #leg, #footer { behavior: url(/global/iepngfix.htc) }
#sidebar .module h2, #sidebar2 .module h2{
behavior: url(/global/iepngfix.htc)
}
-------------------------------
คือ ... ถ้ามันมีตรงไหนผิดไปบ้างก็ขอโทษนะ ... มืใหม่หัดแกะ 555*
ไปล่ะ เพลียๆง่ะ วันนี้ไปสอบมา
#1 By VAR on 2008-02-02 21:27