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

 

創作者介紹

PromLin的非主流部落 (Pixnet新站)

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


留言列表 (8)

發表留言
  • alfredo
  • 在裏面加入這一行試試看
    .innertext p{ margin-bottom: -1.5em;}

    我研究了一下,看起來是html的問題,有的文章有用〈p〉包起來有的沒有
    所以被〈p〉包起來的文章就會和下面的文字多了點空隔。
    上面加入的那一行是把下方間隔距離往上提,數字可以自行調整。
  • 已修改OK, 非常感謝.

    PromLin 於 2008/04/25 20:27 回覆

  • 小魔王
  • 果然是很笨柴的wretch

    原來是奔波於兩種界面之間啊,
    搬家辛苦了,也貢獻我的pixnet與
    新閣,光幻之墟進入太虛蒸發狀態了......[=.=]
    有空請改連結喔。

    http://blog.pixnet.net/RuinMage
    http://www.wretch.cc/blog/LordSunset
  • 很抱歉沒幫小魔王寫那篇文章.
    部落格遷移還是小事, 這兩個月家裡更是忙得焦頭爛額.
    而且我也不曉得該如何下筆,
    看到coolchet寫的那篇之後, 我更是不敢動筆了, 我寫的肯定不如他寫的.

    PromLin 於 2008/04/25 20:31 回覆

  • alfredo
  • 補充一下
    如果要統一拉大間隔的話,除了上面那一行之外。
    可以去修改.posted的margin-top的值
  • 已修改OK, 非常感謝.

    PromLin 於 2008/04/25 20:27 回覆

  • 小魔王
  • Promlin, 我看到你一直窮凶極惡(?)
    地更新字幕忙不堪言,就猜測到了~~~[>.<]

    那麼,希望有空時可以無壓力地閱讀喔!偶發的感想或議題都非常歡迎!
  • 其實我這兩個月的字幕產量也銳減了, 這個月到目前為止也只有產出兩部而已, 而且這兩部片子的字幕行數都不太多("橡皮頭"的對白只有109句).

    PromLin 於 2008/04/26 13:37 回覆

  • 悄悄話
  • coolchet
  • 哇哩ㄌㄟ

    我都沒有注意我的無名文章是否有被偷刪阿

    怎有這種怪事!!!
  • coolchet的文章都很"純潔", 應該沒有被偷刪之虞.

    PromLin 於 2008/04/29 17:53 回覆

  • 悄悄話
  • 蹄子
  • 我成立了個"懷舊影集"部落格,也有分類把一些搖滾歌詞翻譯出來
    http://tw.myblog.yahoo.com/jw!V1cdsdaGAxZ7DRwv25M-
    歡迎Lin大指教
    若網址連不上,上google蒐" 懷舊影集牧原英豪 "就是了,版主是 Hammer.
找更多相關文章與討論