Idealex

search

Layouts Page

Structure of an HTML document

<header> </header>
<nav> </nav>
<aside> </aside>
<section> </section>
<footer> </footer>
Description

The first step of creating any HTML document is formatting page structure. To create new website pages you can use blank.html file that is included into the purchased template package.

Structure Configuration

Page Layout

Header
Content
Footer
Description

If the layout looks like a single sheet of paper on top of <body> and all content sections are wrapped by a single width-defining element, use the following code:

HTML

  1. <div id="main">
  2.     <header>
  3.          <!-- Your Logo here -->
  4.         <nav>
  5.             <!-- Your Main Menu here -->
  6.         </nav>
  7.     </header>
  8.     <section>
  9.         <div class="container_24">
  10.             <div class="wrapper">
  11.                 <!-- Your Columns here -->
  12.             </div>
  13.         </div>
  14.     </section>
  15.     <footer> <!-- Your Footer here --> </footer>
  16. </div>

CSS

  1. #main{ 
  2. width:1000px; /* Your Main Block width */
  3. margin:0 auto; 
  4. background:#fff; /* Your Background Color */
  5. }

Page Layout width full-width backgrounds

Header
Content
Footer
Description

If the layout is subdivided into several vertical aligned sections, covering the full width of the viewport and the content area is aligned or centered within these sections, use the following code:

HTML

  1. <header class="full-width-bg">
  2.     <div class="header-box">
  3.         <!-- Your Logo here -->
  4.         <nav>
  5.             <!-- Your Main Menu here -->
  6.         </nav>
  7.     </div>
  8. </header>
  9. <section class="full-width-bg">
  10.     <div class="container_24">
  11.         <div class="wrapper">
  12.             <!-- Your Columns here -->
  13.         </div>
  14.     </div>
  15. </section>
  16. <footer class="full-width-bg">
  17.     <div class="footer-box">
  18.             <!-- Your Footer here -->
  19.     </div>
  20. </footer>

CSS

  1. .full-width-bg{ 
  2. width:100%; 
  3. background:#ddd; /* Your Backgrounds Color */
  4. }
  5. .header-box{ 
  6. width:960px; /* Your Header Block width */
  7. margin:0 auto; 
  8. }
  9. .footer-box{ 
  10. width:960px;  /* Your Footer Block width */
  11. margin:0 auto; 
  12. }

Columns

grid_24
1
grid_23
grid_2
grid_22
grid_3
grid_21
grid_4
grid_20
grid_5
grid_19
grid_6
grid_18
grid_7
grid_17
grid_8
grid_16
grid_9
grid_15
grid_10
grid_14
grid_11
grid_13
grid_12
grid_12
grid_13
grid_11
grid_14
grid_10
grid_15
grid_9
grid_16
grid_8
grid_17
grid_7
grid_18
grid_6
grid_19
grid_5
grid_20
grid_4
grid_21
grid_3
grid_22
grid_2
grid_23
1

Layouts

Full-width

Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dui. Fusce feugiat malesuada odio. Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget, elementum vel, cursus eleifend, elit. Aenean auctor wisi et urna. Aliquam erat volutpat. Duis ac turpis.
Description

The template is based on a grid system that uses 24 columns. In order to create the full-witdh column you will need to insert the following code:

  1. <div class="container_24">
  2.     <div class="wrapper">
  3.         <div class="grid_24">
  4.             <!-- insert content here -->
  5.         </div>
  6.     </div>
  7. </div>

Lets examine the layout creation process, step by step:

  1. Create a <div> with the "wrapper" class (<div class="wrapper">). This <div> is a container for our columns so using it is a must.
  2. Next you need to create the desired number of columns and add the "grid" class to them.
  3. Now the most important step. You need to add "grid_x" class to each of the columns, where x - is the column width index. Total index of all the columns should be equal to 24 and should not be bigger than this value.

Images

Floating Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Floating Left 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Floating Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi feugiat pharetra turpis, sed posuere nisi porta a. Etiam vel enim lorem. Nunc lorem sapien, ultrices at faucibus at, varius a est. Cras ultricies, quam ac lobortis porta, ante sapien mollis dui.

Description

Floating Left

In order to create an image block with the text wrapping it on the right, add class "image_left" to the image.

  1. <div class="wrapper">
  2.     <div class="image_left">
  3.         <img src="YourImage.jpg" alt="">
  4.     </div>
  5.     <p> <!-- insert text here --> </p>
  6. </div>

Floating Left 2

In order to create left-aligned image block and right-aligned text block add class "image_left" to the image and class "extra-wrap" to the text block.

  1. <div class="wrapper">
  2.     <div class="image_left">
  3.         <img src="YourImage.jpg" alt="">
  4.     </div>
  5.     <p class="extra-wrap"> <!-- insert text here --> </p>
  6. </div>

Floating Right

In order to create an image block with the text wrapping it on the left, add class "image_right" to the image.

  1. <div class="wrapper">
  2.     <div class="image_right">
  3.         <img src="YourImage.jpg" alt="">
  4.     </div>
  5.     <p> <!-- insert text here --> </p>
  6. </div>