Tips and Tricks

A Simple Liquid Template Example

The role of DIV blocks and CSS

By Catalin Bocanu, Web News Editor

3rd of June 2008, 16:12 GMT

Adjust text size:

Website creation is very simple when the content is separated from layout through templates. The appearance of published content will be determined by the position of various elements inside a certain template.

According to a certain web programming language, there are many types of templates available for free download and customization. Widely used, CSS (Cascading Style Sheets) plays a crucial role in formatting the HTML content of any website, providing multiple advantages in template construction and customization, such as flexibility, low file size, the possibility to implement various visual effects in HTML without the need of client side or server side scripts and more.

As a consequence, HTML templates styled with CSS will provide you with multiple options in content publishing. There are two possibilities when you define the website layout: it could be fixed or liquid. The liquid layout allows the website elements to change their relative position as a function of the dimensions of the web browser windows, as opposed to the fixed layout where the webpage will expand or contract with all elements remaining in place, fitting in the current window.

Let's consider the next HTML code (template.html), which defines a template having two DIV elements (columns):

CODE


 



HOME  
ABOUT US
PRODUCTS
CONTACT US

Your Content

In order to create a liquid template, the myStyle.css has to have the next structure:

CODE

#menu {
  float: right;
  width: 30%;
}
#thecontent {
  margin-right: 25%;
}

According to the CSS specifications in the external file myStyle.css, the template navigation system (menu) will "float" to the right, as a box element occupying 30% of the browser window. The website content will be published in the left of the page with a relative distance of 25% from the right menu box (column).

In the HTML code, the two DIV containers will define a website layout formed by two columns vertically oriented. In the absence of CSS code, the position of the DIV containers would be horizontally oriented, without a clear delimitation between them: the text from one column could appear superposed over the other one.

You can modify the percentages that define how much of the browser window is occupied by every column to notice the modification of template structure. You can also easily change the HTML and CSS code in order to create a three column layout for your template.

TAGS:

HTML | CSS | Cascading Style Sheets | Web Development | Website Design

SEARCH THE NEWS ARCHIVE :

Today's News | Yesterday's News | News Archive

User opinions:

Comment #1 by: chlorophyll on 24 Sep 2008, 13:30 GMT	reply to this comment
VERY INTERESTING ARTICLE, SO MANY USEFUL INFORMATIONS, IT'S HELPFUL FOR ME AND I THINK FOR MANY OTHER USERS :) THX

Comment #2 by: VINIT PRATAP SINGH on 25 Sep 2008, 05:02 GMT	reply to this comment
Very usefull information.. thanks a lot..

Share your opinion:

SUBMIT PROGRAM \| ADVERTISE \| GET HELP \| SEND US FEEDBACK \| RSS FEEDS \| ENTER NEWS SITE \| ENGLISH BOARD \| ROMANIAN FORUM
© 2001 - 2008 Softpedia. All rights reserved. Softpedia™ and the Softpedia™ logo are registered trademarks of SoftNews NET SRL.	Copyright Information \| Privacy Policy \| Terms of Use \| Update your software \| Archive

NEWS CATEGORIES: