修改版面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;

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 PromLin 的頭像
    PromLin

    PromLin的非主流部落

    PromLin 發表在 痞客邦 留言(8) 人氣()

    E-mail轉寄