WebDev Notes

Multi-Level Nav Menu Gadget

2026-02-18T09:47:00.000-05:00

An Intuitive CSS Layout Technique

2011-08-28T15:21:00.110-04:00

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:

Compact_NavMenu

2010-04-03T18:57:00.001-04:00

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:

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

TopNav blogspot gadget

2010-04-03T18:44:00.004-04:00

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:

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

RSSFeedGadget

2010-03-20T15:58:00.006-04:00

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

Apache CXF-DOSGi demo

2009-06-07T18:10:00.001-04:00

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