Create the CSS layout

After adding content in all the site pages (except for the main page), it is time to put them together and complete the application. Before that though, you have to create the CSS layout (in the main site page) where to place the site components: header, footer, menu, content.

Designing an CSS layout means working with divs, and not with tables. Since the layout you will create is a very simple one, you will describe its properties inline, right in the index page, and not in a separate .css file.

You want your site content to be displayed in browser horizontally centered, and having a width of 800 pixels. There will be a header section and a footer one, and in between the two, the vertical menu will be displayed on the left (fitting in a 200-pixel width), and the content that changes according to the selected menu item will be displayed on the right (but not to be expanded under the menu as well). For this you need five divs in your page:

  1. The wrapper div includes the other four: 800-pixel width, auto margin (to be horizontally centered).

  2. The header div is displayed on top of the page, spreading throughout the maximum width (800 pixels).

  3. The menu div is displayed below the header: 200-pixel width, floating on the left.

  4. The content div shows next to the menu: floating on the left as well (so that no matter how large the content is, it will always be aligned to the left).

  5. The footer div is displayed below the menu and content divs: clear both sides. To make sure the site footer does not come closer to the header than a certain height, set a specific height for the menu div (that is placed between the header and the footer), say 300 pixels.

Open the index page, switch to Code view and enter the following code between the <body> opening and closing tags:

<div style="width: 800px; margin: auto;">
<div>Header placeholder</div>
<div style="width: 200px; height: 300px; float: left;">Menu placeholder</div>
<div style="float: left;">Content placeholder</div>
<div style="clear: both">Footer placeholder</div>
</div>

 

Switching back to Design view, this is how the index page should look like:

 

Note: Check out this article section if you want to learn how to visually build a very similar CSS layout.

 

Save the index page and upload it to the server. Do not close it as you will continue working in it.

After creating the simple CSS layout, it is time to include the site files into the main page using MX Includes. Move on to the next topic to do this and to complete the application.

Login to Add New Note