The homepage and the use of multiple columns.
Written by Angie Radtke
Read in: deutsch
When constructing the homepage, Joomla provides the use of multi columned articles.
In older Joomla versions the construction of these columns was realised with tables. Although this is a simple and effective solution, it does not represent todays standards.
Goal was to get rid of the table constructions and to create Markup able to support to use of multiple columns with flexible Style possibilities.
The realisation of the actual content is driven by the component com_content.
After the copying the files from the tmpl- directory of the component into our template, they can be modified and edited. The realisation of the homepage is driven from the directory Frontpage.
The realisation of multiple columns could easliy be realised with tables by simply adding rows and columns. All that we are left with now now, is to wrap an article in a Div-Container and to give it an appropriate float.
To realise clean and flexible output, every single containers has more than one CSS class.
Some people will most likely accuse us of divititis and classitis, but we believe, that removing unnecessary divs and classes is easier than creating accurate new ones.
now, to the point:
Lets take a closer look at the startpage.
<div class = "leading" >Inhalt leading</ div >
<span class = "leading_separator" > </ span >
< div class = "article_row" >
<div class = "article_column column1 cols2" > Content Article 1 </ div >
<span class = "article_separator" > </ span >
<div class = "article_column column2 cols2" > Content Article 2 </ div >
<span class = "article_separator" > </ span >
<span class = "row_separator2" > </ span >
</ div >
We start with <div class="leading">, which contains the teasertext. In our CSS we gave this area a pink background color and the beez background image. Next is the leading_separator, its task could be to draw a horizontal line, or to clear Floats (inserted images) in the Leading-Container.
And now it gets exiting, a div with class .article_row opens, replacing the previous used table row. This div contains our separate articles, which are enclosed by a container with class .article_column. This class replaces the table columns (td).
Because we not only want to create a column, we need a class indicating the number of columns needed
Here we give the article column an additional class named .cols1 - .colsx . But thats not enough. We want to give each column a separate look.
e.g. the first column with yellow background, and the second with a green one. This works out fine, if we define the appropriate properties for each class (column1 - columnx) accordingly.
The .row_separator2 clears the floating contents, to prevent overlapping rows. If we created a 1 columned view, .row_separator1, der entsprechende Formatierungen erlaubt.
