Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [CSS/IE6] 跨瀏覽器:畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法

Changed By: HP
Change Date: September 06, 2011 01:51AM

[CSS/IE6] 跨瀏覽器:畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法
<b>1. 情境說明</b>

我們經常將網頁固定為某個寬度,例如:

#container{
width: 928px;
}

但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大,而可能難以閱讀。

例如以<a href=http://mepo.cc>美寶莊園</a>的<a href=http://meopedia.com/?map=6>地圖</a>為例,在正常視窗大小時內容可完整呈現:
例如以<a href=http://mepo.cc>美寶莊園</a>的<a href=http://mepopedia.com/?map=6>地圖</a>為例,在正常視窗大小時內容可完整呈現:

<img src="http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/308945_10150315741358729_708813728_7894083_706882_n.jpg">

但寬度縮為 360px 時,內容變得不好理解而難以操作:
<img src="http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/312514_10150315746428729_708813728_7894124_749948_n.jpg">

<b>2. 改善方法:加入 max-width 及 _width (IE6) 的設定</b>

在相關的 block 中設定 CSS,將寬度改為可動態調整:
<xmp>#container{
max-midth: 928px; /* CSS 標準語法 */
_width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/
margin: auto; /*此為「水平置中」的語法,若有需要可加上*/
}
</xmp>

調整後結果:
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/301513_10150315779863729_708813728_7894470_3859032_n.jpg">

可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。

<b>3. 改善頂圖 LOGO 的呈現:設定 background-position (CSS)</b>

頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左,而例子中的美寶莊園 LOGO 是位於頂圖的「右側」,所以無法呈現。

我們只要將頂圖的設定改為「置右」即可:
<xmp>#header{
background-image: url(imgs/wiki_top.jpg);
background-position: right top;
}
#header{ /* 簡寫 */
background: url(imgs/wiki_top.jpg) right top;
}</xmp>

修改後可見頂圖 LOGO 已成功呈現:
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash4/299263_10150315791403729_708813728_7894542_8209871_n.jpg">

以上為美寶莊園地圖(與百科)為了「動態調適視窗大小」而作的一系列的改善步驟,希望對讀到這篇文章的人有所幫助!


參考資料:
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. <a href=http://veerle-v2.duoh.com/blog/comments/placing_a_css_background_image_horizontally_right_on_an_h2_using_a_span_ele/>Placing a CSS background image horizontally right on an h2 using a span element</a> (2009)
Changed By: HP
Change Date: September 06, 2011 01:50AM

[CSS/IE6] 跨瀏覽器:畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法
<b>1. 情境說明</b>

我們經常將網頁固定為某個寬度,例如:

#container{
width: 928px;
}

但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大,而可能難以閱讀。

例如以<a href=http://meopedia.com/?map=6>美寶莊園</a>為例,在正常視窗大小時內容可完整呈現:
例如以<a href=http://mepo.cc>美寶莊園</a>的<a href=http://meopedia.com/?map=6>地圖</a>為例,在正常視窗大小時內容可完整呈現:
例如以<a href=http://mepo.cc>美寶莊園</a>的<a href=http://mepopedia.com/?map=6>地圖</a>為例,在正常視窗大小時內容可完整呈現:

<img src="http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/308945_10150315741358729_708813728_7894083_706882_n.jpg">

但寬度縮為 360px 時,內容變得不好理解而難以操作:
<img src="http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/312514_10150315746428729_708813728_7894124_749948_n.jpg">

<b>2. 改善方法:加入 max-width 及 _width (IE6) 的設定</b>

在相關的 block 中設定 CSS,將寬度改為可動態調整:
<xmp>#container{
max-midth: 928px; /* CSS 標準語法 */
_width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/
margin: auto; /*此為「水平置中」的語法,若有需要可加上*/
}
</xmp>

調整後結果:
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/301513_10150315779863729_708813728_7894470_3859032_n.jpg">

可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。

<b>3. 改善頂圖 LOGO 的呈現:設定 background-position (CSS)</b>

頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左,而例子中的美寶莊園 LOGO 是位於頂圖的「右側」,所以無法呈現。

我們只要將頂圖的設定改為「置右」即可:
<xmp>#header{
background-image: url(imgs/wiki_top.jpg);
background-position: right top;
}
#header{ /* 簡寫 */
background: url(imgs/wiki_top.jpg) right top;
}</xmp>

修改後可見頂圖 LOGO 已成功呈現:
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash4/299263_10150315791403729_708813728_7894542_8209871_n.jpg">

以上為美寶莊園地圖(與百科)為了「動態調適視窗大小」而作的一系列的改善步驟,希望對讀到這篇文章的人有所幫助!


參考資料:
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. <a href=http://veerle-v2.duoh.com/blog/comments/placing_a_css_background_image_horizontally_right_on_an_h2_using_a_span_ele/>Placing a CSS background image horizontally right on an h2 using a span element</a> (2009)

Original Message

作者: HP
Date: September 02, 2011 01:11AM

[CSS/IE6] 跨瀏覽器:畫面動態調適視窗大小(max-width)同時讓背景圖片(backgroun-image)正常顯示的方法
1. 情境說明

我們經常將網頁固定為某個寬度,例如:

#container{
width: 928px;
}

但這樣的設定在電腦的視窗變窄或者在行動裝置上時就會顯得太大,而可能難以閱讀。

例如以美寶莊園為例,在正常視窗大小時內容可完整呈現:
例如以美寶莊園地圖為例,在正常視窗大小時內容可完整呈現:
例如以美寶莊園地圖為例,在正常視窗大小時內容可完整呈現:



但寬度縮為 360px 時,內容變得不好理解而難以操作:


2. 改善方法:加入 max-width 及 _width (IE6) 的設定

在相關的 block 中設定 CSS,將寬度改為可動態調整:
#container{<br /> max-midth: 928px; /* CSS 標準語法 */<br /> _width:expression((documentElement.clientWidth >928) ? "928px" : "auto"); /* IE6 特有語法*/<br /> margin: auto; /*此為「水平置中」的語法,若有需要可加上*/<br /> }<br />

調整後結果:


可以看到「美寶莊園地圖」和內容部份都能動態調整大小並置中。但美中不足的是美寶莊園的「頂圖」部份沒有辦法看到代表網站形象的「LOGO」。這個部份的解決辦法在下一步驟說明。

3. 改善頂圖 LOGO 的呈現:設定 background-position (CSS)

頂圖 LOGO 無法出現主因是背景圖片 (background-image) 一般是水平置左,而例子中的美寶莊園 LOGO 是位於頂圖的「右側」,所以無法呈現。

我們只要將頂圖的設定改為「置右」即可:
#header{<br /> background-image: url(imgs/wiki_top.jpg);<br /> background-position: right top;<br /> }<br /> #header{ /* 簡寫 */<br /> background: url(imgs/wiki_top.jpg) right top;<br /> }

修改後可見頂圖 LOGO 已成功呈現:


以上為美寶莊園地圖(與百科)為了「動態調適視窗大小」而作的一系列的改善步驟,希望對讀到這篇文章的人有所幫助!


參考資料:
1. ie6实现min-width/max-width http://blog.feshine.net/technology/367.html
2. Placing a CSS background image horizontally right on an h2 using a span element (2009)