<?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>gego.info &#187; CSS</title>
	<atom:link href="http://www.gego.info/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.gego.info</link>
	<description>gernot's nearly up-to-date blog</description>
	<lastBuildDate>Tue, 31 Jan 2012 08:04:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>CSS &#8211; Dynamic Menus</title>
		<link>http://www.gego.info/2006/01/26/css-dynamic-menus/</link>
		<comments>http://www.gego.info/2006/01/26/css-dynamic-menus/#comments</comments>
		<pubDate>Wed, 25 Jan 2006 22:04:13 +0000</pubDate>
		<dc:creator>gernot</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.gego.info/index.php/2006/01/26/css-dynamic-menus/</guid>
		<description><![CDATA[Forget javaScripts or other 'stuff' for making dynamic Menus, its easier and better with CSS.]]></description>
			<content:encoded><![CDATA[<p>Forget javaScripts or other &#8216;stuff&#8217; for making dynamic Menus, its easier and better with CSS.</p>
<p><strong>NOTE:</strong> For <strong>IE </strong>usage download IE Hover Hack here: <a href="http://www.gego.info/wp-content/uploads/css-dynamic-menu/csshover.htc">csshover.htc</a><br />
Here you can see a <strong>preview </strong>of dynamic menu: <a href="http://www.gego.info/wp-content/uploads/css-dynamic-menu/dynmenu.html">goTo dynamic css menu</a></p>
<h2>CSS Dynamic Menu Code</h2>
<blockquote>
<p><font color="#999999">/*You need to set behavior in body so IE Hack can Work*/</font><br />
<font color="#cc3300">body  </font>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 62.5%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;font-family: &#8216;Lucida Grande&#8217;, Verdana, Arial, Sans-Serif;<br />
&nbsp;&nbsp;&nbsp;&nbsp;text-align: center; &nbsp;&nbsp;&nbsp;&nbsp;<br />
<font color="#999999"> /*IE Hover Hack*/</font><br />
&nbsp;&nbsp;&nbsp;&nbsp;behavior:url(&#8220;csshover.htc&#8221;);<br />
}</p>
<p><font color="#cc3300">a:hover</font>  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;background: yellow;<br />
}</p>
<p><font color="#cc3300">ul  </font>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;display: inline;<br />
}</p>
<p><font color="#cc3300">ul li  </font>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;list-style-type: none;<br />
&nbsp;&nbsp;&nbsp;&nbsp;position: relative;<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background: #FFE;<br />
&nbsp;&nbsp;&nbsp;&nbsp;width:10em;<br />
&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #000;<br />
&nbsp;&nbsp;&nbsp;&nbsp;<font color="#999999">/*First list items float left*/</font><br />
&nbsp;&nbsp;&nbsp;&nbsp;float: left;<br />
}</p>
<p><font color="#cc3300">ul li a</font>  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;display: block;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 5px 7px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background: #FFF;<br />
}</p>
<p><font color="#cc3300">ul li ul li</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;/*Stop floating left*/<br />
&nbsp;&nbsp;&nbsp;&nbsp;clear: both;<br />
}</p>
<p><font color="#999999">/*Here the hovering starts*/</font><br />
<font color="#cc3300"> ul li:hover ul</font>  {<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: 10em;<br />
&nbsp;&nbsp;&nbsp;&nbsp;top: 2.3em;<br />
&nbsp;&nbsp;&nbsp;&nbsp;left: -0.1em;<br />
}</p>
<p><font color="#cc3300">ul ul, li:hover ul ul  </font>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;display:none;<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: 10em;<br />
}</p>
<p><font color="#cc3300">li:hover ul </font>{<br />
&nbsp;&nbsp;&nbsp;&nbsp;display:block;<br />
&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<br />
&nbsp;&nbsp;&nbsp;&nbsp;left: 100%;<br />
}</p>
<p><font color="#cc3300">li:hover li:hover ul</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;display:block;<br />
&nbsp;&nbsp;&nbsp;&nbsp;position: absolute;<br />
&nbsp;&nbsp;&nbsp;&nbsp;top: -0.1em;<br />
&nbsp;&nbsp;&nbsp;&nbsp;left: 100%;<br />
}</p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.gego.info/2006/01/26/css-dynamic-menus/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CSS &#8211; fluid vs. fixed Design</title>
		<link>http://www.gego.info/2006/01/25/css-fluid-vs-fixed-design/</link>
		<comments>http://www.gego.info/2006/01/25/css-fluid-vs-fixed-design/#comments</comments>
		<pubDate>Wed, 25 Jan 2006 19:21:48 +0000</pubDate>
		<dc:creator>gernot</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[webstandards]]></category>

		<guid isPermaLink="false">http://www.gego.info/index.php/2006/01/25/css-fluid-vs-fixed-design/</guid>
		<description><![CDATA[small CSS snippet for fluid or fixed Page.]]></description>
			<content:encoded><![CDATA[<p>Everyone knows the problem:  Webpages which have too much text on too small space or vica versa.  The solution is either make the page fluid or fixed, and with the help of css this is pretty simple:</p>
<h2>fixed</h2>
<blockquote><p><font color="#cc3300"> body</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-color: #000;<br />
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;<br />
}<br />
<font color="#cc3300"> #page</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: 760px;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background: #fff;<br />
}
</p></blockquote>
<p><a href="http://www.gego.info/wp-content/uploads/2006/01/fixed.html">click here for example</a> Here the page never changes its size.<br />
Try and change the size of the browser window.</p>
<h2>fluid</h2>
<blockquote><p><font color="#cc3300"> body</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background-color: #000;<br />
&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;<br />
}<br />
<font color="#cc3300"> #page</font> {<br />
&nbsp;&nbsp;&nbsp;&nbsp;margin: auto;<br />
&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<br />
&nbsp;&nbsp;&nbsp;&nbsp;width: 90%;<br />
&nbsp;&nbsp;&nbsp;&nbsp;background: #fff;<br />
}
</p></blockquote>
<p><a href="http://www.gego.info/wp-content/uploads/2006/01/fluid.html">click here for example</a> Here the page always changes its size to fit to the resolution or browser window<br />
Try and change the size of the browser window.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.gego.info/2006/01/25/css-fluid-vs-fixed-design/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

