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.
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
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.- *{margin:0px;padding:0px}
- body{font-family:arial}
- ul{list-style:none;width:100%}
- li{padding:4px;margin-bottom:5px; margin-top:5px; background-color:#ffffcc;text-align:center;color:#000; width:}
- #head
- {
- min-height:30px;
- background-color:#006699;
- border-bottom:2px solid #333;
- padding:20px;
- clear:both
- }
- #footer
- {
- min-height:10px;
- background-color:#dedede;
- border-top:2px solid #333;
- padding:20px;
- clear:both;
- text-align:center
- }
- #nav{
- border-bottom:2px solid #333;
- }
- #main
- {
- padding:10px 10px 10px 10px;
- }
- #article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto}
- .content{padding:20px}
- .clearfix{
- clear:both;
- }
- @media only screen and (min-width: 480px)
- {
- #header
- {
- background-color:#cc0000;
- }
- ul{float:left;}
- li{float:left;width:16%;padding:4px;margin-right:8px}
- #main
- {
- padding:10px 20px 10px 20px;
- }
- }
- @media only screen and (min-width: 768px){
- #header
- {
- background-color:#006699;
- }
- #article
- {
- float:left;
- width:68%;
- }
- #sidebar
- {
- float:right;
- width:30%;
- }
- #logo
- {
- float:left;
- width:10%;
- }
- #nav
- {
- width:100%;
- }
- ul{float:right}
- li{float:left;width:18%;padding:4px;margin-right:8px}
- #main
- {
- padding:20px 30px 20px 30px;
- }
- }
Step 2: Creating PHP file that display the acctual site.
This file include our the link of our javascript and css file.- <!DOCTYPE html>
- <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
- <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
- <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
- <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Responsive Design with CSS</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width">
- <script src="modernizr-2.6.1-respond-1.1.0.min.js"></script>
- </head>
- <body>
- <div id="head">
- </div>
- <div id="nav">
- <ul>
- </ul>
- <div class="clearfix"></div>
- </div>
- <div id="main">
- <div id='article'>
- <div class='content'>
- <h1>Responsive Design with CSS</h1>
- <h3>Resize your browser and test with different resolutions</h3>
- </div>
- </div>
- <div id='sidebar'>
- <div class='content'>
- Side Block
- </div>
- </div>
- </div>
- <div id="footer">
- ffxggfgfgfgfg
- </div>
- </body>
- </html>
Add new comment
- 7776 views