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

 

Posted by PromLin at 痞客邦 PIXNET 留言(8) 引用(0) 人氣()


open trackbacks list Trackbacks (0)

留言列表 (8)

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

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

    PromLin replied in 2008/04/25 20:27

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

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

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

    PromLin replied in 2008/04/25 20:31

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

    PromLin replied in 2008/04/25 20:27

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

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

    PromLin replied in 2008/04/26 13:37

  • Private Comment
  • coolchet
  • 哇哩ㄌㄟ

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

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

    PromLin replied in 2008/04/29 17:53

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

You haven’t logged in yet, please use guest status to leave message. You can also log in with above service account and leave message

other options