<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Laughing Means A Lot To Me &#187; Web Development</title>
	<atom:link href="http://www.tkjune.com/category/web-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tkjune.com</link>
	<description>~~ That&#039;s what I&#039;m doing all the time ~~</description>
	<lastBuildDate>Fri, 06 Aug 2010 16:51:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
	<atom:link rel='hub' href='http://www.tkjune.com/?pushpress=hub'/>
		<item>
		<title>Simplified Chinese Language Pack for NextGEN Gallery</title>
		<link>http://www.tkjune.com/2009/04/13/simplified-chinese-language-pack-for-nextgen-gallery/</link>
		<comments>http://www.tkjune.com/2009/04/13/simplified-chinese-language-pack-for-nextgen-gallery/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 13:50:30 +0000</pubDate>
		<dc:creator>Tkjune</dc:creator>
				<category><![CDATA[I'm doing...]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[NextGEN Gallery]]></category>

		<guid isPermaLink="false">http://www.tkjune.com/?p=385</guid>
		<description><![CDATA[NextGEN Gallery is a very powerful plugin for WordPress that can manage the photo easily. It has many features and provides multiple language support. I&#39;ve just made the Simplified Chinese language pack for the current version. Download: Simplified Chinese Language Pack for NextGEN Gallery 1.21 1.33 1.43 1.52 1.55 (Following bug has been fixed after [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="NextGEN Gallery in Chinese" class="alignnone size-full wp-image-387" height="285" src="http://www.tkjune.com/uploads/2009/04/nextgen-gallery-in-chinese.png" title="NextGEN Gallery in Chinese" width="460" /></p>
<p><a href="http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/">NextGEN Gallery</a> is a very powerful plugin for WordPress that can manage the photo easily. It has many features and provides multiple language support. I&#39;ve just made the Simplified Chinese language pack for the current version. Download: <a href="http://www.tkjune.com/uploads/2009/04/nggallery-zh_cn.zip" title="Simplified Chinese Language Pack for NextGEN Gallery">Simplified Chinese Language Pack for NextGEN Gallery <del datetime="2009-07-01T06:29:36+00:00">1.21</del> <del datetime="2010-01-09T09:10:26+00:00">1.33</del> <strike>1.43</strike> <strike>1.52</strike> 1.55</a></p>
<p>(Following bug has been fixed after 1.21)</p>
<p><strike>There is a bug in this version when using other languages which will result in a notice&#39;s translation can not be shown. It a very small issue but if you are completist you can fix it in this way: Open this file<em> [NextGEN plugin folder]/lib/core.php</em> and find out line 419.&nbsp; Replace it with following code:
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline">$result = sprintf(&amp;nbsp; __( &amp;#39;Note : Based on your server memory limit you should not upload larger images then &amp;lt;strong&amp;gt;%d x %d&amp;lt;/strong&amp;gt; pixel&amp;#39;, &amp;#39;nggallery&amp;#39; ), $size[&amp;#39;width&amp;#39;], $size[&amp;#39;height&amp;#39;]);</li></ol></div>
<p> This notice appears in [Add Gallery / Images] -&gt; [Upload a Zip-file] and similar pages. Well, in fact, there are two more bugs if you really want to fix... Open this file<em> [NextGEN plugin folder]/admin/tinymce/window.php</em> and find out line 29-30.&nbsp; Replace them with following code:
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline">&lt;/strike&gt;&lt;/p&gt;</li>
<li>&lt;p&gt;&amp;nbsp;&lt;/p&gt;</li>
<li>&lt;p&gt;&lt;strike&gt;</li></ol></div>
<p></strike> Checkout <a href="http://www.760s.com/?page_id=6">what I did (very simple)</a> with this wonderful plugin and know more about <a href="http://nextgen.boelinger.com/">how to use it</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tkjune.com/2009/04/13/simplified-chinese-language-pack-for-nextgen-gallery/feed/</wfw:commentRss>
		<slash:comments>52</slash:comments>
		</item>
		<item>
		<title>Coding standards</title>
		<link>http://www.tkjune.com/2009/04/13/coding-standards/</link>
		<comments>http://www.tkjune.com/2009/04/13/coding-standards/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 02:56:41 +0000</pubDate>
		<dc:creator>Tkjune</dc:creator>
				<category><![CDATA[I'm learning]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.tkjune.com/?p=382</guid>
		<description><![CDATA[For a beginner of programing, it's a good habit of writing codes in standard format. There are different rules in different companies/teams. Better than form your own, follow a standard of a popular application could be easier and more acceptable by people. For example, the WordPress Coding Standards and Inline Documentation. Some good approach I [...]]]></description>
			<content:encoded><![CDATA[<p>For a beginner of programing, it's a good habit of writing codes in standard format. There are different rules in different companies/teams. Better than form your own, follow a standard of a popular application could be easier and more acceptable by people. For example, the <a title="WordPress Coding Standards" href="http://codex.wordpress.org/WordPress_Coding_Standards">WordPress Coding Standards</a> and <a title="WordPress Inline Documentation" href="http://codex.wordpress.org/Inline_Documentation">Inline Documentation</a>.<br />
Some good approach I just learned from it:</p>
<ul>
<li>When doing logical comparisons always put the variable on the right side.<br />
I saw this in some codes, now I know why: If you forget an equal sign it'll throw a parse error instead of just evaluating true and executing the statement. It really takes no extra time to do, so if this saves one bug it's worth it.</li>
<li>Use <strong>real tabs</strong> and <strong>not spaces</strong>, as this allows the most flexibility across clients.<br />
In some courses, it's suggested that using spaces instead of tabs. Either of they has their reasons. As mentioned above, using the standards of popular applications could be better. And I have already had the habit of using tabs, so I just follow WordPress here.</li>
<li>Tabs should be used at the beginning of the line and spaces should be used mid-line.<br />
Exception for previous point: if you have a block of code that would be more readable if things aligned, use spaces.</li>
<li><a class="extiw" title="wikipedia:Ternary operation" href="http://en.wikipedia.org/wiki/Ternary_operation">Ternary</a> operators are fine, but always have them test if the statement is true, not false. Otherwise it just gets confusing.
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">// GOOD example:</span></li>
<li><span style="color: #ffa500;">// (if statement is true) ? (do this) : (if false, do this);</span></li>
<li><span style="color: #00008b;">$musictype</span><span style="color: Gray;"> = </span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: #8b0000;">'</span><span style="color: Red;">jazz</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> == </span><span style="color: #00008b;">$music</span><span style="color: Gray;"> </span><span style="color: Olive;">)</span><span style="color: Gray;"> ? </span><span style="color: #8b0000;">'</span><span style="color: Red;">cool</span><span style="color: #8b0000;">'</span><span style="color: Gray;"> : </span><span style="color: #8b0000;">'</span><span style="color: Red;">blah</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></li>
</ol></div>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.tkjune.com/2009/04/13/coding-standards/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Feeling web-based 3D graphics</title>
		<link>http://www.tkjune.com/2009/03/18/feeling-web-based-3d-graphics/</link>
		<comments>http://www.tkjune.com/2009/03/18/feeling-web-based-3d-graphics/#comments</comments>
		<pubDate>Wed, 18 Mar 2009 03:20:28 +0000</pubDate>
		<dc:creator>Tkjune</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Safari]]></category>

		<guid isPermaLink="false">http://www.tkjune.com/?p=376</guid>
		<description><![CDATA[After turning to Mac, in a sudden, I'm thinking why it's so attractive to me? When there are a lot of reasons like OS X is more stable, virus free (though partly because of  market share is smaller than Windows) and so on, it's much more important to me that OS X has a great [...]]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-377 alignright" title="3D graphics on mobile Safari" src="http://www.tkjune.com/uploads/2009/03/mobilesafari_3d_css.png" alt="3D graphics on mobile Safari" width="207" height="385" /></p>
<p>After turning to Mac, in a sudden, I'm thinking why it's so attractive to me? When there are a lot of reasons like OS X is more stable, virus free (though partly because of  market share is smaller than Windows) and so on, it's much more important to me that OS X has a great user interface. I got the impression from friends that Mac has a strong graphic engine, more powerful than PC. Since they are using similar hardware, then it's all about the beauty of software.</p>
<p>Apple mobile system inherits this.  Safari on iPhone could provide web-based 3D graphic. 3D graphic is not new to web browser. JavaScript, Java Applet, Flash has been working on it all the time. You can even start a 3D virtual tour of  <a title="The Forbidden City in 3D" href="http://www.beyondspaceandtime.org/FCBSTWeb/web/index.html">THE FOBIDDEN CITY</a> which requires extra plug-in. Powered by <a title="WebKit" href="http://webkit.org/">WebKit</a>, Safari supports <a title="CSS Transforms" href="http://webkit.org/blog/130/css-transforms/">CSS Transforms</a> and now <a title="CSS Animation" href="http://webkit.org/blog/324/css-animation-2/">CSS Animation</a>. With <a title="Safari 4" href="http://www.apple.com/safari/download/">Safari 4</a>, you can see <a title="Falling leaves in Safari 4" href="http://webkit.org/blog-files/leaves/index.html">beautiful leaves falling here</a>. The more wonderful thing is on iPhone OS:</p>
<p><object width="400" height="300" data="http://vimeo.com/moogaloop.swf?clip_id=3576303&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=3576303&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /></object></p>
<p>Though this 3D animation can be created by JavaScript too, WebKit's CSS transforms offer greater performance. And CSS could be handier for Web UI designer to create and manipulate elements to interact with users.</p>
<p>"It's hardware accelerated, and all the timing and intervals needed for the animations are handled more efficiently by Safari itself instead of Safari's JavaScript engine," Peter Zich, a Chicago-area developer, told Ars. "The framerate for JS animations on the iPhone usually doesn't get past 5fps, for instance, while with CSS it is far more."</p>
<p>Personally, I'm using Firefox more for there are many convenient plug-ins. Hope it could catch up soon.</p>
<p>When 3D graphic control becomes a standard of industry and more web applications get involved, we are getting one step near to the <a title="Movie: The Matrix (1999)" href="http://www.imdb.com/title/tt0133093/">Matrix</a> world.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tkjune.com/2009/03/18/feeling-web-based-3d-graphics/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Fix the bug of ANCHOR not working in IE</title>
		<link>http://www.tkjune.com/2009/02/23/fix-the-bug-of-anchor-not-working-in-ie/</link>
		<comments>http://www.tkjune.com/2009/02/23/fix-the-bug-of-anchor-not-working-in-ie/#comments</comments>
		<pubDate>Mon, 23 Feb 2009 08:17:46 +0000</pubDate>
		<dc:creator>Tkjune</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://www.tkjune.com/?p=359</guid>
		<description><![CDATA[ANCHOR may not work in IE when it's working fine with Firefox. Check the HTML code to see if the ANCHOR is written in this way: &#60;div&#62;&#60;a name=&#34;anything&#34;&#62;&#60;/a&#62;&#60;/div&#62; Then it can not work in IE. Don't know why. Maybe another bug? Note that there's nothing in the ANCHOR tag. Here's how to fix it: Simply [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.tkjune.com/uploads/2009/02/broken-anchor-in-ie.jpg" alt="Broken anchor in IE" title="Broken anchor in IE" width="180" height="135" class="alignnone size-full wp-image-368" /><br />
ANCHOR may not work in IE when it's working fine with Firefox. Check the HTML code to see if the ANCHOR is written in this way:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">name</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">anything</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>Then it can not work in IE. Don't know why. Maybe another bug?<br />
Note that there's nothing in the ANCHOR tag. Here's how to fix it: Simply add something even a space in it. For example like this:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">name</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">anything</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Navy;">&amp;nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li></ol></div>
]]></content:encoded>
			<wfw:commentRss>http://www.tkjune.com/2009/02/23/fix-the-bug-of-anchor-not-working-in-ie/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Auto-stretch asymmetric background</title>
		<link>http://www.tkjune.com/2008/10/29/auto-stretch-asymmetric-background/</link>
		<comments>http://www.tkjune.com/2008/10/29/auto-stretch-asymmetric-background/#comments</comments>
		<pubDate>Tue, 28 Oct 2008 17:01:23 +0000</pubDate>
		<dc:creator>Tkjune</dc:creator>
				<category><![CDATA[Web Development]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.tkjune.com/?p=163</guid>
		<description><![CDATA[When designing the website, sometimes I need the background to be asymmetric. Here is a example: I want to keep the main content in the center of the page while extending the green bar marked by the blue box to the right. The problem is, the background attribute of body tag is already used, both [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.tkjune.com/uploads/sample/auto-stretch-asymmetric-background/cooperation.html"><img class="gallery" title="Auto-stretch asymmetric background" src="http://www.tkjune.com/uploads/2008/10/auto-stretch-asymmetric-background-500x230.jpg" alt="Auto-stretch asymmetric background" width="500" /></a></p>
<p>When designing the website, sometimes I need the background to be asymmetric. Here is a example: I want to keep the main content in the center of the page while extending the green bar marked by the blue box to the right. The problem is, the background attribute of body tag is already used, both the background-color and background-image. The background-image is set to a fix-height, horizontal repeated gray bar as the main background of the content. And the background-color is set to gray to make sure the background-image can merge into it at the bottom area when enlarge the window vertically. I want an extra background bar for the menu which is also extensible. That is I have to use other elements' background attribute to achieve the goal. </p>
<p>It's somewhat easy to make it with TABLE. In this way:<br />
Put a 3 column table in the body tag. Set the table's width to 100%. Set a fixed width for the middle column, let's say 960px. Then the other two columns extend to left and right automatically. Just set a background image for the right column is ok.</p>
<p>But it's now CSS age. I tried many times and here is what I got:<br />
<span id="more-163"></span><br />
HTML:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">globalWrapper</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">header</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">extraBG</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>CSS:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">*</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span><span style="color: Green;">margin:</span><span style="color: Maroon;">0</span><span style="color: Gray;">; </span><span style="color: Green;">padding:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">body</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: #00008b;">#d2d2d2</span><span style="color: Gray;"> url(images/bg.jpg) </span><span style="color: Red;">repeat-x</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Red;">center</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">/</span><span style="color: Blue;">*</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Set</span><span style="color: Gray;"> </span><span style="color: Blue;">fixed</span><span style="color: Gray;"> </span><span style="color: Blue;">width</span><span style="color: Gray;"> </span><span style="color: Blue;">for</span><span style="color: Gray;"> </span><span style="color: Blue;">main</span><span style="color: Gray;"> </span><span style="color: Blue;">content</span><span style="color: Gray;"> </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Blue;">#globalWrapper</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">960</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">margin:</span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">auto</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">/</span><span style="color: Blue;">*</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Set</span><span style="color: Gray;"> </span><span style="color: Blue;">background</span><span style="color: Gray;"> </span><span style="color: Blue;">for</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">header</span><span style="color: Gray;">, </span><span style="color: Blue;">which</span><span style="color: Gray;"> </span><span style="color: Blue;">is</span><span style="color: Gray;"> </span><span style="color: Blue;">not</span><span style="color: Gray;"> </span><span style="color: Blue;">extensible</span><span style="color: Gray;"> </span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Blue;">#header</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">float:</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">139</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background-image:</span><span style="color: Gray;">url(images/bg_head.jpg)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background-repeat:</span><span style="color: Red;">repeat-x</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background-position:</span><span style="color: Maroon;">202</span><span style="color: Red;">px</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">/</span><span style="color: Blue;">*</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Make</span><span style="color: Gray;"> </span><span style="color: Blue;">a</span><span style="color: Gray;"> </span><span style="color: Blue;">container</span><span style="color: Gray;"> </span><span style="color: Blue;">fill</span><span style="color: Gray;"> </span><span style="color: Blue;">with</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">background</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">Especially</span><span style="color: Gray;">, </span><span style="color: Blue;">set</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">position</span><span style="color: Gray;"> </span><span style="color: Blue;">to</span><span style="color: Gray;"> </span><span style="color: Blue;">absolute</span><span style="color: Gray;">. </span><span style="color: Blue;">So</span><span style="color: Gray;"> </span><span style="color: Blue;">it</span><span style="color: Gray;"> </span><span style="color: Blue;">can</span><span style="color: Gray;"> </span><span style="color: Blue;">cover</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">area</span><span style="color: Gray;"> </span><span style="color: Blue;">of</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">main</span><span style="color: Gray;"> </span><span style="color: Blue;">content</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">I</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">don</span><span style="color: Gray;">'</span><span style="color: Blue;">t</span><span style="color: Gray;"> </span><span style="color: Blue;">do</span><span style="color: Gray;"> </span><span style="color: Blue;">this</span><span style="color: Gray;"> </span><span style="color: Blue;">in</span><span style="color: Gray;"> </span><span style="color: Blue;">globalWrapper</span><span style="color: Gray;"> </span><span style="color: Blue;">because</span><span style="color: Gray;"> </span><span style="color: Blue;">it</span><span style="color: Gray;">'</span><span style="color: Blue;">s</span><span style="color: Gray;"> </span><span style="color: Blue;">fix-width</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">I</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">also</span><span style="color: Gray;"> </span><span style="color: Blue;">don</span><span style="color: Gray;">'</span><span style="color: Blue;">t</span><span style="color: Gray;"> </span><span style="color: Blue;">do</span><span style="color: Gray;"> </span><span style="color: Blue;">this</span><span style="color: Gray;"> </span><span style="color: Blue;">in</span><span style="color: Gray;"> </span><span style="color: Blue;">body</span><span style="color: Gray;"> </span><span style="color: Blue;">style</span><span style="color: Gray;"> </span><span style="color: Blue;">because</span><span style="color: Gray;"> </span><span style="color: Blue;">there</span><span style="color: Gray;"> </span><span style="color: Blue;">is</span><span style="color: Gray;"> </span><span style="color: Blue;">already</span><span style="color: Gray;"> </span><span style="color: Blue;">background</span><span style="color: Gray;"> </span><span style="color: Blue;">set</span><span style="color: Gray;"> </span><span style="color: Blue;">in</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">body</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">Set</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">z-index</span><span style="color: Gray;"> </span><span style="color: Blue;">to</span><span style="color: Gray;"> -99 </span><span style="color: Blue;">to</span><span style="color: Gray;"> </span><span style="color: Blue;">make</span><span style="color: Gray;"> </span><span style="color: Blue;">sure</span><span style="color: Gray;"> </span><span style="color: Blue;">it</span><span style="color: Gray;">'</span><span style="color: Blue;">s</span><span style="color: Gray;"> </span><span style="color: Blue;">under</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">main</span><span style="color: Gray;"> </span><span style="color: Blue;">content</span><span style="color: Gray;">.</span></li>
<li><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Blue;">#extraBG</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Red;">absolute</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">139</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">left:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">top:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;">url(images/bg_head.jpg) </span><span style="color: Red;">repeat-x</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">z-index:</span><span style="color: Gray;">-</span><span style="color: Maroon;">99</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">/</span><span style="color: Blue;">*</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">This</span><span style="color: Gray;"> </span><span style="color: Blue;">could</span><span style="color: Gray;"> </span><span style="color: Blue;">be</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">most</span><span style="color: Gray;"> </span><span style="color: Blue;">important</span><span style="color: Gray;"> </span><span style="color: Blue;">one</span><span style="color: Gray;">. </span><span style="color: Blue;">It</span><span style="color: Gray;"> </span><span style="color: Blue;">makes</span><span style="color: Gray;"> </span><span style="color: Blue;">a</span><span style="color: Gray;"> </span><span style="color: Blue;">cover</span><span style="color: Gray;"> </span><span style="color: Blue;">with</span><span style="color: Gray;"> </span><span style="color: Blue;">same</span><span style="color: Gray;"> </span><span style="color: Blue;">background</span><span style="color: Gray;"> </span><span style="color: Blue;">as</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">body</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">Float</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">to</span><span style="color: Gray;"> </span><span style="color: Blue;">left</span><span style="color: Gray;"> </span><span style="color: Blue;">and</span><span style="color: Gray;"> </span><span style="color: Blue;">set</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">width</span><span style="color: Gray;"> </span><span style="color: Blue;">to</span><span style="color: Gray;"> 50% </span><span style="color: Blue;">to</span><span style="color: Gray;"> </span><span style="color: Blue;">mask</span><span style="color: Gray;"> </span><span style="color: Blue;">half</span><span style="color: Gray;"> </span><span style="color: Blue;">page</span><span style="color: Gray;">.</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">Then</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">it</span><span style="color: Gray;"> </span><span style="color: Blue;">looks</span><span style="color: Gray;"> </span><span style="color: Blue;">like</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">green</span><span style="color: Gray;"> </span><span style="color: Blue;">bar</span><span style="color: Gray;"> </span><span style="color: Blue;">extends</span><span style="color: Gray;"> </span><span style="color: Blue;">to</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">right</span><span style="color: Gray;">, </span><span style="color: Blue;">no</span><span style="color: Gray;"> </span><span style="color: Blue;">matter</span><span style="color: Gray;"> </span><span style="color: Blue;">how</span><span style="color: Gray;"> </span><span style="color: Blue;">big</span><span style="color: Gray;"> </span><span style="color: Blue;">the</span><span style="color: Gray;"> </span><span style="color: Blue;">window</span><span style="color: Gray;"> </span><span style="color: Blue;">is</span><span style="color: Gray;">.</span></li>
<li><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li>
<li><span style="color: Blue;">#extraBG</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">div</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: #00008b;">#d2d2d2</span><span style="color: Gray;"> url(images/bg.jpg) </span><span style="color: Red;">repeat-x</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">50</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">139</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">float:</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
]]></content:encoded>
			<wfw:commentRss>http://www.tkjune.com/2008/10/29/auto-stretch-asymmetric-background/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
