
我快瘋了…(啊啊啊啊啊啊啊啊)
啊、各位同學,正如大家所看到的,今天下午我無聊了整天,就是在移動部落格版面…(嗚!)而突然又想更動版面的原因是:
當貼圖超過主文寬幅時,在某些瀏覽器(如ie6版本)觀看會發生「欄位亂跑、擠在一起」的情況…(如下圖顯示)
呃、請問看這篇「紅顏薄命:樂韻(樂慧)」曾發生過「圖片跟左邊欄擠在一起」情況的人,能夠上來簽到一下嗎?(汗)
在經過數小時的爬文、測試,腦袋跟眼睛都快燒掉的情況,得出一個折衷作法…(當然如果網兄有更好的意見、在此也請不吝指教,謝謝!)
那就是:將主文區塊靠左,其他兩個邊欄靠右
以前說過,很多問題都是在使用「三欄式」的排版後出現的,但又什麼要用?啊!說到這個就很慚愧,我完全是為了貼廣告好用啊!(飛踢)而實際上也確實有人使用這形式的排版,想想就直接套用了~(羞)用此版面配置的好處是,可以取巧避開「貼大圖時、主文欄位會跟邊欄擠在一起」的情況…
如果類似過去「主文在中間、邊欄在兩側」,貼「超過主文寬幅」的大圖就會發生版面破格、主文整個貼死左邊欄!(這裡泛指使用ie6以下版本的瀏覽器情況)
但假設一開始主文欄位就設定在最左邊呢?(嘿嘿)
這樣即便是貼大圖,主文欄位再怎麼跑、也不會衝撞到邊欄吧?加上兩個邊欄都用position:absolute 固定在右邊,圖大也頂多只會發生「邊欄蓋圖」的情況,而不會讓版面跑掉…(然後廣告依舊金槍不倒的在原地貼好,你說這樣是不是很兩全其美啊XDDD)
過去幾篇文章我還特地把圖縮到「不會讓欄位跑掉」的尺寸,就是希望發篇文不會發生「某些族群觀看不易」的憾事,但我發現這不符合我個性啊!
我明明就是一個很愛貼大圖的癡漢啊!
為啥當我那天想特意貼個寬幅800、900、甚至1000以上的像素圖片,就得時常提心掉膽,「會不會有人看這篇文時候,版面整個是亂的?」(不要啊啊啊)
我很喜歡入江紗綾,似乎貼些「剛好符合版面的寬幅500像素圖片」也不錯,
(像上圖)
但如果那天我想貼張寬幅超過1000像素的呢??
(像上圖)
(像上圖)
(像上圖)
你看看你看看,是不是換貼這麼大的圖爽度會加倍呢??然後就算是用ie6的網兄也能好好觀看這篇文章、不會因為想看大張的入江,結果就得忍受「版面亂掉」的痛苦,這樣不是很棒嗎啊啊啊!!
有鑑於此,除了更動版面,我沒別的路可走。(啊!)
本來還想藉這篇分享一下更改版面的過程,不過整個回顧起來、雖然弄了很久,但我似乎實際更動的地方不多?想想還是別提了、講出來只會被網頁設計的高手吐啊…(淚)
以上,對現在版面有啥想法、或是感覺有更好方式改善的網兄,在此也請多多關照啊!(而瀏覽上還有問題的網兄,也記得要上來回應喔…)
太郎按:感覺貼大圖真的有比較好耶…
==2010年10月19日再次編輯分隔線==
(我知道一直打這種東西很枯燥乏味,但我這人幹了什麼事都很喜歡跟人交代,所以請大家先忍耐一下XDDD ,然後想說新文看的人會比較多,所以先把這幾段貼在這、過幾天就會移走)
啊啊只能說我是個善變的男人,,新版面弄好、這兩天看下來的感覺是…
怎麼看就是不開心!(嗚)坦白說習慣的版面更動後總讓我有點內傷,但不這樣改又會讓某些族群(使用ie6版本瀏覽器的人)觀看某些文章時「版面爆開」,感覺真是很兩難啊…(啊啊啊啊)
沒錯,ie6確實該是下場的產品,但如果看過計數器的統計(雖說不敢保證一定正確、但多少是個參考數據),你會發現ie6還是很多人在用!
足足有20幾%啊…(推論是某版本os就附,然後一直用到現在的族群吧?)
這數據代表什麼?假設進站人數有一百人,那可能有20人看到的版面會是「亂掉的」,這情況還不嚴重嗎?(汗)當然我也可以無視、好似之前發生「切換全螢幕、寬螢幕顯示會出現問題」時就不管,畢竟寬螢幕才是主流啊!(毆)現在一堆液晶顯示器早就是寬螢幕的了,何必還特地為了符合1024*768的顯示模式去改版面?
(然後就如之前所說的,使用這比例觀看的人也是一堆…)
不過為了20%的朋友,就要其他80%的朋友也一起體驗這個新版面…
(呃、其實我還滿想弄個投票就是,但樂多沒這機制很抱歉XDDD)
這麼看來似乎不怎麼理想啊…想來想去只好弄個新方案。
網路上倒是提供很多「針對版本不同瀏覽器所寫的hack碼」,正所謂因地制宜,既然使用ie6的情況跟使用ie7、Firefox、Chrome觀看會有所差異,那乾脆就把有問題的版本「用上適合的設定碼」這樣不就可以達到兩邊族群都能看的境界?
現階段作法是在css部份作修改,於版面區塊都多設一條 「 _設定碼 」,有下標線「_」皆為ie6優先讀取的設定碼,其餘沒加則是通用於他版瀏覽器,如此這般版面問題就可解決大半…(原來這麼簡單就好了啊?)
所以用ie6版面的朋友,看到部落的樣子會是這樣…
至於使用其他版本(如ie7以上、Firefox、Chrome等瀏覽器)的朋友,看到的版面則是這個樣子…
太郎按:
另外這邊對使用ie5.5的朋友就比較抱歉了、光是行文寬幅就壞掉了,都不知該從何改起啊!
為啥ie5.5呈現的樣子會這樣啊?(汗)
最後還是老話一句,如果網兄有更好的意見、在此也不妨提出,謝謝!
以上亂入報告完畢,請大家繼續看文…