pixnet版面修改

http://cookiesp.pixnet.net/blog/post/77354500

文章裡面的程式碼 右邊全部都被截掉

懇請高手幫忙修改樣式

希望能把左邊的空白去利用到 讓content能完整顯示整行文字

我找過很多樣式 都是左右兩邊留很多空白

拜託高手了 謝謝!!

已更新項目:

此樣式在樣式選擇的第五頁

links位置可以不用動

讓內文內容整個往左移就好了

對CSS不熟所以能夠告訴我哪裡改什麼就好了 謝謝

2 個解答

評分
  • 最佳解答

    Dear 小鬼 ~

    加大 content 文章區使其內文內容往左擴展並非完美的解決方法!

    您套用的版型總寬度是 900px,對於螢幕解析度只有 1,024 x 768 的訪客而言,總寬度 900px ~ 950px 是最佳觀看效果。倘若「內文內容往左移」,那麼使用非寬螢幕的訪客在瀏覽您的文章時,會看不到左邊溢出螢幕寬度的內容唷!再者,加寬 content 之後,上方的橫幅勢必要配合整體寬度也要跟著修改。

    圖片參考:http://i.imgur.com/SYVDt.gif

    程式碼部分,您使用了 <pre> 標籤顯示程式碼,雖然 <pre> tag 能保持程式碼本文的空白符、換行符的編輯格式,但倘若您在撰寫文章時沒有「手動」換行(<br>)的話,當 <pre> ..... </pre> 裡面的內文超出 div 寬度時就不會自動換行,因此超出 div 寬度的程式碼會被隱藏!

    所以,要解決看不到文章中的程式碼問題,並不需要更改 content 寬度或移動位置!我們只需針對包在 <pre> 標籤裡面的程式碼讓它能夠自動換行就能解決問題。

    圖片參考:http://tw.img.webmaster.yahoo.com/399747/ystats.gi...

    請在〔CSS原始碼編輯〕最底部空白位置加入以下CSS:

    pre {

    white-space: pre-wrap; /* css-3 */

    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

    white-space: -pre-wrap; /* Opera 4-6 */

    white-space: -o-pre-wrap; /* Opera 7 */

    word-wrap: break-word; /* Internet Explorer 5.5+ */

    }

    ~ 所得結果如下測試畫面 ~

    圖片參考:http://a.imageshack.us/img40/3361/61469635.png

    如此設置後,不僅 content 文章區能保持原來寬度不變、位置不變,<pre> 標籤內的程式碼文本也保有原來的空白符、換行符格式且能自動換行,超出文章區寬度的程式碼將不會被隱藏而能完整顯示!倘若日後套用其他版型樣式,記得再將以上CSS加入樣式表即可,此CSS相容各大主流瀏覽器版本。

    祝問題順利解決~ ^_^

  • 8 年前

    第壹零壹個問答評價 感謝知識長的回答

    這位知識長 專門解決語法上的各類症頭

還有問題?馬上發問,尋求解答。