Feb 18, 2026
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:
https://sites.google.com/site/nrspub/blogger_gadgets/compact_navmenu.txt
https://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:
https://sites.google.com/site/nrspub/blogger_gadgets/topnav.txt?attredirects=0&d=1
https://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
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 (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/
Subscribe to:
Comments (Atom)
Home
