Often we realise that putting 100% height to main Container does not cover the whole browser height.
HTML is the stack of container where any child element inherit the properties of its parent element unless properties specified explicitly.
now when we give "100%" height to our div it takes 100% height of its parent element.
So,
<html>
<body>
<div class="mainWrapper">This is My Wrapper Div </div>
</body>
</html>
CSS:
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}
Now here, <body> is the parent element of <div> so <div> will take 100% of <body> height. But since we have not defined any height for <body> , we cannot see any change in the height of div.
Adding couple of more entries in our CSS files may add success to our problem:
html,body{
height:100%;
}
.mainWrapper{
height:100%;
width:100%;
background:#aaa;
}
Putting this CSS can give you 100% browser height to your <div>. Since <html> and <body> are parent elements. We provided them 100% height which says <html> and <body>
elements to take 100% of browser height.
Tuesday, October 19, 2010
Thursday, October 7, 2010
Share your Blog / Website articles in facebook, twitter, linkedIn, buzz
Some quick ways to create buttons for your website/blog and share your articles on buzzing social networking.
Copy and paste the following codes in single.php in your wordpress theme.
1. Official Tweet Button:
goto twitter.com -> Goodies -> tweet button
make necessary settings and copy the generated code in you single.php
Something Similar link gets generated:
<a class="twitter-share-button" data-count="none" data-via="shrutijakhete" href="http://twitter.com/share">Tweet New</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
2. Facebook like button:
Facebook like button can be integrated in two ways.
1. Iframe
2. Javascript Version
Iframe is the easiest way to put like button whereas javascript version allows you customize your settings. Thanks to hyperarts.com they have explained javascript version is explained here quite well.
Using Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>
3.LinkedIn:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title();?>&source=<?php wp_title();?>" target="_blank"><img src="http://static03.linkedin.com/img/pic/pic_logo_119x32.png" border=0 alt="Share on LinkedIn" title="LinkedIn" height="20px"></a>
4. Buzz:
<a class="google-buzz-button" data-button-style="small-count" data-locale="en_IN" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
Reference:
1. http://www.developer.facebook.com
2. http://www.twitter.facebook.com
3. http://www.developer.linkedIn.com
Copy and paste the following codes in single.php in your wordpress theme.
1. Official Tweet Button:
goto twitter.com -> Goodies -> tweet button
make necessary settings and copy the generated code in you single.php
Something Similar link gets generated:
<a class="twitter-share-button" data-count="none" data-via="shrutijakhete" href="http://twitter.com/share">Tweet New</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script>
2. Facebook like button:
Facebook like button can be integrated in two ways.
1. Iframe
2. Javascript Version
Iframe is the easiest way to put like button whereas javascript version allows you customize your settings. Thanks to hyperarts.com they have explained javascript version is explained here quite well.
Using Iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:30px;"></iframe>
3.LinkedIn:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink();?>&title=<?php the_title();?>&source=<?php wp_title();?>" target="_blank"><img src="http://static03.linkedin.com/img/pic/pic_logo_119x32.png" border=0 alt="Share on LinkedIn" title="LinkedIn" height="20px"></a>
4. Buzz:
<a class="google-buzz-button" data-button-style="small-count" data-locale="en_IN" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a><script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
Reference:
1. http://www.developer.facebook.com
2. http://www.twitter.facebook.com
3. http://www.developer.linkedIn.com
Subscribe to:
Posts (Atom)