將Plurk回應區變成固定寬度

試把回應區用固定寬度的方法呈現,讓每行的回應內容有較多的字數,也不致因暱稱而變得長短不一。修改的方法請參考Plurk CSS自訂修改全攻略,修改後的範例請參考簡睿在噗浪。事實上,如果使用GreaseMonkey的腳本來做類似這些變化會是更好的選擇,但為了能跨瀏覽器使用,還是用修改CSS的方法加減用吧。

變身前 變身後
plurk7 plurk8

滑鼠游標移到暱稱文字區域時,固定的寬度會放大以顯示較完整的暱稱。下圖是寬度放大後的暱稱: plurk9

/* 把回應內容區裡的表格改成固定寬度的layout */
.list table {
  table-layout:fixed;
}

/* 暱稱區寬度固定為35%, 淡灰底色;超出寬度的部份會消失(hidden) */
.list .td_qual  {
  width:35% !important;
  border-right: 2px solid #dddddd;
  background: #dddddd;
  overflow: hidden;
}

/* 游標移入暱稱區時寬度變成60% */
.list .td_qual:hover {
  width:60% !important;
  position: absolute;
}

/* 游標移至暱稱的文字連結時,顯示超長部份 */
.list .td_qual .name:hover {
  overflow: visible;
  width: 60% !important;
}

/* 把暱稱三角形按鈕往右移,以免蓋到修飾詞 */
.cmp_tooltips-down {
  left:30px;
  position:absolute;
}


##

您可能也會有興趣的類似文章

填寫回應

 

 

 

您可使用這些HTML標籤

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

隨機文章

  1. 不用再一篇一篇剪貼了:在文章內文動態產生Google AdSense的廣告 (34)
  2. [Xuite] 樣式全都跑掉了… :-( 
  3. Anti-Spam SMTP Proxy造成郵件主機異常?! 
  4. Zip Search:搜尋ZIP檔,找出符合條件的檔案 
  5. jQuery在Xuite的測試 
  6. [FireFox] del.icio.us, Furl toolbar 
  7. Microsoft My Phone:同步手機資料的網路服務 
  8. [Sites] 網頁整篇多國語言翻譯:WorldLingo、BabelFish、同文堂 
  9. [Comics] 烘焙王與大追擊 
  10. [Tools] 吃飯皇帝大:決定餐廳的輪盤軟體 Wheel ’O Yum (1)

歷史熱門文章

  1. 如何手動輸入Plurk的表情圖示? (352,030 點擊/2008-09-29)
  2. 簡單放大Plurk輸入區的方法[修訂] (86,779 點擊/2008-09-29)
  3. Plurk CSS樣式自訂修改全攻略 (82,770 點擊/2009-07-04)
  4. 啟用&關閉中華電信ZyXEL P874的無線網路連線功能的步驟[修訂] (82,395 點擊/2011-06-01)
  5. 網路升級光世代50M/3M與設定ZyXEL P874 (52,414 點擊/2011-05-28)
  6. 輕鬆學會彈指神功-揭露AutoHotkey絕技 (42,815 點擊/2008-04-10)
  7. iPad新手入門技巧 (39,993 點擊/2011-02-05)
  8. 分享世博台灣館主題曲『台灣的心跳聲』MV(附歌詞+下載連結+新歌詞) (38,040 點擊/2010-04-27)
  9. 把HTC Touch HD操作介面換成Spb Mobile Shell,美觀又便利! (37,863 點擊/2009-02-18)
  10. 另一套適用手機的影片轉檔工具:WinAVI 3GP/MP4/PSP/iPod Video Converter (35,796 點擊/2009-04-18)