Home Joomla! Tutorials Joomla Template Development TutorialsThe file Template_css.css - Part 8

The file Template_css.css - Part 8

Throughout the suite, you will make progress in improving the presentation of your site.
To start, Template_css.css create the file with Notepad + +, for example. Fill in the following code and then save:

div {
padding:0;
margin:0;
}
#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}

In this file, we define for each block <div> via an identifier "id", width (width), the background color (background-color), and positioning in the stream of blocks (float).

By default a new block <div> fits below the previous block. So a stream of blocks <div> 1, 2 <div> ... n <div> stated in this order in your php file will be displayed, by default, one below the other: 1 <div> located at the highest level and <div> n to the lowest level of page. To change this behavior, use the css style property "float" which specifies which side of the container, the block must be aligned <div>. "float: left" to align left and float: right "for right alignment. The property "clear" to cancel the float alignment.

If you are not familiar with these concepts, see the chapter on "css" section in the "Prerequisites" which gives you advice appropriate.

Once you have saved your file template_css.css newly created, refresh the screen of your browser to your site http://localhost/MonSitePerso/. Shows the output from the start input css file:

To focus all of your blocks, add a block container. The body of your index.php file as (changes in bold):

<div id= "conteneur">
<div id="haut">CONTENU BANNER</div>
<div id="gauche">CONTENU GAUCHE</div>
<div id="centre">CONTENU PRINCIPAL</div>
<div id="droit">CONTENU DROIT</div>
<div id="bas">CONTENU PIED DE PAGE</div>
</div>

Remember that the body is between the tags and <body> </ body>.

Edit the template file (changes in bold):

div {
padding:0;
margin:0;
}
#conteneur {
width:800px;
margin: 0 auto;
}
#haut {
width:800px;
background-color: orange;
}
#gauche {
width:200px;
float:left;
background-color: olive;
}
#centre {
width:400px;
float:left;
background-color: silver;
}
#droit {
width:200px;
float:left;
background-color: aqua;
}
#bas {
clear:left;
width:800px;
background-color: gray;
}

The same window Notepad + + will be used for editing both template_css.css and index.php file, a tab for each file. You save everything after changes and refresh the page on your browser to view the result page focused, this time.

In fact, "margin: 0 auto" defines the margins of the block "container" means a zero value for the top and bottom and auto (the same value calculated automatically) to the left and right. This allows all to focus on the page.

In the following, you will make your site by displaying the content provided with the installation of Joomla.