CSS 垂直水平居中最簡單的解決方案

垂直水平居中 ie9+

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

沿伸閱讀

http://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

[……]

閱讀更多

PHP imagettftext(): Could not find/open font 解決方法

新的主機PHP版本換成5.5.9版本
原本可用的驗証碼圖驗程式跑出 E_WARNING 的 error reporting如下

imagettftext(): Could not find/open font

無法開啟字型檔,導致圖片無法正常顯示,解法如下:
在imagettftext()前加入putenv(‘GDFONTPATH=’ . realpath(‘.’));

putenv(‘GDFONTPATH=’ . realpath(‘.’));
imagettftext( … );


搞定!!

參考網址
http://stackoverflow.com/questions/6089393/imagettftext-cannot-open-font-file

[……]

閱讀更多

CKEditor 4 粗體、斜體、底線、顏色沒有效果的原因及解決方案

在CKEditor 4 編輯器中,設定粗體,回到前端秀出來的文字粗體、斜體、底線都沒有效果,
應該是在做前端網站設計,都習慣用reset.css來重新設置每個標籤的樣式
而在CKEditor 4 我們將某段文字設定為粗體,
切到原始碼來看,CKEditor預設將該用<strong></strong>包裹,用HTML標籤產生粗體效果,

<strong>HELLO WORLD!!</strong>

不過<strong>已經被reset.css重設了,所以在前端<strong>並起不了粗體作用,
在網路上找到一個方法,在CKEditor 4 的config.js設定檔中加上

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };

這時候粗體就會用<span>來包裹透過CSS來產生粗體效果,而不是<strong>標籤:

<span style=”font-weight:bold;”>HELLO WORLD!!</strong>

這樣就正常顯示了粗體了,粗體、斜體、底線方法同理:

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };
config.coreStyles_italic = { element: ‘span’, styles: { ‘font-style’ : ‘italic’ } };
config.coreStyles_underline = { element: ‘span’, styles: { ‘text-decoration’ : ‘underline’ } }

若有更好的作法再請各位大大提出囉~^^

自己的題目自己解

使用reset.css來重設所以HTML預設樣式
有reset就有unreset就是反重設HTML預設樣式
跟reset.css一樣,網路上有流傳很多版本,
可以參考一下下列網址版本。
https://github.com/binarystash/unreset-css
其優點是他有設定class,也就是說我可以指定容器的去做反重設HTML預設樣式的動作

例:
<div class=”unreset”>
     <strong>HELLO WORLD!!</strong>
</div>

這樣就OK囉~這樣即使是使用<stong>也一樣有效果

針對顏色的部份,如果你有習慣下列這方式設定整個網頁的預設樣式

body *{
color:#000;
text-decoration:none;
font-family:  “微軟正黑體”,Arial, “新細明體”;
}
可能要建議你把color這樣式拿掉,才不會影響CKEditor編輯好的文字秀在前端
顏色不會變的問題

[……]

閱讀更多

PHP 判斷是否為行動裝置

因為目前裝置已經不只有電腦,可能有電腦、平板及手機,如何去判別user的瀏覽器然後給予不同內容,這樣的功能變得非常重要,今天發現了一個很簡單的方法~用網友寫好的Mobile Detect  class來做判斷,官網在下方,
http://mobiledetect.net/;
那斷的方式也很簡單~
範例如下~

  1. require_once(“Mobile_Detect.php”);   
  2. $detect = new Mobile_Detect;   
  3. $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? ‘tablet’ : ‘phone’) : ‘computer’);  
  1. <?php $check = $detect->isMobile(); if($check): ?>    
  2.     是的話做的事   
  3. <?php else: ?>  
  4.     不是的話做的事   
  5. <?php endif; ?>  

延伸閱讀
http://blog.wingzero.tw/2014/09/php.html

[……]

閱讀更多

DNS URL Redirect(跳轉式轉址) 與 URL Frame(框架式轉址) 差異

URL Redirect(跳轉式轉址)或URL Frame(框架式轉址),說明如下:

URL Redirect
轉址類型一: 當記錄類型為 URL Redirect 時(跳轉式轉址)
您一樣於主機名稱輸入 www 或 * 時, 地址欄部分輸入您欲轉址的連結,當網友輸入您的網址時,則系統會自動將用戶轉址到您設定的連結上,但轉址後則網址列上的網址名稱為會交由您所設定的連結來變換。

URL Frame
轉址類型二: 當記錄類型為 URL Frame 時(框架式轉址)
您一樣於主機名稱輸入 www 或 * 時, 地址欄部分輸入您欲轉址的連結,當網友輸入您的網址時,則系統會自動將用戶轉址到您設定的連結上,但轉址後則網址列上的網址名稱並不會隨著連結的變化而有所更動,網址列上永遠列出的是您的網址,而並不會隨著轉址後的連結變化而改變。這是採用框架(Frame)的方式進行轉址。
原文
http://service.taiwandns.com/?p=998

[……]

閱讀更多