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):
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.
Find us on Google+
