tag:blogger.com,1999:blog-12156232426186223352024-03-05T01:46:09.612-05:00WebDev NotesNalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-1215623242618622335.post-54054500038546794722011-08-28T15:21:00.110-04:002011-08-29T05:48:48.717-04:00An Intuitive CSS Layout Technique<div style="FLOAT: left">
<br />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.
<br />
<br />Here are two progressive examples:
<br />
<br />Example #1:
<br /><span style="background-color:#f0fff0;">
<br /><code><pre>
<br /><html>
<br /><head><title>An Intuitive CSS Layout Technique</title></head>
<br /><body style="margin: 0px;padding: 0px; font-style: courier">
<br /> <div style="width: 100%;height: 100%">
<br /> <div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
<br /> Header
<br /> </div>
<br /> <div style="float: left; width: 100%;height: 70%">
<br /> <span style="float: left; width: 15%; height: 100%;background-">
<br /> LeftNav
<br /> </span>
<br /> <span style="float: left;width: 70%;height: 100%;">
<br /> Content panel #1
<br /> </span>
<br /> <span style="float: right; width: 15%; height: 100%;background-">
<br /> RightNav
<br /> </span>
<br /> </div>
<br /> <div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
<br /> Footer
<br /> </div>
<br /> </div>
<br /></body>
<br /></html>
<br /></pre></code>
<br /><p>
<br /></span>
<br />which produces this display:
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2W-xDSzlspgFK6xAyDLbf-FNhF_sagfko1uSzj4P7l7-0TAoGp1L-QlJf27ZksFZy1sCj4jNPSNmOgIiRpzqk3J7x9E3flkJG2bvAdKMs79IORCEyk5aBYhJKHGt8l5ZzxtXR5TlEMu75/s1600/ex1.PNG"><img id="BLOGGER_PHOTO_ID_5646056663289079426" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 320px; CURSOR: hand; HEIGHT: 182px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2W-xDSzlspgFK6xAyDLbf-FNhF_sagfko1uSzj4P7l7-0TAoGp1L-QlJf27ZksFZy1sCj4jNPSNmOgIiRpzqk3J7x9E3flkJG2bvAdKMs79IORCEyk5aBYhJKHGt8l5ZzxtXR5TlEMu75/s320/ex1.PNG" border="0" /></a>
<br />
<br />
<br /></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p></p>
<br /><p>Example #2:
<br /><span style="background-color:#f0fff0;">
<br /></p><code><pre>
<br /><html>
<br /><head><title>An Intuitive CSS Layout Technique</title></head>
<br /><body style="margin: 0px;padding: 0px; font-style: courier">
<br /> <div style="width: 100%;height: 100%">
<br /> <div style="float: left; width: 100%; height: 15%;background-color:#5CB3FF;">
<br /> Header
<br /> </div>
<br /> <div style="float: left; width: 100%;height: 70%">
<br /> <span style="float: left; width: 15%; height: 100%;background-">
<br /> LeftNav
<br /> </span>
<br /> <span style="float: left;width: 70%;height: 100%;background-">
<br /> <span style="float: left;width: 70%;height: 100%;background-">
<br /> <div style="width: 100%;height: 80%;background-color:white;">
<br /> Cell 4
<br /> </div>
<br /> <div style="width: 100%;height: 20%;background-color:green;">
<br /> Cell 5
<br /> </div>
<br /> </span>
<br /> <span style="float: left;width: 30%;height: 60%;background-">
<br /> <div style="width: 100%;height: 40%;background-color:white;">
<br /> Cell 6
<br /> </div>
<br /> <div style="width: 100%;height: 60%;background-color:green;">
<br /> Cell 7
<br /> </div>
<br /> </span>
<br /> </span>
<br /> <span style="float: right; width: 15%; height: 100%;background-">
<br /> RightNav
<br /> </span>
<br /> </div>
<br /> <div style="float: left; width: 100%; height: 15%;background-color:#98AFC7;">
<br /> Footer
<br /> </div>
<br /> </div>
<br /></body>
<br /></html>
<br /></pre></code>
<br /></span>
<br />which produces this display:
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYhWmCKeiB2fZ6_O3gExH8s0R-vfhhlnZikg9DGPKJl2hdTTteoz_1X67fUJWLuHrlbVyA7rp-jNfc3VU6O4PZ-Sgvfgjqj1bux8uXXdvrOU6UFg6Z4q_PQ4PxT0SIKUh4k7oE_9s5XyX/s1600/ex2.PNG"><img id="BLOGGER_PHOTO_ID_5646067805595606066" style="FLOAT: left; MARGIN: 0px 10px 10px 0px; WIDTH: 320px; CURSOR: hand; HEIGHT: 162px" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDYhWmCKeiB2fZ6_O3gExH8s0R-vfhhlnZikg9DGPKJl2hdTTteoz_1X67fUJWLuHrlbVyA7rp-jNfc3VU6O4PZ-Sgvfgjqj1bux8uXXdvrOU6UFg6Z4q_PQ4PxT0SIKUh4k7oE_9s5XyX/s320/ex2.PNG" border="0" /></a>
<br /></div>Nalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.com1tag:blogger.com,1999:blog-1215623242618622335.post-50641921222139659092010-04-03T18:57:00.001-04:002010-04-03T19:00:25.725-04:00Compact_NavMenuThe 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:<br /><br /><a href="http://sites.google.com/site/nrspub/blogger_gadgets/compact_navmenu.txt">http://sites.google.com/site/nrspub/blogger_gadgets/compact_navmenu.txt</a>Nalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.com0tag:blogger.com,1999:blog-1215623242618622335.post-40907901917409944842010-04-03T18:44:00.004-04:002010-04-03T18:56:20.649-04:00TopNav blogspot gadgetThe 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:<br /><br /><a href="http://sites.google.com/site/nrspub/blogger_gadgets/topnav.txt?attredirects=0&d=1">http://sites.google.com/site/nrspub/blogger_gadgets/topnav.txt?attredirects=0&d=1</a>Nalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.com0tag:blogger.com,1999:blog-1215623242618622335.post-84156557380122987882010-03-20T15:58:00.006-04:002010-04-04T12:07:59.979-04:00RSSFeedGadgetFellow bloggers are welcome to download this gadget and customize it for their own feeds: <a href="http://hosting.gmodules.com/ig/gadgets/file/115303247827922652323/sailusfood-googlegadget5.xml">http://hosting.gmodules.com/ig/gadgets/file/115303247827922652323/sailusfood-googlegadget5.xml</a><br /><br />After customizing, the gadget should be published using:<br /><a href="http://code.google.com/apis/gadgets/docs/publish.html">http://code.google.com/apis/gadgets/docs/publish.html</a><br /><br /><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/115303247827922652323/sailusfood-googlegadget5.xml&synd=open&w=180&h=180&title=SailusFood_FeedGadget&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>Nalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.com0tag:blogger.com,1999:blog-1215623242618622335.post-40651796096144416102009-06-07T18:10:00.001-04:002009-06-09T19:57:23.918-04:00Apache CXF-DOSGi demoI 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: <a href="http://code.google.com/p/apache-cxf-dosgi-demo/">http://code.google.com/p/apache-cxf-dosgi-demo/</a>Nalla Senthilnathanhttp://www.blogger.com/profile/16943363672635420201noreply@blogger.com0