@lice ::

選單: 首頁 | 標籤 | 地圖 | 留言

搜尋

分類

所有分類

無尾熊

新發現

攝影筆記

最新日誌: The executable was signed..; [jquery]按enter移到下一個..; Facebook 小工具的額外控制; Facebook Graph Api 初試; 透過OAuth使用twitter api(..

最新: 回復; 謝謝你囉, 看來用TryParse方便..; c#當然有判斷是否為數字的方法..; 有找到這個 kb: http://suppor..; 噗!程式跟人生啊!好難體悟哦; 引用

日曆

存檔: 2012|January; 2011|July; 2011|March; 2010|September; 2010|June

標籤: Tool Life dreamweaver adobe Windows 無名 os video XML xcode css jQuery error coding usb Url webslice api ie8 亂數 map popup dom msn session c#string DIV software iphone

鏈接: wowbox blog (網頁設計知識庫); 小小油佳粒

Total : 57263
Today : 42
Yesterday : 49

@lice

blah blah blah

管理頁 | 發表頁

破圖的處理

views: 9017 times
網頁有引用到外站的圖片, 但圖片不復存在時通常會看到一個所謂的破圖
若想要保持版面的完整與美觀, 可以動態以別的圖片代替
在圖片加上onerror屬性:

<img src="myimage.jpg" onerror="ImgError(this);">

再用javascript寫一個置換圖片的function

function ImgError(source){
    source.src = "img/default_image.jpg";
    source.onerror = "";
    return true;
}

這樣在圖片load不到時就會改顯示你設定的替代圖片了~

參考來源: jQuery/Javascript to replace broken images

Tag : html, image, javascript

發表於 September 29th, 2009 16:25 | 新發現 | Trackback 0 | Comment 0

image gap / div gap

views: 8138 times
這似乎是設計網頁時每個人幾乎都會遇到的問題
就是上下兩張圖或上下兩個div中間出現消除不掉的空隙

之前遇到是前者, 解決方式是把圖片的style加上display:block

今天有朋友遇到FX才有的div空隙問題
找到的解決方式是將它的style加上border:1px或padding:1px
另一方面也要檢查看看它上下方字體的問題哦

參考自這裡: Gap at top of firefox but not IE
這裡有更詳細的說明: firefox div top gap collapsing margins

Tag : css, Firefox, html

發表於 March 6th, 2009 11:29 | 新發現 | Trackback 0 | Comment 0

關於favicon

views: 7598 times
現在有很多線上的creator就不多說了
這個網站可以檢查你的favicon有沒有設置成功
當然也可以看到別人的設置方法

more..

Tag : css, favicon, html, Tool, Web

發表於 Febuary 9th, 2009 19:05 | 新發現 | Trackback 0 | Comment 0

取得HTML元件的位置

views: 7136 times
幫朋友找到了, 順便作個筆記...

 function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

參考: JavaScript Find Position

Tag : css, html, javascript

發表於 January 17th, 2009 11:51 | 新發現 | Trackback 0 | Comment 0

控制flash的圖層

views: 11529 times
常聽說網頁中的flash會蓋住下拉menu的問題
後來我在寫類似Lightbox的效果時也遇到了
一般的解決方式是將 flash 的 z-index 設為 -100
再將要蓋住它的圖層設為 100
但我發現還要把 flash 的 WMODE 設定為 transparent
才算是完整的解決方式

目前在window平台上的IE, Firefox, Safari都測試通過囉~

Tag : css, DIV, flash, html

發表於 August 15th, 2007 18:51 | 新發現 | Trackback 0 | Comment 0

rel屬性

views: 7701 times
這個屬性常會被人忽略, 主要的原因是它沒有什麼實際上的功用
其實很多人都沒住意到它常出現在使用連結css檔案的地方
<link rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css">
↑網頁用css, media屬性不設定時的預設值
<link rel="stylesheet" media="print" href="corporate-print.css" type="text/css">
↑列印用css

more..

rel就是relationship的簡寫，指得是連結目標與本份文間之間的關係型態，在W3C當中，有列舉出所有的關係型態，其中相當常用的，大概就是Stylesheet的樣式表型態。你可以使用多個關係型態，當中以半形空白隔開，例如：rel=”alternate stylesheet”，下面列出來的，就是W3C所提供的型態列表：

Alternate : 用來作為替代頁面用，通常會和lang（語言屬性）或是media（媒體屬性）一起使用。當和語言屬性一起使用的時候，其實就是多國語言的轉換；而當和媒體屬性一起使用的時候，就可以應用在友善列印等地方
Stylesheet : 樣式表。用以連結外部樣式表，往往會與Alternate搭配一同使用
Start : 參照文件的開頭，這個連結型態將會告訴搜尋引擎哪個檔案才是作者設定要作為開頭
Next : 當文件是屬於線性文件的時候，例如教學文件等具備一貫性的網頁，指定下一頁的文件，可以讓使用者的流覽器選擇是否要預先載入文件，能夠有效減少使用者感覺上loading時間
Prev : 指定線性文件當中的前一頁，可建立文件的順序性，部分瀏覽器也支援使用「Previous」來替代Prev Contents : 參照網頁內容的說明，部分瀏覽器也可以使用「ToC」（意指Tabel to Content）
Index : 提供當前文件的索引內容
Glossary : 提供當前文件的詞彙資料
Copyright : 提供當前文件的版權宣告
Chapter : 指定當前文件所屬的章
Section : 指定當前文件所屬的節
Subsection : 指定當前文件的節錄內容
Appendix : 指定當前文件相關的附錄與參考資料
Help : 指定協助文件，包括更多訊息，或是連結到其他相關的資料來源網站
Bookmark : 指定書籤資訊

[資料來源: http://ursuladev.wordpress.com/2007/07/25/html-%E9%80%A3%E7%B5%90%E6%9C%89%E5%B9%BE%E7%A8%AE/]

在microformat的領域裡, 當a標籤設定了rel="tag", 代表該連結為tag的集合頁
例如: <a href="http://technorati.com/tag/tech" rel="tag">tech</a>
最常見是用在標籤雲(tag cloud)裡
[資料來源: http://microformats.org/wiki/rel-tag]

另外在http://orangoo.com/labs/GreyBox/看到一個特別的用法 rel="gb_imageset[nice_pics]"
經追蹤證實rel這個屬性在這裡只是被拿來設定物件類型, 以決定顯示方式用的
善加利用功能不明顯的物件屬性的確可以作更多有創意的發揮