修改版面CSS真讓人頭痛......
我本來在今年年初就想將「非主流部落」遷移到Pixnet,不過當時卻都找不到合意的版型,所以就一直拖延了下來。直到最近因為無名小站沒有經過事先溝通,就偷偷摸摸刪除了我的五篇文章,並且關閉我的會員回應功能,因此我就立刻下定決心將整個部落格遷移過來。
因為實在找不到完全合意的版型,於是我就暫時先挑一個看起來比較順眼的,再來慢慢修改。我對CSS的語法可說只是一知半解而已,只能夠像瞎子摸象一樣,在網路上找資料慢慢摸索、慢慢修改。
目前版面已經修改到差不多了,只剩下一個小問題而已,就是「繼續閱讀」和「作者發表資訊」兩個欄位的距離,有些距離得很遠,有些則距離得很近,都沒有辦法全部統一。原先的版型就已經存在這個問題了,應該不是被我改壞的吧?
1、「繼續閱讀」和「作者發表資訊」兩個欄位距離很遠的情況......
2、「繼續閱讀」和「作者發表資訊」兩個欄位距離很近的情況......![]()
看有沒有精通CSS語法的高手肯幫忙一下,指點我要如何修改才能改善,我已將目前版面的CSS附加在後文。
另外,目前表頭圖片是花花草草的,顯然不符合「非主流部落」的調性,我或許會尋找其他比較「有血有肉」的圖片來取代。
===============================================================
我目前的版面CSS如下......
/*
※
CSS design by joylichi
*/
/* General
Set
-----------------------------------------*/
body#blog_main{
font-family:arial;font-size:10.5px;color:#666;
/*
margin:0px; */
padding:0px;
margin:0px 0px 10px 0px;
}
a
{ color: #999966;
text-decoration: none;
/* font-weight:bold; */
}
/* a:link { color: #999966; text-decoration: none; }
a:visited { color:
#999966; text-decoration: none; }
a:active { color: #99CC66; } */
a:hover
{ color: #99CC66; }
input{border:1px solid
#999;font-family:verdana;font-size:10.5px;background:transparent}
textarea{border:1px
solid
#ccc;font-family:verdana;font-size:10.5px;background:transparent}
select{font-family:verdana;font-size:10.5px;background:#fff}
/*
container
-----------------------------------------*/
#container1 {
/*
width:850px; */
margin:0px 0px 0px 10px;
border:0px solid
#000;
}
#container2 {}
/* banner and
pageheader
-----------------------------------------*/
#banner
{
height:150px;
/* width:850px;
*/
background:url(http://p2.p.pixnet.net/albums/userpics/2/9/220529/1173598190.jpg)
no-repeat 100% 100% #fff;border:1px solid
#ccc;margin-top:10px;
}
#pageheader {} /* banner第二層,實質上只設定#banner即可
*/
#pageheader
h1{margin-top:10px;padding-left:10px;font-family:arial;font-size:24px;}
#pageheader
h1 a{font-family:arial;color:#666;} /* 主標題(網誌名稱) */
#pageheader h1
a:hover{font-family:arial;border-left:0px;padding:0px;color:#ccc;} /* 主標題(網誌名稱)
*/
#pageheader .description { /* 網誌個人描述列
*/
position:absolute;left:130px;top:55px;width:500px;height:70px;overflow:auto;overflow-x:hidden;border:0px
solid
#ccc;font-family:arial;font-size:12px;padding:3px;color:#aaa;font-weight:normal
}
#description2
{display:none}
/*
main
-----------------------------------------*/
#main2 {
/*
width:848px; */
border:0px solid
#000;
height:auto;
margin:5px;padding:0px;
} /* 包含content、links
*/
/* content
-----------------------------------------*/
#content
{
/* margin-right:0px; */
margin-left:0px;
width: 63%;
float:
left;
margin-top:0px;margin-bottom:0px;
border:0px solid
#ccc;overflow:hidden;
border-right:1px dotted
#999;
margin-right:15px;
padding-right:20px;
}
.date
{
text-align:left;font-size:14px;color:#999;font-family:Georgia;font-weight:bold;padding:10px
0px 0px 0px;
}
.datediv {} /* 第二層date */
.blogbody { /* 包含 .articletext
.posted .total-comments-div */
border:0px solid
#333;
margin-bottom:10px;
}
.blogbody p
{line-height:160%;}
.blogbody2 {} /*第二層blogbody*/
.articletext
{margin:0px;padding:0px;} /*包含 .title .extended .innertext .extended
*/
.articletext .title
{margin-top:3px;background:#eaeaea;font-family:Tahoma;font-size:12px;color:#333;padding:5px
5px 5px 5px;border-bottom:1px solid #999;border-right:1px solid #999;}
.title
a{font-family:verdana,arial;font-size:small;color:#333;}
.title
a:hover{font-family:verdana,arial;font-size:small;color:#333;}
.articletext
.innertext
{font-size:12px;color:#333;line-height:160%;padding-left:15px;}
a.more
{
width: 120px;
line-height: 23px !important;
text-align:
right;
font-size: 12px;
color: #333 !important;
padding: 0px 0px 0px
0px;
margin: 5px 0px 0px
450px;
}
.category{margin-top:0px;padding:0px;} /*文章分類*/
.posted
{margin-top:0px;font-family:arial;text-align:right;color:#999;padding:0px 10px
5px 2px}
.posted a{font-family:arial;color:#999;}
.posted
a:hover{font-family:arial;border:0px;padding:0px}
/*
comments
-----------------------------------------*/
#Comments {}
p
{line-height:16px;}
.commentTitle { /* 回應列的title
*/
background:#eee;font-size:10.5px;color:#333;padding:5px 5px 5px
15px;font-weight:normal;}
.commentTitle br{display:none}
.commentTitle a
{margin-top:10.5px;letter-spacing:1px;color:#666;margin-left:5px;padding-left:5px;border-left:1px
solid #000;
}
.commentTitle a:hover{border-left:1px solid
#000;color:#C40000;cursor:default;}
.comments-body { /* 回應區的留言區塊
*/
padding:10px 2px 0px
10px;margin-left:40px;line-height:16px;margin-top:10px;color:#999;border-bottom:1px
solid #eee;font-size:12px;
}
.comments-post {
line-height:
15px;
text-align: right;
color:
#aaa;display:block;padding-bottom:10px
}
.comments-post a
{
border-left:0px;padding-left:0px;
}
.comments-post a:hover
{
border-left:0px;padding-left:0px;
}
.comments-post img {
width:
10px;
height:10px;
vertical-align:
middle;
margin:1px;
}
.comments-post br{display:none}
.replyBox
{margin-top:8px;font-family:arial;padding:1px;width:80%;align:right;border:0px;
font-size:12px;color:#000; background:#f8f8f8;
} /*版主回應整體區塊*/
.replyBox
span{display:block;padding:0px 0px 0px
3px;color:#808080;background:#f4f3f4;width:auto;border-right:1px solid
#eee;border-bottom:1px solid #eee;}
.replyContent {border:0px solid
#eee;margin:0px;color:#808080;font-family:arial;padding:0px 3px 3px
3px;line-height:16px} /*版主回應內容區塊*/
.replyInfo
{font-family:arial;color:#b1b1b1;padding:3px 3px 1px 0px} /*版主回應時間區塊*/
/*
divThird 第三欄式設定,若兩欄式則不需設定 #divThird 的
position
-----------------------------------------*/
#divThird
{}
#divThird2 {} /* 第二層divThird */
/* links
選單
-----------------------------------------*/
#links {
/* width:250px;
*/
margin-left:64%;
padding-right:15px;
/* float: right; */
/*
border:0px dotted #999; */
}
#links2 {} /* 第二層links */
.sidetitle { /*
每個blog的標題列 */
font-size : 11px;
color : #000;
text-align : center;
margin : 10px 0px 5px 15px;
/* margin-top:10px; */
/* padding: 20px
0px 0px 20px; */
padding:2px;
background:#EEE;
}
.side { /*
每個block的內容 */
font-size : 11px;
text-align : left;
margin : 0px 0px
0px 15px;
/* padding-left : 15px; */
line-height:18px;
}
/*
links 選單進階設定
-----------------------------------------*/
#CalendarPlugin
{}
#CalendarPlugin. calendar {font-size:11px;} /* 行事曆 */
#CalendarPlugin
.calendar a:{}
.calendar
table{font-family:Verdana;font-size:10.5px;color:#000;font-weight:bold;margin-left:10px;background:url(http://p2.p.pixnet.net/albums/userpics/2/9/220529/1163512397.gif)
repeat 0% 0%;}
#CalendarPlugin .calendarhead{color:#336699;}/*
目前年月、上下月切換(本身也是caption)*/
#CalendarPlugin .calendarhead
a{color:#999;border:0px;padding:0px}/* 目前年月、上下月切換連結
*/
span.calendar{color:#999}/* 日期、星期 */
th .calendar{color:#666}/* 星期
*/
td .calendar{color:#999}/* 日期 */
#CalendarPlugin span.calendar
a{color:#336699;width:18px;border-left:0px;padding:5px;background:url(http://p2.p.pixnet.net/albums/userpics/2/9/220529/1163512006.gif)
repeat 0% 0%;height:18px;width:18px;}/* 有文章的日期 */
#boxProfile {} /*
xxxxxx的地盤 */
#boxProfile .boxProfile0 {}
#boxProfile .boxProfile0
.sidetitle {}
#boxProfile .boxProfile1 {}
#boxProfile .boxProfile1
br{}
#boxProfile .boxProfile1 .boxProfileImg {}
#boxProfile .boxProfile1
.side {}
#boxProfile .boxProfile1 .side a{
text-decoration:
none;border-bottom:0px;}
#boxProfile .boxProfile1 .side .boxProfileLink
{text-align:left;text-decoration:none;} /* 四個連結:xxx的個人資料、xxx的網誌首頁、xxx的相簿、xxx的留言版
*/
#boxProfile .boxProfile1 .side .boxProfileLink a:hover
{text-decoration:none;border-bottom:0px;}
#boxNewArticle {} /* 最新的文章
*/
#boxNewArticle .boxNewArticle0 {}
#boxNewArticle .boxNewArticle0
.sidetitle {}
#boxNewArticle .boxNewArticle1 {}
#boxNewArticle
.boxNewArticle1 .side {}
#boxCategory {} /* 文章分類 */
#boxCategory
.boxCategory0 {}
#boxCategory .boxCategory0 .sidetitle {}
#boxCategory
.boxCategory1 {}
#boxCategory .boxCategory1 .side {}
#boxDate {} /*
文章彙集 */
#boxDate .boxDate0 {}
#boxDate .boxDate0 .sidetitle {}
#boxDate
.boxDate1 {}
#boxDate .boxDate1 .side {}
#boxNewComment {} /* 最新的回應
*/
#boxNewComment .boxNewComment0 {}
#boxNewComment .boxNewComment0
.sidetitle {}
#boxNewComment .boxNewComment1 {}
#boxNewComment
.boxNewComment1 .side {color:#999}
#boxFolder {} /* 自訂資料夾
*/
#boxFolder .boxFolder0 {}
#boxFolder .boxFolder0 .sidetitle
{}
#boxFolder .boxFolder1 {}
#boxFolder .boxFolder1 .side
{}
#boxRssList {}
#boxRssList .boxRssList0 {}
#boxRssList
.boxRssList0 .sidetitle {}
#boxRssList .boxRssList1 {}
#boxRssList
.boxRssList1 .side {}
#boxCounter
{position:absolute;top:142px;left:90px;width:300px;border:0px solid #ccc} /*
參觀人氣統計 */
#boxCounter .boxCounter0 {}
#boxCounter .boxCounter0 .sidetitle
{display:none}
#boxCounter .boxCounter1 {}
#boxCounter .boxCounter1
br{display:none}
#boxCounter .boxCounter1 .side
{margin:0px;padding:0px;text-align:left;font-size:10.5px;font-family:Verdana;color:#333;border:0px
solid #ccc;}
/* powered
-----------------------------------------*/
.powered
{margin-left:50px;padding:10px;font-family:verdana;font-size:11px;}
.powered
a:hover{border:0px;padding:0px;




.innertext p{ margin-bottom: -1.5em;}
我研究了一下,看起來是html的問題,有的文章有用〈p〉包起來有的沒有
所以被〈p〉包起來的文章就會和下面的文字多了點空隔。
上面加入的那一行是把下方間隔距離往上提,數字可以自行調整。
果然是很笨柴的wretch
原來是奔波於兩種界面之間啊,搬家辛苦了,也貢獻我的pixnet與
新閣,光幻之墟進入太虛蒸發狀態了......[=.=]
有空請改連結喔。
http://blog.pixnet.net/RuinMage
http://www.wretch.cc/blog/LordSunset
如果要統一拉大間隔的話,除了上面那一行之外。
可以去修改.posted的margin-top的值
地更新字幕忙不堪言,就猜測到了~~~[>.<]
那麼,希望有空時可以無壓力地閱讀喔!偶發的感想或議題都非常歡迎!
我都沒有注意我的無名文章是否有被偷刪阿
怎有這種怪事!!!
http://tw.myblog.yahoo.com/jw!V1cdsdaGAxZ7DRwv25M-
歡迎Lin大指教
若網址連不上,上google蒐" 懷舊影集牧原英豪 "就是了,版主是 Hammer.