Mar
27
2009
Written by admin
This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.
Get The Source Code: Without Jquery With Jquery
Step 1:
Create an index.html file for your layout. I create an example html layout for this article.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Division Using Javascript and CSS</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" language="javascript" src="javascript.js">
</script>
</head>
<body onload="grabtheclass()">
<div class="outer">
<div class="inner">
<div class="main">
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
<p>The Main Content</p>
</div>
<div class="sidebar">
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
<p>The Sidebar Content</p>
</div>
</div>
</div>
</body>
</html>
Continue reading…
Tags: CSS, Equal Height Sidebar, Javascript
Categories: Javascript, Tips and Tricks, Web Design, XHTML & CSS |
Mar
22
2009
Written by admin
This simple tips will help you make your division float above flash object or flash player embedded on your website. When you embed a flash object or flash player on your website, the flash object will take the highest number possible z-index by default and all the other division layer will appear below the flash object. Actually this property of embedded flash object is quite useful in most cases. However when you want some text or division to appear on top of your flash object, you need this tips to fix that issue. You have three options to fix this floating issue.
First option is to compile/recompile your flash object with the parameter ‘wmode‘ value set to ‘opaque‘. However, in most cases, we normally get a precompiled flash object rather than the source flash file. In such cases the second option will be more suitable. Second option is to add a parameter in your flash object as shown in example below
<object>
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="670" />
<param name="height" value="390" />
<param name="wmode" value="opaque" />
</object>
Third option is to add an attribute ‘wmode’ with value set to ‘opaque’ in the object file. After performing any one these, your flash player or flash object will float below <DIV> having higher z-index.
Tags: CSS, Flash
Categories: Flash, Tips and Tricks, Tutorials, XHTML & CSS |
Jun
19
2008
Written by admin
After a long pause I came back with this tweak for wordpress. Here it comes, since I work a lot with wordpress these days. 
I came across this wordpress tweak when one of my client wants a Blogroll Icon to be displayed along with the blogroll link. So here’s the steps on ‘How to show a Blogroll Icon’ in wordpress blog. Originally, what you have with wordpress blogroll is a list of links to websites and blogs. So to show image beside the blogroll link (most probably on the right side of the link text), perform the following steps.
Step1:
First you need to get the plugin ZocPowerblogroll from his website. Download the plugin and this plugin will do most of the work for us.
Continue reading…
Tags: CSS, Web Designing, Wordpress
Categories: Tutorials, Web Design, Wordpress, XHTML & CSS |
Recent Comments