Responsive Web Page Using PHP and CSS

Submitted by argie on Tuesday, December 18, 2012 - 12:21.
Hi everyone, this tutorial will teach you on how to create a responsive website using php with css. To start this tutorial, lets follow the steps bellow.

Step 1: Creating The CSS File.

To create copy the code below and save it as "style.css". This file is use to beautify our design based on the size of the screen. 
  1. *{margin:0px;padding:0px}
  2. body{font-family:arial}
  3. ul{list-style:none;width:100%}
  4. li{padding:4px;margin-bottom:5px; margin-top:5px; background-color:#ffffcc;text-align:center;color:#000; width:}
  5. #head
  6. {
  7. 	min-height:30px;
  8. 	background-color:#006699;
  9. 	border-bottom:2px solid #333;
  10. 	padding:20px;
  11. 	clear:both
  12. }
  13. #footer
  14. {
  15. 	min-height:10px;
  16. 	background-color:#dedede;
  17. 	border-top:2px solid #333;
  18. 	padding:20px;
  19. 	clear:both;
  20. 	text-align:center
  21. }
  22. #nav{
  23. 	border-bottom:2px solid #333;
  24. }
  25. #main
  26. {
  27. 	padding:10px 10px 10px 10px;
  28. }
  29. #article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto}
  30. .content{padding:20px}
  31. .clearfix{
  32. 	clear:both;
  33. }
  34. @media only screen and (min-width: 480px)
  35. {
  36.  
  37. #header
  38. {
  39. background-color:#cc0000;	
  40. }
  41. ul{float:left;}
  42. li{float:left;width:16%;padding:4px;margin-right:8px}
  43. #main
  44. {
  45. 	padding:10px 20px 10px 20px;
  46. }
  47.  
  48. }
  49. @media only screen and (min-width: 768px){
  50. #header
  51. {
  52. background-color:#006699;	
  53. }
  54. #article
  55. {
  56. float:left;
  57. width:68%;
  58. }
  59.  
  60. #sidebar
  61. {
  62. float:right;
  63. width:30%;
  64. }
  65. #logo
  66. {
  67. float:left;
  68. width:10%;
  69. }
  70. #nav
  71. {
  72. width:100%;
  73. }
  74. ul{float:right}
  75. li{float:left;width:18%;padding:4px;margin-right:8px}
  76. #main
  77. {
  78. 	padding:20px 30px 20px 30px;
  79. }
  80.  
  81. }

Step 2: Creating PHP file that display the acctual site.

This file include our the link of our javascript and css file. 
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  3. <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  4. <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  5. <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <title>Responsive Design with CSS</title>
  10. <meta name="description" content="">
  11. <meta name="viewport" content="width=device-width">
  12. <link rel="stylesheet" href="style.css">
  13. <script src="modernizr-2.6.1-respond-1.1.0.min.js"></script>
  14. </head>
  15. <body>
  16. <div id="head">
  17. </div>
  18. <div id="nav">
  19.  <ul>
  20.   <li> Link </li>
  21.   <li> Link </li>
  22.   <li> Link </li>
  23.   <li> Link </li>
  24.   <li> Link </li>
  25.  </ul>
  26.  <div class="clearfix"></div>
  27. </div>
  28. <div id="main">
  29. <div id='article'>
  30. <div class='content'>
  31. <h1>Responsive Design with CSS</h1>
  32. <h3>Resize your browser and test with different resolutions</h3>
  33. </div>
  34. </div>
  35. <div id='sidebar'>
  36. <div class='content'>
  37. Side Block
  38. </div>
  39. </div>
  40. </div>
  41. <div id="footer">
  42. ffxggfgfgfgfg
  43. </div>
  44. </body>
  45. </html>
That's all you've been successfully created your webpage that is responsive and automatically adjust style based on the size of the screen. I also provided the zip file to download, in the zip file it include the css and the javascript file

Tags

Add new comment

About text formats
  • 6769 views