顯示具有 CSS 標籤的文章。 顯示所有文章
顯示具有 CSS 標籤的文章。 顯示所有文章

星期四, 3月 17, 2011

ie css min-height問題

網上查只有ie6有不支援min-height問題
不過我也不知那機車美工怎麼做的
我的ie8不會自動延展div

最後用javascript自己給它"動"一下
做法是
function onload(){
var tmp = $('#content').css('position'); //content是破板的div
$("#content").css('position','absolute');
$("#content").css('position',tmp);
}


Reference
解決IE6不支援css min-width與min-height

星期四, 10月 15, 2009

CSS去除連結虛線框,無法用輸入法,刪除,貼上

鏈結在focus後,會出現鏈結虛線


為了去除連結虛線框,會在CSS下以下語法
//css
a, input{
outline: none; /* for Firefox */
hlbr:expression(this.onFocus=this.blur()); /* for IE */
}


但利會造成輸入方塊(input type='text'),無法用輸入法、刪除、貼上
因為foucs就blur,所以無法鎖住在textbox上
就依樣畫葫蘆吧... 在textbox下void(0)...
//html
<input type="text" style="hlbr:expression(void(0));">

星期五, 10月 31, 2008

css 23事

CSS 語法教學

1.匯入CSS方法
外部連接套用
< link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">

嵌入套用
< style type="text/css" media="【媒體類別】">

匯入套用
@import url("style.css") 【媒體類別】;

2.優先權
從最高優先權到最低優先權的排名如下:
* 內行套用的樣式表 (Inline stylesheet)
* 嵌入套用的樣式表 (Embedded stylesheet)
* 匯入套用的樣式表 (Imported stylesheet)
* 外部連接套用的樣式表 (Linked stylesheet)
* 瀏覽器本身的樣式表 (Browser's own stylesheet)

References:
1.CSS串接

3.CSS選擇器 (selector)
同一個選擇器可以有不同的 instance
tag a和tag b有相同class,但可以利用下面的方法設定
【型類選擇器】.【選擇器名稱】{
}
ex. < h1 class='Class_A'/> < h2 class='Class_A' />
.Class_A.h1{
}
.Class_A.h2{
}


References:
CSS選擇器

星期四, 10月 30, 2008

CSS設定

.contents {
/* 一次解決版面撐開、英文斷字、避頭尾、段落左右邊界不齊問題 */
/* by:meiji 200701 */

/* 防止撐開 */
table-layout: fixed;
/* 英文單字自動換行 */
word-wrap: break-word;
/* 正常避頭尾 */
word-break: normal;
/* 文字左右對齊 */
text-align:justify;
text-justify:inter-ideograph;
}

利用Html網頁列印

1.去頁首頁尾問題
官網:http://www.meadroid.com/
檔案:透過email,會給下載網址

目前看比較好的方法還是透過meadroid這家公司的ActiveX
有免費版本,當然有些限制,不過至少可解大部份的問題了
1.直印、橫印
2.印不印頁首(頁尾)
3.上下左右邊界
安裝Meadroid的ScriptX

References:
HTML實現列印(三)頁首、註腳、邊界與列印方向設定

2.CSS排版問題
有時預覽列印時,會發現調用的CSS都無效了
那是因為
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen" />
的media設為screen而沒設為列印時的參考,加入print就ok了,即
<link rel="stylesheet" type="text/css" href="CSS位置" media="screen,print" />
只加入print沒有screen還不行咧,怪哉

3.利用CSS分列印頁
<div STYLE="page-break-after: always;"> </div>

Media Types說明
值 適用於
all 所有媒體類別
aural 言語合成器
braille 布拉耶點字法 (盲人用) 媒體
handheld 掌上型媒體
print 列印
projection 投射媒體
screen 電腦螢幕
tty 固定字寬 (fixed-pitch) 的媒體
tv 電視類的媒體

Reference:
列印 HTML 網頁強制換頁的方式
7個Media Types

4.列印背景圖\
*調browser的設定或利用list-item
*利用@media print{ }

星期四, 3月 20, 2008

利用CSS更改滑鼠圖案

滑鼠不可用.jpg. gif. BMP 等圖片格式, 定要用 cur. ani. 等圖片格式.

改用其他圖式
body{cursor:url(http://xxxxx.cur);}/*移到網頁時的滑鼠游標*/
a{cursor:url(http://xxxx.ani);}/*移到超連結時的滑鼠游標*/

預設基本符號:
用法:body{cursor:Pointer;}

Move the mouse over the words to see the cursor change:
1.Auto
2.Crosshair
3.Default
4.Pointer
5.Move
6.e-resize
7.ne-resize
8.nw-resize
9.n-resize
10.se-resize
11.sw-resize
12.s-resize
13.w-resize
14.text
15.wait
16.help

*注意
Pointer (手指)
hand (手指) 僅ie支援

reference
1.如何更改滑鼠圖案
2.w3school

星期二, 3月 11, 2008