html_tips

HTML tricks and tips
1.If you don`t give any content inside div, it will not show.

2.If you don`t give any content inside div and give div width,height and background it will show.

3.another note that if you don`t give any content inside div but give box-shadow and padding or background and padding it will show.

3.if u want to equal three column amd more column div then u have to use -

main div -20 or something and single column div 20px or something then use width. ex-

 <style type="text/css">
     body{background:#2293da;color:#ffffff;}
   .column{width:960px;margin:0 auto;}
   .test_div{margin-left:-30px;}
   .box{margin-left:30px;float:left;}
   .box_one{width:300px;height:300px;background:red;}
   .box_two{width:300px;height:300px;background:#328e2d;}
   .box_three{width:300px;height:300px;background:#8e2d84;}

 </style>
</head>


<body>
   <div class="column">
    <div class="test_div">
	<div class="box box_one">PqNNN</div>
      <div class="box box_two"></div>
      <div class="box box_three"></div>
   </div>
	</div>
</body>


4.z-index css only work over position:relative; and position:absolute; . even one div z-index 1 and another div z-index 0 1 will show top.


5.using position absolute to center a div -

background: #2acdd7;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;

  importtant thing - left:50%;margin-left: -150px; (this -150px come from width 300/2 = 150 )


6.content centerd

parebt div - display:table
               height:200px

  child div - display:table-cell
               vertical-align: middle;


7. responaive background image -background-size:100% auto;


8.center incon inside div -


<div class="exp">
<i class="fa fa-camera-retro fa-3x"></i>
</div>

  <style type="text/css">
  width:80px;
    height:80px;           //here widht height and line-height =
    background-color:red;
    border-radius:100%;
    line-height:80px;
    text-align:center;


	.fa-camera-retro { line-height: inherit;}
  </style>