200804011250兩欄式版面的CSS自定樣式探討

最近有網友改CSS,弄成兩欄式顯示有點問題,我也幫忙改,所以測試了一下兩欄式的CSS語法,不過就是有點靈異現象,我也是改到無力。不過,有點心得,所以還是寫下來,以免下次又有人問,還要再Try。

首先我用Xuite提供的版型來展示↓
這是拿佈景主題《歡樂包》裡面的3顆許願的貓餅乾-6來套,三欄式一切正常。

接著我們去版面編排裡面改版面選擇,套用兩欄式(中間與右邊兩欄,下圖的B-1)

因為選兩欄式的左欄與中間欄的情形是正常的,如下圖↓,所以接下來以討論中間與右側兩欄式的情形來討論。

改採用兩欄式(中間與右側兩欄式)的情形,如下圖,會發生兩個欄位有重疊的情形發生!!

我們先來討論一下原本的三欄式CSS語法,僅就與三欄位有關的CSS列出,其他省略↓
/*定位框*/
#container {
 position: relative;
text-align: left;     
behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;

 }
   
/*左欄*/
#linksLeft{
        position:absolute;
        left:50px;
        width:180px;
        margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

/*右欄*/
#linksRight{
    position:absolute;
    right:50px;
    width:180px;
    margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
 
/*中間欄*/
#mid{
position: center;
background-color:;
margin: 0  240px  0 240px;
padding: 0 0px;
border: #856035 5px solid;
background-color:#634521;
color:#A58A63;
 }
基本上這個CSS語法的定義是透過父元件(在此為定位框container),它用position:relative; 的相對方式配置。然後左右兩個小欄位則採絕對的定位方式放在左右兩側(分別以position:absolute;以上left:50px;或right:50px;來定義),中間欄就透過margin-left:240px; 以及margin-right:240px;(在margin: 0  240px  0 240px;定義),避開與左右兩欄的重疊。所以這樣的CSS語法在三欄式狀態下絕對沒問題!!

但是當缺少左側或右側時,好像就會不太合適,我試了半天,發現改掉左右欄位的兩側留白會是最好的解決方式,我試這將Left:50px; right:50px;縮小到20px;,語法如下↓
/*定位框*/
#container {
 position: relative;
text-align: left;     
behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;

 }

/*左欄*/
#linksLeft{
        position:absolute;
        left:20px;
        width:180px;
        margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

/*右欄*/
#linksRight{
    position:absolute;
    right:20px;
    width:180px;
    margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
 
/*中間欄*/
#mid{
position: center;
background-color:;
margin: 0  210px  0 210px;
padding: 0 0px;
border: #856035 5px solid;
background-color:#634521;
color:#A58A63;
 }
因為側邊留白變小,所以中間欄對兩側的距離也改小margin: 0  210px  0 210px;。這樣問題看起來是解決了↓


當然我也測試另外的兩欄與三欄,也都正常啦!

我在想,這個問題應該是因為左欄位雖然不顯示,但是兩側留白還是會對中間欄造成影響,所以我改將兩側留白縮小可以解決這個問題,另外一種解法是都不要留白(left:0px; right:0px),然後你還是希望版面兩側保留一些留白,可以在container裡面去定義只使用width:95%;之類的方式留白。

歡迎有其他解決方案的Xuiters分享經驗

平均分數:0 顆星    投票人數:0
我要評分:
回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
Xuite官方音樂播放器

萬年曆
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[[CSS樣版分享]修改官方版本至1280...],By YuCih的部落格 於2014-03-18
Re:[【轉帖】秋楓枯黃色系面版 [三欄式]],By YuCih的部落格 於2014-03-04
Re:[[CSS樣版分享]新版隨螢幕大小變動寬度...],By 歡迎蒞臨 Kittyli Blog 於2014-02-16
Re:[[新版CSS]自定CSS將Blog底圖換...],By 歇即菩提 於2013-09-24
Re:[[新版CSS樣版]向日葵, 固定寬度, ...],By 歡迎來到小童與雙貓的家 於2013-08-31
Re:[轉貼【文章分享】 職場人都該看這一篇文章...],By 名附其實少奶奶 於2011-11-16
CSS樣版三欄兩欄倒數冬季計時居家黑色系右欄藍色風水自由欄位語法播放器浮動寬度保健步道如果劇團兒童劇行動夢想兩欄右iPADCSS語法裝潢border耶誕iPhone影音系統家具手機Pixar客廳L型家具望洋山幾何影音播放器邊框標題名稱粉紅基礎入門圖片縮小文章鎖餐廳密碼鎖公告密碼Style Informationmore
洋蔥頭表情符號

不顯示的自由欄位