Aug 25, 2013

testfb

Aug 28, 2011

An Intuitive CSS Layout Technique


Almost all the css layout frameworks and artcles that I have encountered seem to rely only on the DIV tag to accomplish the task. Here I present a css layout technique that is inspired by the TABLE tag where I use DIV and SPAN tags similar to the TR and TD tags.

Here are two progressive examples:

Example #1:


<html>
<head><title>An Intuitive CSS Layout Technique</title></head>
<body style="margin: 0px;padding: 0px; font-style: courier">
<div style="width: 100%;height: 100%">
<div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
Header
</div>
<div style="float: left; width: 100%;height: 70%">
<span style="float: left; width: 15%; height: 100%;background-">
LeftNav
</span>
<span style="float: left;width: 70%;height: 100%;">
Content panel #1
</span>
<span style="float: right; width: 15%; height: 100%;background-">
RightNav
</span>
</div>
<div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
Footer
</div>
</div>
</body>
</html>



which produces this display:












Example #2:


<html>
<head><title>An Intuitive CSS Layout Technique</title></head>
<body style="margin: 0px;padding: 0px; font-style: courier">
<div style="width: 100%;height: 100%">
<div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
Header
</div>
<div style="float: left; width: 100%;height: 70%">
<span style="float: left; width: 15%; height: 100%;background-">
LeftNav
</span>
<span style="float: left;width: 70%;height: 100%;background-">
<span style="float: left;width: 70%;height: 100%;background-">
<div style="width: 100%;height: 80%;background-color:white;">
Cell 4
</div>
<div style="width: 100%;height: 20%;background-color:green;">
Cell 5
</div>
</span>
<span style="float: left;width: 30%;height: 60%;background-">
<div style="width: 100%;height: 40%;background-color:white;">
Cell 6
</div>
<div style="width: 100%;height: 60%;background-color:green;">
Cell 7
</div>
</span>
</span>
<span style="float: right; width: 15%; height: 100%;background-">
RightNav
</span>
</div>
<div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
Footer
</div>
</div>
</body>
</html>


which produces this display:

Apr 3, 2010

Compact_NavMenu

The compact navmenu at the right can be added as a blogger gadget. Fellow bloggers, if interested in adding such a gadget to their blogger site, can download the gadget here:

http://sites.google.com/site/nrspub/blogger_gadgets/compact_navmenu.txt

TopNav blogspot gadget

The horizontal navbar above can be added as a blogger gadget. Fellow bloggers, if interested in adding such a gadget to their blogger site, can download the gadget here:

http://sites.google.com/site/nrspub/blogger_gadgets/topnav.txt?attredirects=0&d=1

Mar 20, 2010

RSSFeedGadget

Fellow bloggers are welcome to download this gadget and customize it for their own feeds: http://hosting.gmodules.com/ig/gadgets/file/115303247827922652323/sailusfood-googlegadget5.xml

After customizing, the gadget should be published using:
http://code.google.com/apis/gadgets/docs/publish.html

Jun 7, 2009

Apache CXF-DOSGi demo

I have created a simple demo for the Apache CXF-DOSGi (http://cxf.apache.org/distributed-osgi.html). The demo code and usage can be accessed at: http://code.google.com/p/apache-cxf-dosgi-demo/