CSS Layout Basic Tutorial

Furqan Aziz | 18 Aug 2013 | Tutorials

CSS Layout Basic Tutorial
Social Box
CSS Basic Layout Tutorial is a very good for beginners who want to design their first website using DIV and CSS. it will teach you following using DIV and CSS.
  1. First we will create new php or html file and name it index.php or index.html and write below code in first line for declaring doctype as we are using HTML5.
    • <!DOCTYPE HTML>
  2. Now We will create 4 DIvs with ids in <body> HTML Tag. These ids will be used in CSS Style sheet for styling.
    • <!-- Header -->
      <div id=" header" ></div>
      <!-- End Header -->
      
      <!-- Content -->
      <div id=" content" >
      <h2>Content Area</h2>
      </div>
      <!-- Right Column -->
      <div id=" rightcolumn" >
       <h2>Right Column</h2>
      </div>
      <!-- Footer -->
      <div id=" footer" >
      Footer - 2013. Designed By Furqan Aziz
      </div>
  3. In style.css file we will set body margin and padding 0. See below code
    • body 
      { 
      margin: 0px; 
      padding: 0px;
      }
  4. For referring id we will use # sign. We will set 100% width for header and 50px height and also set background image for header of our wish.
    • #header 
      { 
      width: 100%;
      height : 50px;
      background-image:url(../img/header.fw.png);
      }
  5. For content we will set 75% width because 25% will be required for right side column. We will set height of 500px. You can choose different height for this according to your requirements. We also set background color for demo. Float set to left because we need this DIV on the left side.
    • #content
      {
      background: #0066FF;
      float: left;
      width: 75%;
      height: 500px;
      }
  6. For right column we will set float right because we want to show it on the right side of the content DIC. It has same height as content DIV. It width will be 25% of the page. For visibility of demo we set different background color for this.
    • #rightcolumn
      {
      background: #99FF33;
      float: right;
      width: 25%;
      height: 500px;
      }
  7. For footer we will clear both above DIVs and set 100% width. You can also set background color as you like it.
    • #footer
      {
      clear: both;
      width: 100%;
      background: #999999;
      }
  8. We use cufon fonts in this tutorial because it will look nice. We have included 2 files before the </body> HTML tag. One file is cufon js and other for caviar-dreams font.
    • <script type="text/javascript" src="js/cufon-yui.js"> </script>
      <script type="text/javascript" src="js/caviar-dreams.cufonfonts.js"></script>
  9. for displaying font for all DIVs we will write below javascript code.
    • <script type="text/javascript">  
          Cufon.replace('div');
      </script>
  10. We hope you understand the basic CSS layout tutorial. Please practice it yourself and make better layout using this tutorial. If you have download the source code, you will copy it in your htdocs or www root folder and then you will try it in browser. If you do not know about PHP, then you can simply use index.html file which is also available in source code. You can try index.html file without any localhost. Enjoy it and keep learning. For any query/suggestions please post a comment on our Facebook Page.
LATEST TUTORIALS
PHP MySQL Simple Delete using PDO in Bootstrap Tutorial
Convert Simple Text To 3D Text using Adobe Fireworks CS6 Tutorial
PHP Simple Update using PDO in Bootstrap Tutorial
PHP Simple Insert using PDO in Bootstrap Tutorial
PHP MySQL Easy CSV Data Insertion in Bootstrap using PDO Tutorial
PHP Easy Sign-in Using PDO Prepared Statement Tutorial
Easy PHP Email With Attachments using Swift Mailer Tutorial
Easy Pagination with PDO in PHP plus Export to Excel Tutorial
PHP PDO to Connect MySQL Database Tutorial
Best CSS Frameworks Collection For Rapid Web Development
PHP-MySQL Ajax Jquery-UI Autocomplete in Bootstrap Tutorial
PHP Simple Sign-in Tutorials
Jquery Raty Usage via PHP
PHP Dynamic Select options Via Ajax
CSV Importer in MySQL
PHP File Load Via Jquery into DIV
© 2014 CreWow Network - All Rights Reserved.