Tag Archives: Hack

Keeping footer always at the Bottom of the Page

In a recent website work I had to keep footer always at the bottom regardless of the content. If there is no content or very less content then footer use to come up instead of sticking at bottom of the page. Here is the CSS solution I found for the same:

Lets say the page structure is something like this:

<html>
<head><title>TITLE</title></head><body>
<div id="page">
 <div id="header">HEADER</div>
 <div id="content">CONTENT</div>
 <div id="footer">FOOTER</div>
</div>
</body>
</html>

Then we just need to use the following CSS code for footer which we need to keep in head section or some CSS file which will linked in head section:

<!--
#page
{
 position:relative;
 height:100%;
}
#content
{
 padding-bottom:40px;   /* Height of the footer */
}
#footer
{
 position:absolute;
 bottom:0;
 width:100%;
 height:40px;   /* Height of the footer */
}
-->

and we are done. Just test in any browser 🙂

This can be quite easily done without using any CSS if we are using <table> tag with height attribute instead of <div> tag. for e.g.

<html>
<head><title>TITLE</title></head>
<body>
 <table width="100%" height="100%">
 <tr><td valign="top">HEADER</td></tr>
 <tr><td valign="middle">CONTENT</td></tr>
 <tr><td valign="bottom">FOOTER</td></tr>
</table>
</body>
</html>

Here table height is set to 100% to use whole page and valign is used for vertical alignment of .  height attribute can be avoided using style element.

This will work fantastic but might fail in W3C validation as height attribute is no more supported so better use the solution with <div> tag with CSS.

Note: I tested this in Chrome browser only.

Have Fun 😉

Advertisements

Restore Show Desktop Shortcut

I accidentally lost shortcut button “Show Desktop” from Windows XP Taskbar’s Quick Launch section. I tried various probabilities and combination but couldn’t restore it. Though Windows+D command was handy but I wanted my shortcut button back. Finally after some googling got a simple solution …

Create a file with name “Show Desktop.scf” with following contents:
[Shell]
Command=2
IconFile=explorer.exe,3
[Taskbar]
Command=ToggleDesktop

Drag this file to Quick Launch area and it works.

Another simple way:
click Start>Run and type this command: regsvr32 /n /i:U shell32 and done.

Hide that Navigation Bar of Blogspot Blog

I never felt the need of navigation bar which always get appear with all the blogspot blog. Finally I found some cool ways (say hacks) to hide this nav bar from any blogspot blog by just adding few CSS line.

To start with list of different solutions, I will first suggest my own hack. Here is the cool one line solution by me which will work with new Blogger template.

/* Deep C Solution: http://ursdeep.blogspot.com
———————————————– */
#navbar-iframe { height: 0px; }

Just add above line in your blogger template in CSS style section inside head tag. This will simply reduce the size of nav bar to 0(zero) pixel and it won’t be visible anymore.

Now here is the list of other solutions suggested by different bloggers. I also tried these solutions which are working fine to hide nav bar from the blogspot blog.

Here is the first solution as suggested by Amit Agarwal in his blog :
Add this code anywhere in the blog template within style tag:
#navbar-iframe
{
height:0px;
visibility:hidden;
display:none;
}

This blog also suggest one more solution as:
/* By Aditya http://the-lastword.blogspot.com/
———————————————– */
div.navbar {
opacity:0.0;
display:none;
}

Another solution as suggested by Praveen in his blog :

/* Apnerve hack code
more info @: http://www.apnerve.blogspot.com
———————————————– */
#navbar #Navbar1 iframe{
display:none;
visibility:none;
}

or try this CSS code:

iframe
{
display:none !important;
}

Now final word: I am not sure if its legal or not to hide that nav bar from the blogspot blog.

If you know any other solution to do same functionality of hiding the nav bar then do aware me also.