2009年9月29日 星期二

Blogger新版編輯器造成的邊欄往下掉,如何解決?


最近陸續有好幾個網友跟我反應,他們換模版之後會有邊欄(Sidebar)往下掉的情形,不論使用IE或是Firefox瀏覽器都會這樣,這種邊欄往下掉的狀況通常在以前是因為文章裡的圖片超過主文的寬度,但是最近這幾件我套用他們的模板後,並非這原因可解釋,今天經我利用網友的文章一篇一篇的測試過後,終於得到結論,就是"新版編輯器"惹的禍。



(正常配置情況的圖片)


這種邊欄(Sidbar)往下掉的情形通常會有三個原因,
1、圖片大小(img width)超過文章內容區(main-wrapper)設定的寬度。
2、邊欄元件的寬度超過sidebar所定義的寬度(sidebar-wrapper)時,
3、main-wrapper+sidebar-wrapper寬度大於content-wrapper寬度,

blogger css
通常content-wrapper=(包含)main-wrapper+sidebar-wrapper
這有時並非只有
550+450>990的問題,兩者合併寬度大於整個寬度,當然往下掉。
有時你設550+450<1020,也會出現邊欄往下掉的情形,為什麼呢550+450不是1000嗎?1020的寬度,應該容得下,但是要考慮到邊界的設定,有時你邊界margin或padding設10px,很容易就超過寬度了,如果不懂綸太郎以上所說的,請參考Blogger template模板教學課程---CSS外觀解說一文說明。

這張圖就是邊欄往下掉的畫面


所以版面被擴張,會發生這種情形,但是現在很多人都會利用在相關語法裡,例如在main-wrapper加上
overflow: hidden;
讓超過寬度的圖片或元件就會部分被隱藏,通常可以解決圖片大於本文欄位的問題。

而有些會再加上IE專用的
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /*fix for long non-text content breaking IE sidebar float */

如果你的部落格在IE下有邊欄往下掉的情形而Firefox沒有,應該是上述這些原因,可以加上這些語法試看看,是否可以挽救回來,不然就是要看一下寬度的問題。

如果你的部落格在任何瀏覽器下觀看,都是首頁部分的邊欄(sidebar)往下掉,而單篇文章很正常的話,應該就是目前新版編輯器造成的錯誤現象,

當你要插入"繼續閱讀"(Read More)的作用時,通常會在撰寫模式下在想段落的地方直接按下繼續閱讀的圖示,


或是在修改Html的文章區內為插入語法
<!-- more -->
以下這張圖就是我在撰寫模式下按下繼續閱讀的標記,而到修改html就可看到產生的語法如下,


目前就是這個插入語法的位置發生了錯誤,以一個正常的文章段落而言,通常會產生類似以下的語法,
<div>文章內容.......</div>
意思就是要用div這個區塊語法來包裹住文章內容,而目前發生邊欄往下掉的原因就是
<!-- more -->跑到div區塊裡面了,例如上面第二段文章的區塊,我用粉紅色特別標明的,這裡面夾雜了一個<!-- more -->,就是亂入,在區塊文章未完成之前就使用了<!-- more -->這個語法,所以導致了你的邊攔往下掉。

如何解決呢?

就是將這個<!-- more -->語法,移到區塊文章結束的地方,就是在該段文章</div>的後面,就能解決邊欄往下掉的問題了,這是綸太郎實驗過後的結果,會產生這樣的情形,通常是寫作者在標記繼續閱讀的Mark時,忽略了文章段落的屬性,而隨便加在自己想加的地方,想斷就斷,而不是斷在一篇文章段落結束的後面,就像上面的圖片,我將繼續閱讀插入

以唱誦『南無<!-- more -->妙法蓮華經』為主,也是日蓮宗七大本山之一,

任意將繼續閱讀的標記插在文章中間,就會發生這種情形,算是繼續閱讀亂入的結果吧,就像官方的定義,"You Might As Well Jump!",可以讓你跳,但是要跳到哪裡自己也是要注意的。

所以建議搬家來這的人,或是圖片較多且喜歡將文章置中或是調整位置的朋友,使用新版編輯器時要注意DIV的問題,因為舊板是利用span class="fullpost"的語法來分頁,span不會有推擠區塊的問題,所以建議還是直接用html語法插入,比較不會錯,有問題的朋友,再留言討論。

延伸閱讀:
Blogger文章編輯區新版模式正式啟用

32 則留言:

  1. 感謝綸太郎在短時間內就將這篇文章發佈,雖然我還沒去更改語法,但還是先謝謝你的大力協助

    回覆刪除
  2. 雖然我沒遇到這個問題,但是有長知識了,就推一下。
    好文!!

    回覆刪除
  3. 這個問題我昨天也有發生,我的解決方式是直接拿掉div的區塊。

    把文章裡所有的div標籤拿掉就好了,想跳哪裡都可以。

    回覆刪除
  4. To Winson,希望有幫到你,其實比較好的方式是在ie環境下寫作,然後使用舊版編輯器,程式碼產生較少,要繼續閱讀段落時再轉到新版的,一次來改,不過對你可能有點辛苦,你的圖片很多。

    回覆刪除
  5. To maJor和毛毛牙,謝謝。
    我目前還是用舊板編輯,我也討厭文章裡有一推程式碼。

    回覆刪除
  6. 謝謝~ 成功了
    樣式都回來了
    不過如果寫多一點文章的人可能會比較辛苦吧
    一篇一篇找可能會累死^^"

    回覆刪除
  7. 應該不會吧,新版的也是這個月才推出,可能搬家的會吧,不知道搬家的文章裡是否就有暗藏....more語法,那可能就很累了。

    回覆刪除
  8. 這個問題我上週也遇到了,經過多次嘗試,最後發現了是....more和div語法的衝突才修正過來。綸太郎的這篇文章應該可以幫到不少Blogger,不用走太多冤枉路就找到癥結所在。Good job!

    回覆刪除
  9. 真是遇到才會知道,新東西還是要多試試看,謝謝你的留言。

    回覆刪除
  10. 昨晚將錯誤的文章修改過來了,問題當然也解決了..再次感謝綸太郎這篇文章,不但詳細還把版面結構圖畫给我這不懂的人了解..感動

    回覆刪除
  11. 其實自從blogger新增這個"繼續閱讀"的新功能,我還是繼續用老方法"span class="fullpost""

    感覺要在哪裡斷就在哪裡斷,也不會有版面上的問題 ^^"

    回覆刪除
  12. 我最近搬過來這裡的文章有很多圖檔,對於還是語法新手的我而言,自然是新版編輯器較好用,但它有各問題,當我在"撰寫"時,明明版面都排好了,但是回去"HTML"時,,哈,版面全部跑掉,每一行的行距都擴大變成好幾行,非得要再次加工一行行拖回來,浪費很多時間.
    會不會也是"div"造成的,因為真的有太多太多的div了,,,拿掉可以嗎?就保留頭尾就好?

    回覆刪除
  13. To Jon,習慣問題,我也一樣,但"所見即所得"還是比較符合大眾的需求,謝謝您來留言。

    回覆刪除
  14. To Winson,那張結構圖以前就畫好了,在我提的文章裡,只是挪來用,至於好幾行的問題,在編輯區下方有個"張貼選項",把編輯html設定,張貼時改成"略過新行字元",情況會好一些,還有後台設定→格式,有一個"轉換分行符號",改成否,也都有幫助,自己試看看,另外把<br />刪除,也就可把多餘的行刪掉了。

    div拿掉當然可以,但是他是控制位置的,沒有的話,一律出現在左邊,。

    回覆刪除
  15. 我也發生過這情況..我更改好了.....^-^

    回覆刪除
  16. 還真的不少人遇到這問題呢。

    回覆刪除
  17. 感謝你!!
    你是大好人 雖然我不覺得自己read more放錯位置
    但是讀你文章之後 改一下read more位置之後
    邊欄回到正常位置,好感動!真的謝謝你!

    回覆刪除
  18. 謝謝你!讓我發現困擾我已久的罪魁禍首就是read more的功能.

    不過現再有另一個問題想請教你, 不是很懂把read more到底該放在哪裡才對.我有放在文章結束的地方, 但測欄還是會往下掉耶...該怎麼辦?

    回覆刪除
  19. 通常是在語法</xxxx>之後,就是在每個文章的段落後,通常是</div>或</p>或是</span>每個不同,因為你沒有附上網址,沒法幫您看。

    回覆刪除
  20. Hi, 我blog最近有sidebar下掉情況, 之前用過其他的blogger template 之後開始有問題, 用回classic template就ok, 但轉upgrade template 就下掉。每次都收到pop up window說operation aborted, google 的template 己有齊width同ie hidden overflow 的語法解決方案。請問我blog既是否另外一些問題?我該從那個方向尋找解決方法?

    回覆刪除
  21. 你把"You Never Know What's Coming For You"這篇先存成草稿,看看會不會有這現象產生,再來討論。

    回覆刪除
  22. 謝謝你意見, 變成草稿後就ok。即係文章標題不能過長? 會唔會有其他語法可以改善呢個情況? 再次感激賜教!

    回覆刪除
  23. 你的問題就是這篇提到的問題,Read More加在錯誤的地方,因為你的文字格是太多,造成插入繼續閱讀時可能放到不適當的位置,或是對應的語法有重複,你可以在仔細檢查再試看看,再發布。

    回覆刪除
  24. 我還是不行耶, 為什麼呀?!
    可以請你幫我看看嘛?!
    謝謝你耶!

    回覆刪除
  25. 你的這篇"尋找一道專屬於你的料理/領事館"你把more放到<div>和</div>之間了,所以邊欄會掉下來,自己要仔細找,我也是一篇一篇找的,注意語法裡的"店如此的吸引人"的後面就是了。

    回覆刪除
  26. 最近更換成新版文章編輯器後,我也碰上這樣的問題了....
    在最新的一篇文章中全文頁的側欄也掉下去了!!
    我覺得應該是read more部份出了問題,
    可是我點進Html頁面發現,
    並沒有在每個段落都出現 div 和 /div,只有在文章最開始後結束的地方有出現,
    那我應該怎麼修改呢?
    不好意思...麻煩您了...謝謝您!! ^^

    回覆刪除
  27. 你的版面在firefox下是正常的,IE下才會有你說的情形,你要不要使用Night Sky 2.0,這個模版的新的版本好像可以解決這個問題,因為舊版本有你說的情況發生。
    http://btemplates.com/?s=Night+Sky&x=39&y=14

    回覆刪除
  28. 謝謝你~~~
    我會再試試看的.... ^^

    回覆刪除
  29. 您好
    參閱了您的文章,可能是我不會更改,試了變更欄寬也是側邊往下掉,不好意思因為電腦方面知識較不足,是否可以協助?非常感謝!

    回覆刪除
  30. 你改了後台原本的html吧,所以導致現在的情形,去掉了float: left;或是float: right;會讓原本的配置錯誤,而不是本文提到的東西,如果 "不好意思因為電腦方面知識較不足" ,建議用新版的模板吧,舊有的很多不適用1024*768解析度。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能