1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to create a web layout in html?

Discussion in 'HTML & Website Design' started by Minakshi Rana, Feb 28, 2014.

  1. #1
    friends i want to know how to create a web layout in html?Can anyone suggest me the way how creates a web layout?
     
    Minakshi Rana, Feb 28, 2014 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    themes4all, Feb 28, 2014 IP
  3. pentaxial

    pentaxial Active Member

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    78
    #3
    hi,

    before creating HTML full layout , learn basic HTML,CSS using online tutorial websites like w3school,html.net etc,

    then try out basic layout like , 4 square boxes for each row, and columns like that

    using basic css,HTML you can create a good designed website

    if you any doubts on that, just reply to this thread, we will assist you here
     
    pentaxial, Mar 1, 2014 IP
  4. JKK

    JKK Greenhorn

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    What kind of software are you using? HTML is not enough to create a site - at least not a very good one. CSS is a must. If you like to learn on your own it wouldn't be hard to find tutorials. When I started out I found the best thing was to find a template and deconstruct it to better understand how everything worked. Find something simplistic and grasp the concepts and that'll create a place to start from. Hope this helps.
     
    JKK, Mar 1, 2014 IP
  5. meetdilip

    meetdilip Active Member

    Messages:
    196
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #5
    A better idea would be to select one of the many free templates available online and simply modify according to your taste.
     
    meetdilip, Mar 2, 2014 IP
  6. Imran Shariff

    Imran Shariff Member

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    31
    #6
    I always create full-width layout and it is best also create page-width layout too in very rare case. here is a eg: layouts that you can follow

    1. Full-Width Layout
    In full-width layout the page wrapper or container will be added to every individual section. In a layout we will be having three section, header, content and footer. Here is an eg: example for full-width layout.

    <header>
    <section class="page-wrapper">
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col2">
    Column Two
    </div>
    </div>
    </section>
    </header>

    <section class="content">
    <section class="page-wrapper">
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col2">
    Column Two
    </div>
    </div>
    </section>
    </section>

    <footer>
    <section class="page-wrapper">
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col2">
    Column Two
    </div>
    </div>
    </section>
    </footer>

    Whereas the Page-width layout will be little different, where page-wrapper wraps all the three section in one.

    <div class="page-wrapper">
    <header>
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col1">
    Column Two
    </div>
    </div>
    </header>
    <section class="content">
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col1">
    Column Two
    </div>
    </div>
    </section>
    <footer>
    <div class="row">
    <div class="col1">
    Column One
    </div>
    <div class="col1">
    Column Two
    </div>
    </div>
    </footer>
    </div>

    If you required more info on this please do let me know.

    Thanks & regards
     
    Imran Shariff, Mar 4, 2014 IP
  7. Minakshi Rana

    Minakshi Rana Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #7
    howis it used with html/css?
     
    Minakshi Rana, Mar 4, 2014 IP
  8. Imran Shariff

    Imran Shariff Member

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    31
    #8
    here is the css for to work with the above layout, however make sure to replace the <div class="col1"> to <div class="one column">.
    /*To support all browers*/
    *, *:after, *:before {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
              margin: 0; padding: 0;
    }
    
    .page-wrapper:before,
    .page-wrapper:after, .row:before, .row:after {
      display: table;
      content: " ";
    }
    
    .page-wrapper:after, .row:after {
      clear: both;
    }
    .page-wrapper, .row {*zoom:1;}
    
    /*Grid system*/
    .page-wrapper {
      width: 100%;
      max-width: 1000px;
      min-width: 755px;
      margin-right: auto;
      margin-left: auto;
    }
    /*Grid system*/
    .column, .columns {
        float: left;
        padding-left: 0.625em;
        padding-right: 0.625em;
        position: relative;
    }
    
    /*Grid system*/
    .row {margin: 0 0 20px 0; /* margin bottom */}
    
    /* 12 column Grids Calc = 100/12 * 1 */
    .twelve   {width: 100%;}
    .eleven   {width: 91.66666666666666%;}
    .ten      {width: 83.33333333333334%;}
    .nine     {width: 75%;}
    .eight    {width: 66.66666666666666%;}
    .seven    {width: 58.333333333333336%;}
    .six      {width: 50%;}
    .five     {width: 41.66666666666667%;}
    .four     {width: 33.33333333333333%;}
    .three    {width: 25%;}
    .two      {width: 16.666666666666666%;}
    .one      {width:  8.333333333333333%;}
    HTML:
     
    Imran Shariff, Mar 4, 2014 IP