Eddy@Joomla!

CSS

02Dec

HTML5: Video

HTML&CSS / CSS / Eddy Chang

週五, 02 十二月 2011 05:14

HTML5中的Video依然是各大廠競爭激烈的地方，和Audio類似，在相容和影片格式依然會依不同的瀏覽器有不同的支援。Video也涉及了相關的控制API，並不是每個瀏覽器都支援得完整。

網路上有很多可以參考的文件，說明桌上型及手機設備中瀏覽器對HTML5的Video支援性的內容。我找到比較完整的是下面這個投影片：

HTML5 Video Explained

View more presentations from Mike Wilcox

在第81頁有說明手機設備的支援內容，當然如果你的目的是像我一樣要開發手機瀏覽器的應用，除了這些參考文件外，最應該了解的就是官方的開發文件：

iOS的影片格式支援（還有其他）

Android多媒體格式支援的文件

Video的用法除了<video>標籤外，還需要靠Javscript來控制其行為（當然每個瀏覽器有預設的控制列），下面這個是比較簡單的入門教學：

http://www.w3schools.com/html5/html5_video.asp

Tags: android | html5 | iphone | video

29Nov

CSS layout-background repeat-y on IE7

HTML&CSS / CSS / Eddy Chang

週二, 29 十一月 2011 01:50

製作向上下延申背景圖的div時，發現了IE7觀看會有空白一片的問題，例如：

<div>
 <div><img src="/images/menu_01.jpg" width="163" height="8" alt=""></div>
 <div style="background: url('/images/menu_02.jpg') repeat-y top left;"><jdoc:include type="modules" name="left" /></div>
 <div><img src="/images/menu_04.jpg" width="163" height="8" alt=""></div>
</div>

目前解決有找到兩個：

1.加入z-index:1，在用背景圖的那個div裡

2.加入overflow:auto，在用背景圖的那個div

測試過IE7（IE8模擬）兩種都可以正常顯示。

28Nov

CSS Layout - Dynamic width DIV

HTML&CSS / CSS / Eddy Chang

週一, 28 十一月 2011 18:18

<div style="height:42px; width:100%; margin:0; padding:0">
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
<div style="float:left;margin:0 ; padding:7px 0 0 0;height:42px; width:765px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?>
</div>
 <div style="float:left;margin:0; padding:0;"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
</div>

需改為以下，注意float變成一左一右，然後主內容在中間：

<div style="height:42px; width:100%;">
 <div style="float:left;width:23px"><img src="/images/content_title_01.jpg" width="23" height="42" alt=""></div>
 <div style="float:right;width:22px"><img src="/images/content_title_04.jpg" width="22" height="42" alt=""></div>
 <div style="display:block; margin-left:auto; margin-right: auto;padding:7px 0 0 0;height:42px; background: url('/images/content_title_02.jpg') repeat-x; "><?php echo $this->escape($this->item->title); ?></div>
 
</div>

中間的文字區域就可以動態延長寬度。用於中間文字區域的要有背景時。

測試過IE 7/8/9, Firefox, Chrome都ok。這個解法的來源是：

http://stackoverflow.com/questions/1359025/css-layout-dynamic-width-div