Applying PIE.js to get effect in whole html Pages

Welcome to Designers Dairy blog here i have posted how to apply PIE.js

 to apply entire HTML Pages website

Step 1:

Include the PIE.js script in your page in Head Tag

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

<!--[if lt IE 9]>
  <script type="text/javascript" src="js/PIE.js"></script>
<![endif]-->



Step 2:

Include Style sheet          
 

    <style type="text/css">
    .text1
    {
         -moz-border-radius: 15px;
         border-radius: 15px;
         border:solid 1px black;
         padding:5px;
     
    }

.border-radius
    {
         -moz-border-radius: 15px;
         border-radius: 15px;
         border:solid 1px black;
         padding:5px;
     
    } 
    </style>  

Step 3:

Include the Javascript  and call the Style Class where u need PIE.JS to apply

<script type="text/javascript">
         $(document).ready(function ()
         {
             if (window.PIE) {
                 $('text1,.border-radius, .styled-button, .blue_bg, .menu_navigation li a').each(function ()
                 {
                     PIE.attach(this);
                 });
             }
         });
    </script>

Step 4:

Enjoy 

  

Converting layouts to Grid Systems

Welcome to Designers Dairy blog here i have posted how to convert the Psd to Grid base layout


Step1:

 Go to this site http://grids.heroku.com/   u can easily divide your templates into Columns


Step2:

Full Width : 1235px  - > Size of the template full width

Number of columns - > 18 ( it will divide  columns according to width 1214 px;)

Gutter - is nothing but  margin left and  right of the template  (space between two sides of template)

Width  : 1235 - 20 (both gutter 10 +10) =  1215px -1px = 1214px



Step3:

Screenshots

step 5:

breif  explain

Step4:

              Download the grid css File and enjoy working with Grids

Multi-column layout

Welcome to Designers Dairy blog here i have posted how to continue the text with  multiple columns for

laying out text - like in newspapers!

 Three Properties

• column-count
• column-gap
• column-rule

Step1: 

Add the style

.newspaper

{

    Column-count

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

column-count:3;

   Column-gap

-moz-column-gap:40px; /* Firefox */

-webkit-column-gap:40px; /* Safari and Chrome */

column-gap:40px;

   Column-rule

-moz-column-rule:4px outset #ff00ff; /* Firefox */

-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */

column-rule:4px outset #ff00ff;

}

Step 2:

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

</div>

Step3:

Enjoy the output

 

Removing last item menu border in IE8 browsers

 
Welcome to Designers Dairy blog here i have posted How to remove the border in last menu item using jquery to fix in IE8


Step1:

 Html Code :

<nav  class="menu_navigation right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Quick Links </a></li>
      <li><a href="#">Depts & Faculties </a>
            <ul>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor </a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
              <li><a href="#">Lorem ipsum dolor</a></li>
            </ul>
          </li>
          <li><a href="#">Website</a></li>
        </ul>

</nav>

<script>

$("nav li:last-child")
.css({fontColor:"red", border:"solid 0px #000"})

</script>


</body>

</html>

Step2:

Script Should be include below the menu navigation .if not it doesnt work

Step3:

Include the Jquery library link .if not it doesnt work

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Step4: 

Css with Drop down menu
<style>
ul li {
list-style-type:none;
font-weight:600;
}
.menu_navigation {
margin:50px 0px 0px 0px;
font-size:16px;
}
.menu_navigation ul li {
position: relative;
float: left;
border:none;
}
.menu_navigation li ul {
display: none;
}
.menu_navigation ul li a, .menu_navigation li:hover ul {
display: block;
}
.menu_navigation ul li {
color:#717070;
border-right:solid 1px #ccc;
padding:0px 15px 0px 15px;
white-space: nowrap;
}
.menu_navigation ul li ul li {
border:none !important;
}
.menu_navigation li:hover ul {
position: absolute;
}
.menu_navigation ul li ul li a {
background: url(../images/blue_bullet.gif) no-repeat 10px 14px #f9f9f8;
line-height:34px;
padding:0px 25px 0px 25px;
font-size:14px;
color:#5195aa;
border:none;
box-shadow: 3px 2px 2px #848382;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=2, Color=#848382); /*** Drop Shadow for IE 8 ***/
}
.menu_navigation ul li a, .footer-nav li a, .text-nav li a {
color:#717070;
}
</style>