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>

Background Image with Full Screen in Browsers

 Welcome to Designers Dairy blog here i have posted How to make a  Background image in

full screen in browsers

Step1:

Create a Image with width size 1024 or more as u wish  

step2: 

Add these css code

   html
{
background: url(images/bg.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}  

Step3 :

  It will Support in Browser like IE 9 and IE 10 , Firefox, Safari and    Google Chrome

 To Fix Background Image in Full Screen  Browsers7 and  IE 8 by

Calling the class in Image

 Step1:

 Add the css code  in Style sheet

 img.bg {
            /* Set rules to fill background */
            min-height: 100%;
            min-width: 1024px;
          
            /* Set up proportionate scaling */
            width: 100%;
            height: auto;
          
            /* Set up positioning */
            position: fixed;
            top: 0;
            left: 0;
        }
      
        @media screen and (max-width: 1024px){
            img.bg {
                left: 50%;
                margin-left: -512px; }
        }
       
Step 2:

Html Code :

</head>

<body>

  <img src="bg.jpg" width="1024" height="683" class="bg">

</body>

 To Fix Background Image in Full Screen  in  IE 8 by Calling the class in Div

 Step1:

 HTML CODE:

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

 CSS :

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

 To Fix Background Image in Full Screen  in  IE 7 use Java script

 Step1:

Html Code:

<img src="images/bg.jpg" id="bg" alt="">

Step: 2

Css:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

Step:3

Add these script in Head tag

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


 Script :

$(window).load(function() {   

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();
                               
    function resizeBg() {
       
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }
                   
    }
                                  
    theWindow.resize(resizeBg).trigger("resize");

});

Html 5 Default Css and Js

HTML 5 :

Js:

http://code.google.com/p/html5shiv/


Default Css

* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
    font-size: 12px;
    line-height: 22px;
    font-family: verdana, arial, sans-serif;
    color: #727272;
    background: url(images/body-pattern.png) repeat 0 0;
    min-width: 100%;
}

/*font-family: 'Raleway', sans-serif;*/

a { color: #00acef; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

Simple Php Login page with Database

Welcome to Designers Dairy blog here i have posted How to create a  Simple Php Login page

without Database

Step 1:  Create Login .html  and save

Login.html

<form action='logins.php' method='post'>

                  Username : <input type='text' name='username'> <br/>

                  Password : <input type='password' name='pass'> <br/>

                                       <input type='submit' value='Login'>

            </form>


Step 2: Create Login .php and save

Login.php

<?php

   //connecting to database

   $db = mysql_connect("localhost","root","") or die(mysql_error());


   //selecting our database

   $db_select = mysql_select_db("login", $db) or die(mysql_error());

   //Retrieving data from html form

  $username = $_POST['username'];

   $password = $_POST['pass'];




   //for mysql injection (security reasons)

   $username = mysql_real_escape_string($username);

   $password = mysql_real_escape_string($password);



   //checking if such data exist in our database and display result

   $login = mysql_query("select * from user where USERNAME = '$username' and

   PASSWORD = '$password'");

   if(mysql_num_rows($login) == 1) {

      echo "Login Successfull";
     
 header('Location: booked.html');
   

   }

   else {

      echo "Username and Password does not Match";

   }

?>

Step3 :  Have A fun.............!

Simple Php Login page without Database

Welcome to Designers Dairy blog here i have posted How to create a  Simple Php Login page

without Database

Step 1:  Create Login .html  and save

Login.html

<form action='logins.php' method='post'>

                  Username : <input type='text' name='username'> <br/>

                  Password : <input type='password' name='pass'> <br/>

                                       <input type='submit' value='Login'>

            </form>


Step 2: Create Login .php and save

Login.php

 <form action='login.php' method='post'>

                  Username : <input type='text' name='username'> <br/>

                  Password : <input type='password' name='pass'> <br/>

                                       <input type='submit' value='Login'>

            </form>


<?php

    $username = $_POST['username'];
    $password = $_POST['pass']; 

   if($username == 'admin')

 {

      echo "Login Successfull";
     
      header('Location: booked.html');    

   }

   else

 {

      echo "Username and Password does not Match";

   }

?>

Step3 :  Have A fun.............!