標籤: css

CSS寬度問題

文章作者作者: tim
文章發佈日期 2015-07-23
在〈CSS寬度問題〉中尚無留言

今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.

標籤 calc, css, ie8, Javascript, outerWidth, width

程式技術

網頁排版文字排不下的略語語法

在網頁排版上, 有個很麻煩的地方, 就是在固定寬度的文字走文, 若字數太多時, 需要隱藏, 但又希望在介面上看起來理想, 作法可以利用一個 css 的語法:

text-overflow: ellipsis;

這個語法可以應用在限制一定寬度時, 文字走文若有隱藏的部分, 則會出現 … 這種略縮語的方式, 讓看到的訪客可以理解後面還有文字, 只是被略縮掉了, 這是透過 css 的部分來進行, 而不是限制字數輸出(從server端的作法), 而且可以配合文字的字型(有些字型是調合字, 就是有寬有窄), 不是用字數來設限的方式, 會更有彈性的多了.

來看看效果吧:

http://sample.diary.tw/33/1.htm

這個範例利用了一個 slider (jQuery UI) 來進行寬度限制, 方便大家在測試時, 可以看到不同寬度對於略縮語的應用, 有不同的呈現效果.

這裡用的 css 語法如下:

.style1{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backgroud: #eeffee;
  width: 240px;
  height: 30px;
}

其中, overflow: hidden; 是超出的部分就不要出現, 而 white-space: nowrap; 是不要換行.

繼續閱續:
http://ant4css.blogspot.tw/2009/03/text-overflow.html

[2013/3/22 12:33]
overflow: hidden; 及 white-space: nowrap; 和這兩個條件併用是必需的, 所以基本上是應用在標題比較適合, 若用在內文走文就沒有辦法利用這個方式來進行了.

可以參考這篇:
http://leeiio.me/text-overflow-ellipsis/

另外也實作了測試: http://sample.diary.tw/33/2.htm 是無法有這個效果的.

標籤 css, ellipsis, html, overflow

半浮動DIV區域

文章作者作者: tim
文章發佈日期 2012-09-03
在〈半浮動DIV區域〉中尚無留言

一般網頁利用CSS排版, 通常分為上中下三段, 分別為 top, main, footer.

其中在 main 做一些特效, 讓一個區域能在捲動時, 會固定在畫面上. 這樣的特效, 需要配合 javascript (或 jQuery ) 來進行才能達成, 先來看一下效果: link.

除了上(top), 中(main), 下(footer)外, 另外在 main 中還有一個 content 及 flow_div 兩個區域. 在向下捲動時, 若 flow_div 捲動超過畫面上方時, 則會變成固定在畫面上.

程式的實作方式利用 jQuery 來進行, 先看程式碼:

$(document).ready(function(){
    // calculate the original top
    var top = $('#flow_div').offset().top - parseFloat($('#flow_div').css('marginTop').replace(/auto/, 0));    
    $(window).scroll(function (event){
        var y = $(this).scrollTop();
        if(y>=top){
            $('#flow_div').addClass('fixed');
        }else{
            $('#flow_div').removeClass('fixed');
        }
    });
});

在 document ready 時, 先把 #flow_div 的 top 距離算出來, 接下來在 window 的 scroll event 裡, 把 window 的捲動距離算出來後, 和上述的 top 變數比較, 若是超過了, 就把 #flow_div 多加上一個 class 名為 fixed, 讓它固定, 反之則將 fixed class 移除, 也就是跟著畫面捲動.

其中 fixed class 內容重點在於: position: fixed; top: 0px; , 也就是固定在距離畫面上方為 0, 看起來就是浮在原來的內容之上, 若還沒有捲動, 就移除這個 class, 會跟著捲動.

很有意思的一個排版特效.

範例頁: http://sample.diary.tw/29/1.htm

標籤 css, DIV, flow, Javascript, scroll, scrollTop

線上賓果產生器

文章作者作者: tim
文章發佈日期 2012-03-15
在〈線上賓果產生器〉中尚無留言

今天花了一點時間寫個”線上賓果產生器”, 是個全 javascript 的程式, 主要是可以給想玩賓果, 但又不想畫格子及填數字的朋友們, 有個小工具可用.

這裡用了一個隨機排序的函數, 引用自: http://javascript.about.com/library/blsort4.htm, 程式如下:

Array.prototype.shuffle = function() {
  var s = [];
  while (this.length) s.push(this.splice(Math.random() * this.length, 1));
  while (s.length) this.push(s.pop());
  return this;
}

利用了 Math.random() 隨機將一個陣列中的各元素互相交換的方式, 把陣列內容打散, 達成隨機排序, 使用方式就直接呼叫 aryNum.shuffle() 即可, 其中 aryNum 是一個自訂的陣列變數, 一開始先將 n*n 的數字填入, 再利用 shuffle() 函數進行打散.

另外值得一提的是利用了 @media print 的方式, 將操作的表單在列印時隱藏起來, 方便列印出來的賓果表格更清楚, 是一個 css 的技巧, 如下:

@media print
{
  .noprint {
    display: none;
        
  }
}

請到這裡玩看看: 線上賓果產生器: http://sample.diary.tw/bingo/

只需要填入維度及組數, 馬上就生出來所需要的賓果表格, 除了原來的 5*5 外, 想玩 6*6, 7*7 也不是問題. 快來玩看看囉!

標籤 bingo, css, Javascript, print, random, shuffle

VideoJS-HTML5的影片播放器

瀏覽器支援HTML5後, 可以利用 <video> 標籤來做影片的播放, 與之前需要 FLASH 的外掛不同, 讓瀏覽器本身就可以直接直援播放影音的功能.

不過有時需要有向前相容的功能, 也就是在不支援 <video> 這個 html5 標籤時, 也需要能播放, 這時候可以利用之前曾提過的 jw player (http://www.longtailvideo.com/players/) 或這篇文章要介紹的 VideoJS – http://videojs.com/

這個播放器利用了純 HTML5 的 <video> 標籤功能, 配合了可以自訂的 CSS 來產生播放器, 並同時支援了多款現行的瀏覽器, 以及向前相容的 FLASH 語法, 方便在撰寫影音播放器的開發者使用, 並且還有一個方便的產生器: http://videojs.com/embed-builder/ 還有多組 SKINS 可供應用: http://videojs.com/skins/ 真的還蠻方便的呢!

標籤 css, html5, Javascript, video, videojs

web版線上測試javascript-JSFIDDLE

這個 JSFIDDLE: http://jsfiddle.net/ 是一個線上版本, 進行 javascript 測試及除錯使用的方便工具, 包含了大量的 javascript frame, 有 MooTools, jQuery, Prototype, YUI, Glow, Dojo, Processing, ExtJS, Raphael, RightJS 及不使用 framework 多種選擇.

不僅如此, html, css 更是能分區編輯, 方便測試, 而且實作的程式結果也可以存下來, 方便日後再拿出來看, 或是進行 share 討論, 還能分支開發 (fork) 下去, 真的是十分方便實用的 javascript 工具.

例如這個測試的程式, 功能就是一直累加而已, 可以玩看看: http://jsfiddle.net/Ej4rC/

還可以直接 embed (透過 iframe ) 放到外站, 如下:

(iframe http://jsfiddle.net/Ej4rC/)

可以分享到外站, 一邊看程式, 而且可以馬上玩, 真是很不錯的工具, 快來玩看看吧!

標籤 css, html, Javascript, jQuery, utility, Web

程式技術

好用的CSS STYLE截圖

文章作者作者: tim
文章發佈日期 2009-06-16
在〈好用的CSS STYLE截圖〉中尚無留言

基本上, 這是一個小技巧, 早主要是應用在一個計數器圖片下載優化的作用. 以往會利用多個圖片分別製作出 1, 2, 3, 4, 5, …. 9, 0 共十張圖片來進行計數器的圖片結果輸出, 但若是一個 8位數的數字, 將會需要下載 8次(當然, 重覆的話會減少下載次數). 然而, 有一種新的方式, 就是利用 CSS 的 STYLE 將其要輸出的圖檔, 將 1, 2, 3, 4, 5, … 9, 0 做成一張橫的長條圖, 例如:

(圖片引用自: http://counter.fc2.com/tw/point02.html#p2-2)

而利用這個技巧, 將所需要輸出的單一數字部分, 只截出對應的位置即可, 這樣一來便可以有效節省 client 對 server 的 request , 也降低這種小型圖檔在 client 及 server 間的 traffic.

這篇文章將說明如何利用這樣的技巧, 其實很簡單, 主要是利用了 <div></div> 這個 tag, 配合以下 4個屬性即可達成:

background-image
background-position
width
height

也就是將圖檔, 利用 background-image 引入在 div 之中, 而 div 則利用了 width 及 height 指定了長寬, 最後再利用 background-position 來移動圖檔即可, 如下:

這個 2 數字, 是利用這個 HTML:

來達成的, 實際上用圖示來說明就像是這樣:

也就是其中的 width, height 指定為對應這個數字 2 的截圖大小, 為 17*21, 而 backgroud-position 則是將圖的位置由 0, 0, 移動座標為 -34, 0, 也就是往左移 34px (這張圖為 170*21, 所以每個數字佔用 17px, 若要取出 2這個數字, 則往左移動 2*17=34, 因為是往左移 34px, 所以是 position 是 -34px). 而超出 div 的 width, height 的部分, 也自然就不會顯示, 因為這是 div 的 background 背景圖.

若是要秀出 307 則使用如下語法:

如下:

上面有多了 float: left; 主要是為了讓這些 div 能 inline 連在一起, 不然會變直的.

接下來可以應用的就很多了, 例如某張大圖, 裡面有4個區域要拿出來做網頁用, 可以利用這個功能, 將其全部的一張大圖, 拿來截切出來放在網頁上, 例如這張大圖:

要取出其中的 4個部分, 可以利用以下語法, 例如:

同步中心:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -231px -198px;”> </div>

Windows CardSpace:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -4px -100px;”> </div>

Java:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -157px -3px;”> </div>

iSCSI啟動器:
<div style=”width: 65px; height: 83px; background-image: url(https://diary.tw/attach/1/1351411337.png); background-position: -82px -3px;”> </div>

這樣是不是很有趣又很方便呢? client 只需要 download 一次, 便能將所需要的圖檔都下載完成, 配合一點點的 CSS code 作法, 就能有效利用, 真是一舉兩得呢!

[2009/6/17 10:15]
根據高人指點, 這個是 CSS Sprites 的一個技巧, 詳情可以參考: http://waterlily-lsl.com/modules/article/view.article.php/170/c2

[2016/3/30 6:26]

另外可以參考這篇 w3c schools 的教學文章: http://www.w3schools.com/css/css_image_sprites.asp

標籤 crop, css, image

程式技術

利用CSS做簡單排版

文章作者作者: tim
文章發佈日期 2007-01-26
在〈利用CSS做簡單排版〉中尚無留言

傳統的表格式排版, 除了實作上比較麻煩外, 更令人不便的地方在於調整版型或移位, 解決這個問題最簡單容易的方法就是利用 CSS 來排版.

CSS可以很容易地調整版位, 內容不受影響, 但很容易地調度所有內容的格式及位置, 所以將 CSS 研究一下是很有幫助的. 例如我們想做一個兩欄式的排版, 左側功能, 中右方是內容, 下面是一個下標(footer)功能的版本可以很簡單的這麼安排:

<div class=coll>
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
</div>
<div class=colmain>
中央氣象局上午發佈低溫特報，明天起，寒流逐漸南下，各地的溫度將會明顯下降，預估28號，29號兩天，各地寒流籠罩，各地溫度明顯偏低，台南以北，東北部沿海空曠地區及金門馬祖，也晚及清晨出現攝氏十度以下的低溫，30號起到二月二號，各地的溫度仍然沒有回升的跡象，清晨仍維持十度以下的低溫，農漁養殖業應慎防寒害，民眾使用熱水器，應該要避免一氧化碳中毒，民眾應該注意保暖。未來一週，溫度都偏低。
</div>
<div class=footer>
<a href=#>contact us</a> copyright 2007
</div>

從上面看到三個排版用的 DIV 區塊, 不設定 CSS 的狀況下, 呈現的效果就是類似上面這樣, 參考: 連結, 但若加入了 CSS 就不同了, 我們分別將 coll class 設定為浮動靠左, 將 colmain 做一個左邊留空, 而 footer 做一個兩方清空的這樣三個內容:

閱讀全文

標籤 css, html, 排版

2024 年 4 月
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30