作者: 就以

圖片取代文字圖片超連結桌機可行但手機會無法點選之問題

<a>總統府</a>

a{
height:1px;
overflow:hidden;
padding:30px 0 0 0;
background:url(image/icon.jpg);
}

以上設定在桌機呈現上 a是可以點選的，滑鼠移上去整個padding的區塊也會是有hover效果、也可以點擊的。但是換成行動裝置（手機、平板），點選icon會沒有反應。也就是在行動裝置上hover的範圍只有height:1px;不含padding的範圍。

改成以下在手機上就可以點

a{
height:31px;
overflow:hidden;
text-indent:-1000px;
background:url(image/icon.jpg);
}

就是還是要用縮排的方式隱藏文字。

postion:fixed;表頭設定fixed且希望無論視窗大小都置中的作法

小正正網站有實作範例，先看範例：上下左右都置中的區塊。簡單說明實作方法（因為我要處理的主要是左右置中，上下置中的理論相同就不重複。

  1. 由於fixed的定位是認瀏覽器，而不認父元素的position，所以先使用left:50%的方式。讓定位點定在瀏覽器的中間（也就是不管螢幕放到縮小，物件都會固定在瀏覽器的中間。
  2. 然後再使用margin-left，設定負值拉回。因為如果畫面都要置中，一定都會將要置中的物件設定一個寬度，例如1000px，那這個時候只要向左拉回500px即可。
  3. 因為我要處理的header我希望他寬度可以延伸，所以我設定的時候把總寬設定成2000px，因此往左要拉回1000px。

小正正有提供positioniseverything的網站，很值得參考喔！

處理float造成父元素無法撐開的方法

有三種方法，這三種方法暫時不管IE的適用性，以firefox、google等較遵循W3C的瀏覽器來看。

  1. overflow：
    優點是一行就可以解決。缺點是如果版面上有的元素的定位希望超出版面之外的時候，就會被隱藏
  2. float：
    父元素設定寬度搭配float，缺點是父元素以外的東西要在加clear或用別的方式避免掉父元素float造成問題
  3. after：
    設定方法如下（參考文章http://www.positioniseverything.net/easyclearing.html/），此處clearfix為父元素的class

      .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
缺點是比較囉嗦，但是如果定位要定在框框以外不會被隱藏，也能夠避免父元素設float造成的更多問題。

如何處理Flash圖層會蓋過div的問題

問題描述：Flash不管放哪，即使div的z-index比較大，Flash還是會蓋過div

原因：官方解釋 A Flash movie in a layer on a DHTML page containing several layers may display above all the layers,  regardless of the stacking order (”z-index”) of those layers.
但是，只有設定z-index是沒有用的。網路上有很多種方法，我是用這個方法處理

  1. 要加上<param name=’wmode’ value=’transparent’>，這個是讓flash可以有透明背景的屬性，加了這個之後，z-index也才會生效，不然會永遠蓋再最上面。
  2. 在embed標籤內加上wmode=”transparent”，這個是針對使用embed標籤的瀏覽器（例如IE），效果跟上面一樣，只是用的標籤不同。
  3. 然後用div把flash包住之後，設定z-index，要設定小一點
  4. 把要壓在flash之上的設定z-index，設定大一點。
  5. 還是不行就加上position:absolute;

css內的大於與加號

大於的用法

用法一：把多個同樣層級的子元素一起加上同個樣式
參考文章：http://null.wehan.net/511

如果沒用大於，假設#all內的h1~h6都要加同樣的顏色，寫法會是
#all h1,#all h2,#all h3,#all h4,#all h5,#all h5{color:#fff;}

如果用大於可以改寫成
#all > h1,h2,h3,h4,h5,h6{colorL#fff;}

要注意到的是，這個大於只針對子元素。如果hx跟#all的關係不是子元素、而是孫元素，就不會被套用。

實做後有誤，後來仔細想想，加了逗號(,)的項目基本上就跟前面的> 沒有關係了，所以這個寫法本身有問題。有沒有比較好的寫法要再想想。不過剛剛熊熊想到，如果要針對不同元素下同一屬性，加 class不就好了 …..囧

用法二：只針對相同標籤、但屬於子元素者加樣式、孫元素不加
參考文章：http://www.cnblogs.com/image/archive/2010/11/15/1877735.html
因為只針對子元素，所以假設原始碼為
<ul>
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C-1</li>
</ul>
</li>
</ul>

<div>
<p><span></span></p>
<span></span>
<span></span>
</div> 

如果寫法是
ul li{color:#fff;}
div span{color:#fff;}
所有 li 都會是白色，所有span都會是白色，但是如果改寫成
ul > li{color:#fff;}
div > span{color:#fff;}

只有在ul div下第一層的 li 第二、三個span會是白色，li p底下的 li span不會被影響。
我終於知道為什麼 wordpress 寫選單的時候會大量使用到大於符號了….

我原本寫的範例錯了。不能使用同樣標籤，不然孫元素會繼承子元素的的樣式，因此失去用 > 過濾的機制。

加號的用法
參考文章：http://null.wehan.net/479

加號指兄弟節點，等於把樣式只套用在+之後指定的兄弟節點上， +之前的則不套用該樣式

wordpress 套用 templatemonster 樣板流程整理

這是以 wordpress 架站，跟 templatemonster 購買版型後的套板流程。之前寫在杉語網頁設計的部落格上。這裡留一份備份囉。

  1. 先安裝好基本的wp
  2. 裝完之後把mySQL先匯出備份
  3. 把樣板上傳到ftp，傳到themes資料夾、把樣板裡面的​uploads傳到wp-content資料夾裡
  4. 把plugin上傳上去並且啟用
  5. 把買來的樣板裡面的mySQL先複製一份出來，然後用文字編​輯器打開，把裡面的your_website_url_here用搜尋取代​改成你的網址，例如 http://www.firtalks.com.tw/ ，如果你在安裝wp的時候有把資料庫的前綴詞做修改，則要多一步把wp_找出來修改成你設定的前綴詞。然後存檔
  6. 到phpadmin把剛剛改過的mySQL匯入

大概這樣就可以先把樣板裝起來了。
簡單的樣板mySQL可以不用灌，不過有的樣板有用到自定資料內​容的，
或是有的有使用到「選單」設定的，
不灌裝起來會跟原來的有落差，
為了避免自己在那裡找到底問題出在哪，
建議還是先灌進去，再自己去後台研究資料對應會比較省時間。

不灌mySQL會有落差的原因大概有兩個

  1. 樣板內有自定的post-type：因為不灌就沒有這個資料，所以自然顯示就會有問題
  2. 樣板內有使用自定選單：等於他的下拉選單不是在分頁設定子母關係就會自動出現，要到選單內再設定，外加css寫法可能是用指定ID的作法寫，因此會發生自己新增的選單有顯示，但是樣式怪怪的狀況。

大概是這樣～

WordPress架站實務案例（三）

在前公司用Wordpress架過三個站，都是使用 templatemonster 的付費版型。有一個站因為沒續約，已經消失了就不寫囉，紀錄一下另外兩個。這個部份當初都有寫在杉語網頁設計的網站上，不過這內容原本就是我寫的啦，這裡保留一份順便加新的註解～

案例一：友敍企業有限公司
網址：http://usea.com.tw/
說明：
這個版型使用了很多的jQuery效果，像是右欄的相片展示，工程實績裡的照片展示。還有上方下拉選單。但是下拉選單在套用的時候發現原來的樣板在這個部分並沒有跟後台作完全的串接，當分類刪除，自己新增的分類沒辦法增加到下拉選單中。

考慮到未來客戶使用的擴充便利性，因此將原來有JQuery效果的下拉選單刪除，使用原始樣板的模組替代，CSS的部份自行重寫。工程實績的部份在原始樣板中也沒有跟資料庫串接，是純手工排版的。

註解：
事後想想，應該不是下拉選單沒有整合，而是那個樣板要使用 WP 內的「選單」去設定，但是當時只知道分頁在預設版型的情況底下，下拉選單都會自動新增。那時候對「選單」的設定不熟，所以才會做那樣的調整。

案例二：原宏企業
網址：http://www.yuanhorn.com.tw/
說明：
調整的地方主要有

  1. 首頁只保留表頭SlideShow與邊欄商品資料連結，
  2. 將SlideShow的高度做調整。
  3. 網站字體大小CSS調整
  4. 前台樣板中文化調整
  5. 將商品加註文字直接寫入到樣板內。

註解：
這個套版比較麻煩的地方是後來客戶希望可以調整商品列表內、每個商品的圖片尺寸。我原本以為是直接做在列表頁的樣板內，後來用圖片尺寸搜尋才發現不是，是寫在另外一個負責壓圖的程式檔案內。